Active noise cancellation: why headphones silence the drone, not the voices

// game.js: a passenger with noise canceling headphones in an airliner cabin. Switch cancellation on, step the
// delay, flip the sign, pick the noise, and watch the three waves in the earcup and the level at the ear.
// The notebook writes the two sound loops, the band powers, and the delay steps into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const FS = DATA.fs, SLOW = DATA.slow, WINDOW = DATA.window_ms / 1000;
const VOICES_GAIN = 10 ** (-DATA.drone_over_voices_db / 20);    // in "both" the voices sit 10 dB under the drone

// ---- the loops: base64 text that stands for 16-bit samples, turned back into numbers
function decode(text) {
  const bytes = Uint8Array.from(atob(text), (ch) => ch.charCodeAt(0));
  return Float32Array.from(new Int16Array(bytes.buffer), (v) => v / 32767);
}
const drone = decode(DATA.loops.drone), voices = decode(DATA.loops.voices);
const loops = {drone, voices, both: drone.map((d, i) => d + VOICES_GAIN * voices[i])};
const rms = Object.fromEntries(Object.entries(loops).map(([k, x]) => [k, Math.sqrt(x.reduce((m, v) => m + v * v, 0) / x.length)]));

// ---- the state: everything that changes, in one object
const DEFAULTS = {cancel: false, delay: DATA.start_delay, sign: 1, noise: "drone", t: 1};
const state = {...DEFAULTS, sound: false, running: true};
const tau = (s) => DATA.delays_us[s.delay] * 1e-6;             // seconds

// The level at the ear relative to no cancellation, from the notebook's band powers: each band's power is
// multiplied by |1 − s e^(−iθ)|² = 2 − 2s cos θ with θ = 2π f τ, and the powers add.
function levelDb(s) {
  if (!s.cancel) return 0;
  const {f, p} = DATA.bands[s.noise];
  let before = 0, after = 0;
  f.forEach((fk, k) => {
    before += p[k];
    after += p[k] * (2 - 2 * s.sign * Math.cos(2 * Math.PI * fk * tau(s)));
  });
  return 10 * Math.log10(after / before);                       // −Infinity when nothing is left
}

// the loop's value at time t in seconds, on a straight line between samples; the loop repeats
function sample(x, t) {
  const u = ((t * FS) % x.length + x.length) % x.length, i = Math.floor(u), w = u - i;
  return (1 - w) * x[i] + w * x[(i + 1) % x.length];
}

// ---- sound through the Web Audio API, allowed only after a tap
let audio = null, master, delay, antiGain;
const noiseGains = {};
function wakeAudio() {
  if (audio) return;
  audio = new (window.AudioContext || window.webkitAudioContext)();
  master = audio.createGain();
  const noise = audio.createGain();
  delay = audio.createDelay(0.01);
  antiGain = audio.createGain();
  noise.connect(master);                                        // the noise, straight to the ear
  noise.connect(delay).connect(antiGain).connect(master);       // the anti-noise: late, and inverted
  master.connect(audio.destination);                            // the output adds the two
  const start = audio.currentTime + 0.05;                       // both loops together, so "both" stays in step
  for (const name of ["drone", "voices"]) {
    const buffer = audio.createBuffer(1, loops[name].length, FS);
    buffer.getChannelData(0).set(loops[name]);
    const src = audio.createBufferSource();
    noiseGains[name] = audio.createGain();
    src.buffer = buffer;
    src.loop = true;
    src.connect(noiseGains[name]).connect(noise);
    src.start(start);
  }
  state.sound = true;
  updateAudio();
}
function updateAudio() {
  if (!audio) return;
  const now = audio.currentTime, glide = 0.01;                  // short glides, so that a switch does not click
  noiseGains.drone.gain.setTargetAtTime(state.noise === "voices" ? 0 : 1, now, glide);
  noiseGains.voices.gain.setTargetAtTime({drone: 0, voices: 1, both: VOICES_GAIN}[state.noise], now, glide);
  delay.delayTime.setTargetAtTime(tau(state), now, glide);
  antiGain.gain.setTargetAtTime(state.cancel ? -state.sign : 0, now, glide);
  master.gain.setTargetAtTime(state.sound && state.running ? DATA.master_gain : 0, now, glide);
}

// ---- drawing
const $ = (id) => document.getElementById(id);
const canvas = $("scene");
let dpr = 1;

function layout() {
  dpr = window.devicePixelRatio || 1;
  const box = canvas.getBoundingClientRect();
  canvas.width = Math.round(box.width * dpr);
  canvas.height = Math.round(box.height * dpr);
  render();
}

function colors() {
  const css = getComputedStyle(document.documentElement);
  return Object.fromEntries(["bg", "fg", "ink", "accent", "second", "muted", "pale"].map((k) => [k, css.getPropertyValue(`--${k}`).trim()]));
}

// Arcs that spread from a source and fade: sound on its way. `age` is real time in seconds.
function ripples(ctx, x, y, from, to, age, start, end) {
  for (let k = 0; k < 3; k++) {
    const q = (age * 0.8 + k / 3) % 1;
    ctx.globalAlpha = 0.6 * (1 - q);
    ctx.beginPath(); ctx.arc(x, y, from + q * (to - from), start, end); ctx.stroke();
  }
  ctx.globalAlpha = 1;
}

// The cabin seen from the aisle, in units of its height: the window with wing and engine, the passenger
// with headphones, the row ahead. Returns where the passenger's earcup is on the canvas.
function drawCabin(ctx, c, box) {
  const u = Math.min(box.w / 1.6, box.h), x0 = box.x + (box.w - 1.6 * u) / 2, y0 = box.y + (box.h - u) / 2;
  const X = (x) => x0 + x * u, Y = (y) => y0 + y * u, age = state.t * SLOW;
  const drone = state.noise !== "voices", talk = state.noise !== "drone";
  ctx.lineWidth = Math.max(1.5, u / 140);
  ctx.strokeStyle = c.muted;
  ctx.beginPath(); ctx.moveTo(X(0.02), Y(0.12)); ctx.quadraticCurveTo(X(0.8), Y(0.02), X(1.58), Y(0.12)); ctx.stroke();  // bins
  ctx.beginPath(); ctx.moveTo(X(0.02), Y(0.94)); ctx.lineTo(X(1.58), Y(0.94)); ctx.stroke();                               // floor
  ctx.beginPath(); ctx.roundRect(X(0.1), Y(0.2), 0.36 * u, 0.3 * u, 0.09 * u); ctx.stroke();                              // window
  ctx.save(); ctx.clip();
  ctx.strokeStyle = c.ink; ctx.fillStyle = c.pale;
  ctx.beginPath(); ctx.moveTo(X(0.08), Y(0.36)); ctx.lineTo(X(0.48), Y(0.3)); ctx.stroke();                                // wing
  ctx.beginPath(); ctx.ellipse(X(0.27), Y(0.4), 0.1 * u, 0.045 * u, -0.1, 0, 2 * Math.PI); ctx.fill(); ctx.stroke();      // engine
  ctx.restore();
  ctx.strokeStyle = c.muted;
  if (drone) ripples(ctx, X(0.37), Y(0.4), 0.06 * u, 0.3 * u, age, -0.7, 0.7);
  for (const [sx, h] of [[0.52, 0.0], [1.0, 0.0]]) {                                                                       // seat backs
    ctx.beginPath(); ctx.roundRect(X(sx), Y(0.42 + h), 0.07 * u, 0.42 * u, 0.03 * u); ctx.stroke();
  }
  const person = (hx, hy, r, color) => {                       // head, back, thighs, shins, facing right
    ctx.strokeStyle = color; ctx.fillStyle = color;
    ctx.beginPath(); ctx.arc(X(hx), Y(hy), r * u, 0, 2 * Math.PI); ctx.fill();
    ctx.beginPath(); ctx.moveTo(X(hx - 0.02), Y(hy + r + 0.02)); ctx.lineTo(X(hx - 0.03), Y(0.74));
    ctx.lineTo(X(hx + 0.15), Y(0.74)); ctx.lineTo(X(hx + 0.17), Y(0.92)); ctx.stroke();
  };
  person(0.64, 0.4, 0.065, c.ink);
  person(1.12, 0.4, 0.06, c.ink);
  person(1.25, 0.43, 0.055, c.muted);                          // the farther head in the row ahead
  ctx.strokeStyle = c.ink; ctx.lineWidth = Math.max(2, u / 90);
  ctx.beginPath(); ctx.arc(X(0.64), Y(0.4), 0.085 * u, Math.PI * 1.05, Math.PI * 1.95); ctx.stroke();                      // headband
  ctx.fillStyle = c.ink; ctx.strokeStyle = c.bg;                // a rim in the background color sets it off the head
  ctx.beginPath(); ctx.roundRect(X(0.6), Y(0.36), 0.05 * u, 0.09 * u, 0.02 * u); ctx.fill(); ctx.stroke();                 // earcup
  ctx.lineWidth = Math.max(1.5, u / 140); ctx.strokeStyle = c.muted;
  if (talk) ripples(ctx, X(1.06), Y(0.4), 0.05 * u, 0.3 * u, age * 1.3, Math.PI - 0.6, Math.PI + 0.6);
  return {x: X(0.625), y: Y(0.405)};
}

// The earcup, enlarged: noise, anti-noise, and their sum at the ear, WINDOW seconds around the display time.
function drawEarcup(ctx, c, box, ear) {
  const x = loops[state.noise], d = tau(state), g = state.cancel ? state.sign : 0;
  const ylim = DATA.ylim_rms * rms[state.noise];
  const r = Math.min(28, box.h / 6);
  ctx.strokeStyle = c.muted; ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(ear.x, ear.y);                   // to the top edge below, or to the top left corner beside
  if (ear.y < box.y) ctx.lineTo(Math.min(Math.max(ear.x, box.x + r), box.x + box.w - r), box.y);
  else ctx.lineTo(box.x + 0.3 * r, box.y + 0.3 * r);
  ctx.stroke();
  ctx.fillStyle = c.bg;
  ctx.beginPath(); ctx.roundRect(box.x, box.y, box.w, box.h, r); ctx.fill(); ctx.stroke();
  const pad = 10, font = Math.max(14, Math.min(17, box.h / 14)), line = 1.25 * font;
  const left = box.x + pad, width = box.w - 2 * pad, top = box.y + pad, row = (box.h - 2 * pad - font) / 3;
  const height = row - line;                                   // each strip: its label on a line of its own, then the wave
  const strips = [
    ["noise", c.ink, (t) => sample(x, t)],
    [state.cancel ? "anti-noise" : "anti-noise off", c.second, (t) => -g * sample(x, t - d)],
    ["at the ear", c.accent, (t) => sample(x, t) - g * sample(x, t - d)],
  ];
  ctx.font = `${font}px system-ui, sans-serif`; ctx.textBaseline = "top"; ctx.textAlign = "left";
  strips.forEach(([label, color, wave], k) => {
    const y0 = top + k * row + line, mid = y0 + height / 2, n = Math.max(2, Math.round(width));
    ctx.strokeStyle = c.muted; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(left, mid); ctx.lineTo(left + width, mid); ctx.stroke();                                   // zero
    ctx.save(); ctx.beginPath(); ctx.rect(left, y0, width, height); ctx.clip();
    ctx.strokeStyle = color; ctx.lineWidth = 2;
    ctx.beginPath();
    for (let i = 0; i <= n; i++) {
      const t = state.t - WINDOW / 2 + WINDOW * i / n;
      const y = mid - wave(t) / ylim * height / 2;
      if (i) ctx.lineTo(left + i * width / n, y); else ctx.moveTo(left, y);
    }
    ctx.stroke(); ctx.restore();
    ctx.fillStyle = color;
    ctx.fillText(label, left, top + k * row);
  });
  ctx.fillStyle = c.muted; ctx.textAlign = "right"; ctx.textBaseline = "bottom";
  ctx.fillText(`${DATA.window_ms} ms, slowed ${SLOW}×`, box.x + box.w - pad, box.y + box.h - 4);
}

function drawScene(c) {
  const ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  const W = canvas.width / dpr, H = canvas.height / dpr;
  ctx.fillStyle = c.bg;
  ctx.fillRect(0, 0, W, H);
  const wide = W > 1.3 * H;                                    // side by side, or the cabin above the earcup
  const cabin = wide ? {x: 0, y: 0, w: 0.54 * W, h: H} : {x: 0, y: 0, w: W, h: 0.36 * H};
  const cup = wide ? {x: 0.56 * W, y: 0.06 * H, w: 0.44 * W - 2, h: 0.88 * H} : {x: 2, y: 0.39 * H, w: W - 4, h: 0.61 * H - 2};
  const ear = drawCabin(ctx, c, cabin);
  drawEarcup(ctx, c, cup, ear);
}

const minus = (v) => String(v).replace("-", "−");
function render() {
  drawScene(colors());
  const L = levelDb(state);
  $("level").textContent = !state.cancel ? "at the ear 0 dB" : L === -Infinity ? "at the ear silent"
    : `at the ear ${L > 0 ? "+" : ""}${minus(L.toFixed(0))} dB`;
  $("delay-val").textContent = `${DATA.delays_us[state.delay]} µs`;
  $("cancel").textContent = state.cancel ? "Cancel on" : "Cancel off";
  $("cancel").setAttribute("aria-pressed", state.cancel);
  $("normal").setAttribute("aria-pressed", state.sign === 1);
  $("flipped").setAttribute("aria-pressed", state.sign === -1);
  for (const name of ["drone", "voices", "both"]) $(name).setAttribute("aria-pressed", state.noise === name);
  $("shorter").disabled = state.delay === 0;
  $("longer").disabled = state.delay === DATA.delays_us.length - 1;
  $("play").textContent = state.running ? "Pause" : "Play";
  $("sound").textContent = !audio ? "Tap for sound" : state.sound ? "Sound on" : "Sound off";
}

// ---- controls, keys, and the frame
function set(partial) {
  Object.assign(state, partial);
  updateAudio();
  render();
}
const step = (k) => set({delay: Math.min(DATA.delays_us.length - 1, Math.max(0, state.delay + k))});
const actions = {
  cancel: () => set({cancel: !state.cancel}), normal: () => set({sign: 1}), flipped: () => set({sign: -1}),
  shorter: () => step(-1), longer: () => step(1), drone: () => set({noise: "drone"}), voices: () => set({noise: "voices"}),
  both: () => set({noise: "both"}), play: () => set({running: !state.running}), reset: () => set({...DEFAULTS}),
  sound: () => { if (audio) set({sound: !state.sound}); else { wakeAudio(); render(); } },
};
for (const [id, act] of Object.entries(actions)) $(id).addEventListener("click", act);
document.addEventListener("pointerdown", (e) => { if (e.target !== $("sound")) wakeAudio(); });
const keys = {c: "cancel", f: () => set({sign: -state.sign}), "[": "shorter", "]": "longer", 1: "drone", 2: "voices",
  3: "both", " ": "play", r: "reset", s: "sound"};
document.addEventListener("keydown", (e) => {
  const key = keys[e.key.toLowerCase()];
  if (!key || (e.target instanceof HTMLButtonElement && e.key === " ")) return;
  e.preventDefault();
  if (key !== "sound") wakeAudio();                            // a key press counts as a tap, except the Sound key
  (typeof key === "string" ? actions[key] : key)();
});

let last = null;
function frame(now) {                                          // called by the browser once per screen refresh
  const elapsed = last === null ? 0 : Math.min((now - last) / 1000, 0.05);   // capped: a background tab does not jump
  last = now;
  if (state.running) state.t += elapsed / SLOW;                // the display runs SLOW times slower than the sound
  render();
  requestAnimationFrame(frame);
}

window.addEventListener("resize", layout);
layout();
requestAnimationFrame(frame);
window.game = {state, set, render};