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

A sound chip with Web Audio

1/9

A mixing desk in the browser

Daily Challenge doesn't load a single mp3: all its sounds are built on the fly with the Web Audio API, the way an 8-bit console's chip did it. Think of a mixing desk: one AudioContext and nodes wired in a chain.

An OscillatorNode makes a tone: a square wave (the Atari and NES sound) or a triangle wave (softer, good for bass).
A GainNode controls volume over time.
Everything ends in a master and from there goes to the speakers. Music first goes through its own bus, musicBus, so it can be muted without muting the effects.

Phones have a rule: audio only starts from a user's tap. That's why chip.unlock() is called when you press PLAY, not when the page loads.

There are no speakers here (the code runs in a Worker), so the program uses a fake AudioContext that writes down what would have played, with core/audio.js's note() function as is.

leccion.js

1// A fake AudioContext: instead of playing, it writes down what it would do
2const ctx = {
3  createOscillator() {
4    const o = {
5      type: "",
6      frequency: {
7        setValueAtTime: (f, t) => console.log("  oscillator", o.type, f, "Hz from t =", t),
8        exponentialRampToValueAtTime: (f, t) => console.log("  slides to", f, "Hz at t =", t.toFixed(2)),
9      },
10      connect: (n) => n,
11      start() {},
12      stop: (t) => console.log("  stops at t =", t.toFixed(2)),
13    };
14    return o;
15  },
16  createGain() {
17    return { gain: { setValueAtTime() {}, exponentialRampToValueAtTime() {} }, connect: (n) => n };
18  },
19};
20const master = {};
21
22// note() de core/audio.js
23function note(freq, t, dur, type = "square", vol = 0.15, slideTo = null, bus = master) {
24  const osc = ctx.createOscillator();
25  const g = ctx.createGain();
26  osc.type = type;
27  osc.frequency.setValueAtTime(freq, t);
28  if (slideTo) osc.frequency.exponentialRampToValueAtTime(slideTo, t + dur);
29  g.gain.setValueAtTime(0.0001, t);
30  g.gain.exponentialRampToValueAtTime(vol, t + 0.005);
31  g.gain.setValueAtTime(vol, t + dur * 0.6);
32  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
33  osc.connect(g).connect(bus);
34  osc.start(t); osc.stop(t + dur + 0.02);
35}
36
37console.log("eat (eating fruit):");
38note(660, 0, 0.06, "square", 0.2);
39note(990, 0.06, 0.08, "square", 0.2);
40console.log("die (crashing):");
41note(400, 0, 0.5, "square", 0.25, 50);

// A fake AudioContext: instead of playing, it writes down what it would do
const ctx = {
  createOscillator() {
    const o = {
      type: "",
      frequency: {
        setValueAtTime: (f, t) => console.log("  oscillator", o.type, f, "Hz from t =", t),
        exponentialRampToValueAtTime: (f, t) => console.log("  slides to", f, "Hz at t =", t.toFixed(2)),
      },
      connect: (n) => n,
      start() {},
      stop: (t) => console.log("  stops at t =", t.toFixed(2)),
    };
    return o;
  },
  createGain() {
    return { gain: { setValueAtTime() {}, exponentialRampToValueAtTime() {} }, connect: (n) => n };
  },
};
const master = {};

// note() de core/audio.js
function note(freq, t, dur, type = "square", vol = 0.15, slideTo = null, bus = master) {
  const osc = ctx.createOscillator();
  const g = ctx.createGain();
  osc.type = type;
  osc.frequency.setValueAtTime(freq, t);
  if (slideTo) osc.frequency.exponentialRampToValueAtTime(slideTo, t + dur);
  g.gain.setValueAtTime(0.0001, t);
  g.gain.exponentialRampToValueAtTime(vol, t + 0.005);
  g.gain.setValueAtTime(vol, t + dur * 0.6);
  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
  osc.connect(g).connect(bus);
  osc.start(t); osc.stop(t + dur + 0.02);
}

console.log("eat (eating fruit):");
note(660, 0, 0.06, "square", 0.2);
note(990, 0.06, 0.08, "square", 0.2);
console.log("die (crashing):");
note(400, 0, 0.5, "square", 0.25, 50);

$ node leccion.js

Press RUN (or Ctrl+Enter).

What to look at

Eating is two square notes in a row, 660 and 990 Hz: a fifth upward, it sounds like "yes!".
Crashing is one note that slides from 400 down to 50 Hz in half a second: the classic "peeyoo" (in the game it also gets a burst of noise).
Each note stops 20 ms after its end, so the envelope finishes before the cut.

Web Audio API (MDN, Spanish) ↗

The whole lesson on one page

A mixing desk in the browser

An OscillatorNode makes a tone: a square wave (the Atari and NES sound) or a triangle wave (softer, good for bass).
A GainNode controls volume over time.
Everything ends in a master and from there goes to the speakers. Music first goes through its own bus, musicBus, so it can be muted without muting the effects.

Phones have a rule: audio only starts from a user's tap. That's why chip.unlock() is called when you press PLAY, not when the page loads.

There are no speakers here (the code runs in a Worker), so the program uses a fake AudioContext that writes down what would have played, with core/audio.js's note() function as is.

1// A fake AudioContext: instead of playing, it writes down what it would do
2const ctx = {
3  createOscillator() {
4    const o = {
5      type: "",
6      frequency: {
7        setValueAtTime: (f, t) => console.log("  oscillator", o.type, f, "Hz from t =", t),
8        exponentialRampToValueAtTime: (f, t) => console.log("  slides to", f, "Hz at t =", t.toFixed(2)),
9      },
10      connect: (n) => n,
11      start() {},
12      stop: (t) => console.log("  stops at t =", t.toFixed(2)),
13    };
14    return o;
15  },
16  createGain() {
17    return { gain: { setValueAtTime() {}, exponentialRampToValueAtTime() {} }, connect: (n) => n };
18  },
19};
20const master = {};
21
22// note() de core/audio.js
23function note(freq, t, dur, type = "square", vol = 0.15, slideTo = null, bus = master) {
24  const osc = ctx.createOscillator();
25  const g = ctx.createGain();
26  osc.type = type;
27  osc.frequency.setValueAtTime(freq, t);
28  if (slideTo) osc.frequency.exponentialRampToValueAtTime(slideTo, t + dur);
29  g.gain.setValueAtTime(0.0001, t);
30  g.gain.exponentialRampToValueAtTime(vol, t + 0.005);
31  g.gain.setValueAtTime(vol, t + dur * 0.6);
32  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
33  osc.connect(g).connect(bus);
34  osc.start(t); osc.stop(t + dur + 0.02);
35}
36
37console.log("eat (eating fruit):");
38note(660, 0, 0.06, "square", 0.2);
39note(990, 0.06, 0.08, "square", 0.2);
40console.log("die (crashing):");
41note(400, 0, 0.5, "square", 0.25, 50);

Eating is two square notes in a row, 660 and 990 Hz: a fifth upward, it sounds like "yes!".
Crashing is one note that slides from 400 down to 50 Hz in half a second: the classic "peeyoo" (in the game it also gets a burst of noise).
Each note stops 20 ms after its end, so the envelope finishes before the cut.

The envelope: how a note starts and dies

If an oscillator switches on and off abruptly, you hear a "click". So each note gets an envelope on its GainNode: it rises in 5 milliseconds (the attack), holds until 60 % of its length and then falls (the decay).

The ramps are exponential (exponentialRampToValueAtTime) because that's how the ear hears volume: going from 0.2 to 0.1 sounds like as big a drop as 0.02 to 0.01. That's also why they start at 0.0001 rather than zero: an exponential ramp can't leave 0.

The program computes that same curve for a 0.3 s note and draws it with #.

1// note()'s envelope: 5 ms attack, holds until 60 %, falls at the end
2function volumen(t, dur, vol) {
3  const rampa = (v0, v1, t0, t1) => v0 * Math.pow(v1 / v0, (t - t0) / (t1 - t0));
4  if (t < 0.005) return rampa(0.0001, vol, 0, 0.005);
5  if (t < dur * 0.6) return vol;
6  if (t < dur) return rampa(vol, 0.0001, dur * 0.6, dur);
7  return 0;
8}
9
10for (let i = 0; i <= 12; i++) {
11  const t = i * 0.025;
12  const v = volumen(t, 0.3, 0.2);
13  console.log(t.toFixed(3), "s", v.toFixed(4).padStart(7), "#".repeat(Math.round(v * 150)));
14}

Up almost from the first instant: a 5 ms attack feels immediate, but without a click.
Flat until 0.18 s (60 % of 0.3).
Then it falls fast at first and slowly at the end: that's what an exponential ramp looks like.

The game doesn't play sounds: it reports

The Snake class doesn't know audio exists. When it eats, it pushes 'eat' into this.events; when it crashes, 'die'. At the end of each tick, main.js walks that list and plays whatever applies:

for (const e of game.events) chip.sfx(e);

Why the detour? Because the server runs the same class to check scores, and the server has no speakers and no AudioContext. Separating "what happened" from "how it sounds" keeps the simulation clean, and sfx() handles details that aren't the game's business: not repeating the same effect within 40 ms, and staying quiet if you turned effects off.

1// A minimal game that only reports
2class Juego {
3  constructor() { this.tick = 0; this.events = []; }
4  update() {
5    this.events.length = 0;          // emptied every tick, as in snake.js
6    this.tick++;
7    if (this.tick % 3 === 0) this.events.push("eat");
8    if (this.tick === 7) this.events.push("die");
9  }
10}
11
12// What chip.sfx() would do: here it just writes the notes
13const SONIDOS = { eat: [660, 990], die: [400] };
14let efectosOn = true;
15const sfx = (e) => { if (efectosOn) console.log("  ♪", e, SONIDOS[e].join(" → "), "Hz"); };
16
17const game = new Juego();
18for (let i = 1; i <= 7; i++) {
19  game.update();
20  console.log("tick", i, game.events);
21  for (const e of game.events) sfx(e);
22}

The simulation produces a list of words; the browser side turns them into sound. Set efectosOn = false and run again: the game does exactly the same and only the sound goes quiet.

White noise for the drums

An oscillator can't make a cymbal or a snare: those are noise. When audio is unlocked, the chip fills a one-second buffer with random numbers between −1 and 1 (Math.random() * 2 - 1), and each drum hit plays a slice of it through a high-pass filter: cut at 6000 Hz it sounds like a hi-hat (H), at 1500 Hz like a snare (S). The kick (K) is a triangle oscillator falling from 160 to 40 Hz.

Math.random is fine here: the noise only makes sound and doesn't change the game.

1// The chip's noise buffer: one second of random samples between -1 and 1
2const sampleRate = 44100;
3const ruido = new Float32Array(sampleRate);
4for (let i = 0; i < ruido.length; i++) ruido[i] = Math.random() * 2 - 1;
5
6console.log("samples:", ruido.length);
7console.log("the first ones:", Array.from(ruido.slice(0, 5), (v) => v.toFixed(3)).join(" "));
8const media = ruido.reduce((s, v) => s + v, 0) / ruido.length;
9console.log("mean:", media.toFixed(4));
10
11// drum() from core/audio.js, summarized
12const BATERIA = {
13  K: "triangle 160 → 40 Hz, 0.12 s",
14  S: "noise high-passed at 1500 Hz + triangle 200 → 100 Hz",
15  H: "noise high-passed at 6000 Hz, 0.035 s",
16};
17for (const [golpe, como] of Object.entries(BATERIA)) console.log(golpe, "=", como);

44,100 samples: one second at CD quality. The mean comes out near zero because there are as many positives as negatives; it changes on every run, and that's fine.