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.