Web Audio

const ctx = new AudioContext({ latencyHint: "interactive" });
ctx.state; // "suspended" until the user interacts
 
document.querySelector("#play")!.addEventListener(
  "click",
  async () => {
    if (ctx.state !== "running") await ctx.resume();
  },
);
ctx.addEventListener("statechange", () => {
  document.body.dataset.audio = ctx.state;
});

  Oscillator ──┐                        ┌──▶ Analyzer (tap)
               ├──▶ BiquadFilter ──▶ Gain ──▶ destination
BufferSource ──┘         ▲
                         │ frequency (AudioParam)
        LFO Oscillator ──▶ Gain (depth)

const osc = new OscillatorNode(ctx, { frequency: 220 });
const filter = new BiquadFilterNode(ctx, {
  type: "lowpass", frequency: 800, Q: 4,
});
const amp = new GainNode(ctx, { gain: 0.3 });
osc.connect(filter).connect(amp).connect(ctx.destination);
 
// LFO modulates the cutoff by +/-400 Hz
const lfo = new OscillatorNode(ctx, { frequency: 2 });
const depth = new GainNode(ctx, { gain: 400 });
lfo.connect(depth).connect(filter.frequency);
osc.start(); lfo.start();

const g = amp.gain;
const now = ctx.currentTime;
g.cancelScheduledValues(now);
g.setValueAtTime(g.value, now);        // anchor the ramp
g.linearRampToValueAtTime(1, now + 0.01);
g.setTargetAtTime(0.6, now + 0.01, 0.1); // decay

// Lookahead scheduler: timers only decide *what* to queue
const LOOKAHEAD = 0.1; // seconds queued ahead
let next = ctx.currentTime;
const bpm = 120;
 
setInterval(() => {
  while (next < ctx.currentTime + LOOKAHEAD) {
    tick(next);                 // start(next) inside
    next += 60 / bpm;
  }
}, 25);
declare function tick(when: number): void;

async function loadBuffer(
  url: string,
): Promise<AudioBuffer> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}: ${url}`);
  return ctx.decodeAudioData(await res.arrayBuffer());
}
 
const kick = await loadBuffer("/sounds/kick.mp3");
kick.duration;          // seconds
kick.numberOfChannels;  // 1 or 2
kick.getChannelData(0); // Float32Array of -1..1 samples

const el = document.querySelector("audio")!;
el.crossOrigin = "anonymous"; // before src, for CDN audio
const track = ctx.createMediaElementSource(el);
track.connect(new GainNode(ctx, { gain: 0.8 }))
  .connect(ctx.destination);
 
// Mic in, recorded mix out
const mic = await navigator.mediaDevices.getUserMedia({
  audio: true,
});
const micNode = ctx.createMediaStreamSource(mic);
const out = ctx.createMediaStreamDestination();
micNode.connect(out);
const rec = new MediaRecorder(out.stream);

const pan = new StereoPannerNode(ctx, { pan: -0.5 });
 
const panner = new PannerNode(ctx, {
  panningModel: "HRTF",       // or "equalpower" (cheaper)
  distanceModel: "inverse",   // "linear" | "exponential"
  refDistance: 1,
  rolloffFactor: 1,
  positionX: 3, positionY: 0, positionZ: -2,
});
source.connect(panner).connect(ctx.destination);
panner.positionX.linearRampToValueAtTime(
  -3, ctx.currentTime + 2,
); // fly past
declare const source: AudioNode;

declare const track: AudioNode;
const analyzer = new AnalyserNode(ctx, {
  fftSize: 2048,              // power of 2, 32..32768
  smoothingTimeConstant: 0.8,
});
track.connect(analyzer); // pass-through tap
 
const freq = new Uint8Array(analyzer.frequencyBinCount);
const wave = new Float32Array(analyzer.fftSize);
analyzer.getByteFrequencyData(freq);  // 0..255 per bin
analyzer.getFloatTimeDomainData(wave); // -1..1 samples
const hzPerBin = ctx.sampleRate / analyzer.fftSize;

// tsconfig for this file: "types": ["audioworklet"]
class Noise extends AudioWorkletProcessor {
  static parameterDescriptors = [
    { name: "gain", defaultValue: 0.1, minValue: 0 },
  ];
  process(
    _in: Float32Array[][],
    out: Float32Array[][],
    params: Record<string, Float32Array>,
  ): boolean {
    const gain = params.gain!;
    for (const ch of out[0]!) {
      for (let i = 0; i < ch.length; i++) {
        const g = gain.length > 1 ? gain[i]! : gain[0]!;
        ch[i] = (Math.random() * 2 - 1) * g;
      }
    }
    return true; // keep alive
  }
}
registerProcessor("noise", Noise);

await ctx.audioWorklet.addModule("/worklets/noise.js");
const noise = new AudioWorkletNode(ctx, "noise", {
  parameterData: { gain: 0.05 },
});
noise.connect(ctx.destination);
noise.parameters.get("gain")
  ?.linearRampToValueAtTime(0, ctx.currentTime + 2);
noise.port.postMessage({ type: "reset" });

const off = new OfflineAudioContext({
  numberOfChannels: 2,
  length: 44_100 * 3, // frames = seconds * rate
  sampleRate: 44_100,
});
const o = new OscillatorNode(off, { frequency: 440 });
o.connect(off.destination);
o.start(0); o.stop(3);
const rendered: AudioBuffer = await off.startRendering();

const ctx = new AudioContext();
 
export async function beep(
  freq = 880, ms = 120, volume = 0.2,
): Promise<void> {
  if (ctx.state !== "running") await ctx.resume();
  const t = ctx.currentTime;
  const end = t + ms / 1000;
  const osc = new OscillatorNode(ctx, { frequency: freq });
  const amp = new GainNode(ctx, { gain: 0 });
  amp.gain
    .setValueAtTime(0, t)
    .linearRampToValueAtTime(volume, t + 0.005)
    .exponentialRampToValueAtTime(0.0001, end);
  osc.connect(amp).connect(ctx.destination);
  osc.start(t);
  osc.stop(end + 0.01);
  osc.onended = () => amp.disconnect();
}

const cache = new Map<string, Promise<AudioBuffer>>();
 
function load(url: string): Promise<AudioBuffer> {
  let p = cache.get(url);
  if (!p) {
    p = fetch(url)
      .then((r) => r.arrayBuffer())
      .then((b) => ctx.decodeAudioData(b));
    cache.set(url, p);
  }
  return p;
}
 
export async function play(
  url: string,
  { volume = 1, rate = 1, when = 0 } = {},
): Promise<AudioBufferSourceNode> {
  const buffer = await load(url);
  const src = new AudioBufferSourceNode(ctx, {
    buffer, playbackRate: rate,
  });
  src.connect(new GainNode(ctx, { gain: volume }))
    .connect(ctx.destination);
  src.start(when);
  return src;
}

type Adsr = { a: number; d: number; s: number; r: number };
 
export function noteOn(
  p: AudioParam, t: number, peak: number, e: Adsr,
): void {
  p.cancelScheduledValues(t);
  p.setValueAtTime(p.value, t);
  p.linearRampToValueAtTime(peak, t + e.a);
  p.setTargetAtTime(peak * e.s, t + e.a, e.d / 3);
}
 
export function noteOff(
  p: AudioParam, t: number, e: Adsr,
): number {
  p.cancelScheduledValues(t);
  p.setValueAtTime(p.value, t);
  p.setTargetAtTime(0, t, e.r / 3);
  return t + e.r; // stop the source after this
}

export function visualize(
  input: AudioNode, canvas: HTMLCanvasElement,
): () => void {
  const g = canvas.getContext("2d")!;
  const an = new AnalyserNode(input.context, {
    fftSize: 256,
  });
  input.connect(an);
  const bins = new Uint8Array(an.frequencyBinCount);
  let raf = 0;
  const draw = () => {
    raf = requestAnimationFrame(draw);
    an.getByteFrequencyData(bins);
    const { width: w, height: h } = canvas;
    g.clearRect(0, 0, w, h);
    const bw = w / bins.length;
    bins.forEach((v, i) => {
      const bh = (v / 255) * h;
      g.fillRect(i * bw, h - bh, bw - 1, bh);
    });
  };
  draw();
  return () => {
    cancelAnimationFrame(raf);
    an.disconnect();
  };
}

const bus = new BiquadFilterNode(ctx, {
  type: "lowpass", frequency: 2000,
});
bus.connect(ctx.destination);
const env = { a: 0.01, d: 0.2, s: 0.6, r: 0.3 };
const voices = new Map<number, [OscillatorNode, GainNode]>();
const hz = (midi: number) => 440 * 2 ** ((midi - 69) / 12);
 
export function press(midi: number): void {
  if (voices.has(midi)) return;
  const osc = new OscillatorNode(ctx, {
    type: "sawtooth", frequency: hz(midi),
  });
  const amp = new GainNode(ctx, { gain: 0 });
  osc.connect(amp).connect(bus);
  noteOn(amp.gain, ctx.currentTime, 0.2, env);
  osc.start();
  voices.set(midi, [osc, amp]);
}
 
export function release(midi: number): void {
  const v = voices.get(midi);
  if (!v) return;
  voices.delete(midi);
  v[0].stop(noteOff(v[1].gain, ctx.currentTime, env));
}