Track S
Web Audio, under the hood
Sound as a processing graph on a real-time thread: samples and buffers, source nodes, sample-accurate AudioParam scheduling, gain and mixing, filters and effects, the FFT, and custom DSP with AudioWorklet.
- The audio graph and the real-time render thread
The Web Audio API is not a "play a sound" function — it is a modular signal-processing graph of nodes, wired from sources through effects to your speakers, and evaluated on a dedicated real-time thread that must never miss a deadline. This lesson builds that two-part mental model — the graph and the thread it runs on — which every other concept in the module plugs into.
12 min - Samples, sample rate, and what an AudioBuffer holds
A sound wave is continuous, but every node in the Web Audio graph only ever pushes around plain arrays of numbers — this lesson shows how sampling, sample rate, and bit depth turn a wave into that array, and what an AudioBuffer physically stores.
12 min - Source nodes: oscillators, buffers, and the microphone
Sources are where signal enters the graph at all — this lesson covers synthesizing a waveform with an OscillatorNode, playing recorded samples with an AudioBufferSourceNode, and the one-shot lifecycle that explains why you build a brand-new source node every single time you play a sound.
13 min - AudioParam: sample-accurate scheduling against the audio clock
An AudioParam is not a plain number you assign to — it's a schedulable timeline that the audio thread evaluates sample-by-sample against its own high-precision clock, which is exactly why the previous lesson warned you away from nudging gain.value from a setInterval.
13 min - Gain, mixing, and envelopes
A GainNode does exactly one thing — multiply every incoming sample by a number — and from that single operation fall three distinct uses that look unrelated until you see the mechanism underneath — plain volume control, mixing multiple sources by simple addition, and the amplitude envelopes that give a note its character.
13 min - Filters and effects: biquads, delay, and convolution reverb
Between a source and the speakers sits the part of the graph that actually shapes character — a BiquadFilterNode carving frequency content, a DelayNode with feedback turning a single hit into a decaying series of echoes, and a ConvolverNode stamping a signal with the acoustic fingerprint of a real room.
13 min - Analysis and the FFT: seeing the frequency domain
An AnalyserNode sits in the graph as a silent tap rather than a processor, letting ordinary main-thread JavaScript read the recent signal back out as a waveform or, via the Fast Fourier Transform, as a spectrum — which is the entire mechanism behind every music visualizer you've ever seen.
13 min - AudioWorklet: your own DSP on the audio thread
When the built-in nodes run out of road, AudioWorklet lets you register your own sample-processing class and have the browser call it once per render quantum on the real-time audio thread itself, which is the deliberate payoff of everything this module has said about that thread's deadline.
14 min