← How a game is made: Daily Challenge's Snake · Lesson 12/16

Music from a recipe

1/9

A song in eleven lines

Each challenge's music comes from a recipe: a text file in public/content/music/ with key: value lines. A recipe doesn't contain notes: it holds the rules (tempo, root, scale, chord progression, structure, waves) and the day's seed writes the melody. So there's a different song every day without composing any.

There's another kind, the fixed tune (tune:), with public-domain pieces written note by note; there the seed only picks the bass and drums.

The program reads the chip_01.txt recipe with the game's parseMusicSpec, summarized.

leccion.js

1const receta = [
2  "# Receta 01: menor pentatónica, tipo arcade oscuro",
3  "tempo: 160",
4  "root: C4",
5  "scale: minor_pentatonic",
6  "harmony: minor",
7  "progression: i VI III VII",
8  "bars: 8",
9  "structure: AABA",
10  "lead: square",
11  "bass: triangle",
12  "drums: on",
13].join("\n");
14
15// parseMusicSpec from core/music.js (without continuation lines)
16function parseMusicSpec(text) {
17  const spec = {};
18  for (const raw of text.split("\n")) {
19    const line = raw.trim();
20    if (!line || line.startsWith("#")) continue;
21    const i = line.indexOf(":");
22    if (i < 0) continue;
23    spec[line.slice(0, i).trim().toLowerCase()] = line.slice(i + 1).trim();
24  }
25  return spec;
26}
27
28const spec = parseMusicSpec(receta);
29console.log(spec);
30console.log("chords:", spec.progression.split(" "));

$ node leccion.js

Press RUN (or Ctrl+Enter).

What to look at

The top comment (#) is skipped; the rest becomes an object of strings.
i VI III VII are scale degrees in Roman numerals: the root chord, then the sixth, third and seventh of the minor scale.
AABA: section A plays twice, then a B, then A again, as in so many songs.

The whole lesson on one page

A song in eleven lines

There's another kind, the fixed tune (tune:), with public-domain pieces written note by note; there the seed only picks the bass and drums.

The program reads the chip_01.txt recipe with the game's parseMusicSpec, summarized.

1const receta = [
2  "# Receta 01: menor pentatónica, tipo arcade oscuro",
3  "tempo: 160",
4  "root: C4",
5  "scale: minor_pentatonic",
6  "harmony: minor",
7  "progression: i VI III VII",
8  "bars: 8",
9  "structure: AABA",
10  "lead: square",
11  "bass: triangle",
12  "drums: on",
13].join("\n");
14
15// parseMusicSpec from core/music.js (without continuation lines)
16function parseMusicSpec(text) {
17  const spec = {};
18  for (const raw of text.split("\n")) {
19    const line = raw.trim();
20    if (!line || line.startsWith("#")) continue;
21    const i = line.indexOf(":");
22    if (i < 0) continue;
23    spec[line.slice(0, i).trim().toLowerCase()] = line.slice(i + 1).trim();
24  }
25  return spec;
26}
27
28const spec = parseMusicSpec(receta);
29console.log(spec);
30console.log("chords:", spec.progression.split(" "));

The top comment (#) is skipped; the rest becomes an object of strings.
i VI III VII are scale degrees in Roman numerals: the root chord, then the sixth, third and seventh of the minor scale.
AABA: section A plays twice, then a B, then A again, as in so many songs.

From "C4" to hertz

To do math with notes, the game numbers them as MIDI: each semitone is a number. C4 (middle C) is 60 and A4 (the tuning A) is 69. parseNoteName does the conversion: 12 times the octave plus one, plus the note's position within the octave.

From number to frequency there's a one-line formula: 440 · 2^((n − 69) / 12). Each semitone multiplies the frequency by the twelfth root of 2, so going up 12 (an octave) doubles it.

1const NOTE_IDX = { C: 0, "C#": 1, DB: 1, D: 2, "D#": 3, EB: 3, E: 4, F: 5, "F#": 6, GB: 6, G: 7, "G#": 8, AB: 8, A: 9, "A#": 10, BB: 10, B: 11 };
2
3function parseNoteName(s) {
4  const m = /^([A-G](?:#|B)?)(-?\d)$/.exec(s.trim().toUpperCase());
5  if (!m) throw new Error("Invalid note: " + s);
6  return 12 * (parseInt(m[2]) + 1) + NOTE_IDX[m[1]];
7}
8
9const midiToFreq = (n) => 440 * Math.pow(2, (n - 69) / 12);
10
11for (const nombre of ["C4", "E4", "G4", "A4", "C5", "A5", "A3"]) {
12  const n = parseNoteName(nombre);
13  console.log(nombre.padEnd(3), "midi", n, "->", midiToFreq(n).toFixed(2), "Hz");
14}

A4 gives exactly 440: it's the formula's anchor.
A5 gives 880 and A3, 220: an octave up doubles it and an octave down halves it.
C4, E4 and G4 (60, 64, 67) make the C major chord.

The seed writes the melody

generateSong uses the scale to build a pool of allowed notes (two octaves of the minor pentatonic from C4) and walks through it: each step moves up or down up to two places at random, sometimes rests and sometimes holds the previous note. On strong beats it looks for a note of the current chord, so it doesn't clash.

The randomness is mulberry32 with the day's music seed. Here's a reduced version (no chords or sections): run it and notice the same seed gives the same melody.

1function mulberry32(seed) {
2  let a = seed >>> 0;
3  const next = () => {
4    a = (a + 0x6D2B79F5) >>> 0;
5    let t = a;
6    t = Math.imul(t ^ (t >>> 15), t | 1);
7    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
8    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
9  };
10  return { next, int: (min, max) => min + Math.floor(next() * (max - min + 1)) };
11}
12
13const NOMBRES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
14const nombre = (n) => NOMBRES[n % 12] + (Math.floor(n / 12) - 1);
15
16// Two octaves of the minor pentatonic from C4 (midi 60)
17const ESCALA = [0, 3, 5, 7, 10];
18const permitidas = [];
19for (let o = 0; o < 2; o++) for (const s of ESCALA) permitidas.push(60 + 12 * o + s);
20
21function melodia(semilla, pasos) {
22  const rng = mulberry32(semilla);
23  let cur = Math.floor(permitidas.length / 2);
24  const notas = [];
25  for (let i = 0; i < pasos; i++) {
26    const r = rng.next();
27    if (r < 0.12) { notas.push("."); continue; }       // rest
28    if (r < 0.30) { notas.push("-"); continue; }       // hold the previous one
29    cur = Math.min(permitidas.length - 1, Math.max(0, cur + rng.int(-2, 2)));
30    notas.push(nombre(permitidas[cur]));
31  }
32  return notas.join(" ");
33}
34
35console.log("allowed:", permitidas.map(nombre).join(" "));
36console.log("seed 1:", melodia(1, 16));
37console.log("seed 1:", melodia(1, 16));
38console.log("seed 2:", melodia(2, 16));

The melody never leaves the ten allowed notes: that's why, random as it is, it sounds "like something".
. is a rest and - holds the previous note.
Both seed-1 lines match note for note. In the game that seed comes from the date (unit 5), so everyone hears the same song that day.

A sequencer that never falls behind

The browser doesn't promise that a 25 ms setInterval wakes every 25 ms: sometimes it's late because the phone was busy drawing. If each note played "whenever the timer wakes", the music would limp.

core/audio.js's Sequencer uses a well-known trick called *lookahead*: each time it wakes it schedules every note in the next 120 ms at its exact time on the AudioContext clock (osc.start(t)), which is precise. Waking late doesn't matter as long as it's before that window.

1const tempo = 160;
2const pasoDur = 60 / tempo / 2;    // one eighth note, in seconds
3let siguiente = 0.05, paso = 0;
4
5// When the 25 ms setInterval really woke up (never on time)
6const despertares = [0, 0.031, 0.049, 0.09, 0.101, 0.16, 0.183, 0.26, 0.29, 0.31,
7  0.352, 0.37, 0.43, 0.47, 0.49, 0.53, 0.58, 0.61, 0.66, 0.7, 0.74, 0.81];
8
9let enBlanco = 0;
10for (const ahora of despertares) {
11  const programadas = [];
12  while (siguiente < ahora + 0.12) {
13    programadas.push("step " + paso + " at " + siguiente.toFixed(4) + " s");
14    paso++;
15    siguiente += pasoDur;
16  }
17  if (programadas.length) console.log("wakes at", ahora.toFixed(3), "->", programadas.join(", "));
18  else enBlanco++;
19}
20console.log("wake-ups with nothing to do:", enBlanco, "of", despertares.length);

The wake-ups are uneven, but the steps land exactly 0.1875 s apart (an eighth note at 160 bpm). Most of the time the sequencer wakes and has nothing to schedule: it already set it up earlier.