Web Audio Primer
Everything you need to know about the Web Audio API before building real-time audio tools in the browser. From AudioContext lifecycle to buffer scheduling and analyser nodes.
In this guide
- AudioContext creation and resume rules
- BufferSourceNode scheduling and one-shot semantics
- AnalyserNode for waveform and frequency data
- AudioWorklet for custom DSP at native speed
The AudioContext
Every Web Audio graph starts with an AudioContext. Browsers suspend it until a user gesture — click, tap, or keypress. Always call ctx.resume() inside your gesture handler before routing audio.
Buffer Scheduling
A BufferSourceNode plays once and self-destructs. For gapless playback, schedule the next buffer before the current one ends usingstart(when) with a precise time from ctx.currentTime.
Visualisation
Insert an AnalyserNode into your graph to extract time-domain samples or frequency bins viagetByteTimeDomainData() andgetByteFrequencyData(). Drive a requestAnimationFrame loop for smooth 60fps visualisers.
AudioWorklet
When ScriptProcessorNode won't cut it, reach forAudioWorklet. It runs DSP on a dedicated real-time thread with access to 128-sample frames. Register your processor viactx.audioWorklet.addModule().