Learn the Web Audio API by Making Sound
WEB AUDIO // DSP Audio Graph & Frequency
Learn the Web Audio API by making sound: play, shape, time, see and place audio from plain JavaScript, one idea per lesson. Each lesson stands alone and opens with a short recap, so you can start where you need to. It is a growing set of lessons, not a complete reference: this page lists what is published today, and new lessons join it in reading order.
For JavaScript developers who have never touched audio. You know functions, async/await and the DOM; you need no music theory and no signal processing. Use a modern desktop browser, and bring headphones for the spatial lesson.
FROM A NOTE TO A SIGNAL
Decorative score / not the live analyserBuild a signal.
Hear the difference.
One oscillator, one filter, one quiet output. Start with your device volume low. Sound plays only after you press Start; Stop or leaving this tab ends playback.
Silent. Ready when you are.
LIVE / AnalyserNode · pre-output signal
Quiet fixed gain: 0.025. Device volume still determines listening loudness. Reduced motion keeps the trace static.
- Oscillator
- Low-pass
- Analyser
- Gain
- Output
Build your signal chain
The lessons below are listed in reading order. They stand alone, so you can skip ahead, and each one opens with a short recap of the pieces it needs. New lessons are added to this list as they are published.
- Foundations of Web Audio ProgrammingPlay a note from a key press, shape it with gain and a low-pass filter, play a decoded file, and schedule a drum pattern.
- Spatial Audio, Music Systems, and Production Applications with Web Audio APIPlace a sound in 3D with PannerNode, keep exact time with the audio clock, and draw a live spectrum. MIDI is optional.
- Revolutionizing Sound on The WebWrite sound into a buffer by hand, add filters, echo and a room, build a bell with FM, and write an AudioWorklet effect.