Web Audio Basics
The Audio Graph
Web Audio works by connecting Nodes together. It's like plugging guitar pedals into an amp.
The flow is simple: Source (Sound) → Effect (Modify) → Destination (Speakers).
// 1. Create Context
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// 2. Create Nodes
const oscillator = audioCtx.createOscillator(); // Source
const gainNode = audioCtx.createGain(); // Volume knob
// 3. Connect them
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination); // Speakers
// 4. Play
oscillator.start();Interactive Synthesizer
Click a waveform to play a sound. Adjust volume with the slider.
Oscillators
An OscillatorNode generates a periodic waveform. It's the building block of all synthesized sound.
- Sine: Smooth, pure tone.
- Square: Retro, 8-bit game sound.
- Sawtooth: Harsh, buzzy sound.
- Triangle: Somewhere between Sine and Square.
Before you continue
Direct answer: The Web Audio API creates and connects sound nodes, then routes them to the listener through an audio context.
What you need first
A user action such as a button press, because browsers often block automatic sound.
After this lesson
You can explain the idea, change the supplied example, and choose the next related lesson.
When to use it
Use short generated effects or scheduled clips. Do not create a new audio context every time a sound plays.
Common mistake
Trying to start audio before a user has interacted with the page.
Try it and check it
This lesson includes its runnable example or code experiment above. Change one value, run it again, and confirm the visible result changes before moving on.
Real game connection
Try a sound-focused experiment in the Playground.
Compatibility: Test in a current Chrome, Firefox, Safari, or Edge browser. Canvas and standard input work broadly in current browsers; audio still needs a user action.
Source and update
Reviewed against MDN Web Docs. Updated 2026-07-14. This page does not claim performance results beyond the local example check.