← Back

Dynamic Audio on the Web

The browser can generate and process audio entirely in code — oscillators, filters, effects, and precise timing, all without plugins.

Audio is built as a chain of connected processing stages. A source (oscillator, noise, microphone) feeds through processing stages (volume, filtering, effects) to your speakers. Every stage can be adjusted in real time, and all timing is controlled by a high-precision clock that stays in sync with the audio hardware.

Sourceoscillator / noise / mic
Volumeamplitude / envelope
Filtertone shaping
Effectsdelay / distortion
Analyservisualisation
Outputspeakers
〰️

Oscillators & Waveforms

The fundamental sound source. Sine, square, sawtooth, and triangle waves — and how their harmonic content shapes the timbre you hear.

Waveforms · Harmonics · Timbre
📈

Envelopes (ADSR)

Shape a sound over time using Attack, Decay, Sustain, and Release. The difference between a pluck, a pad, and a click is almost entirely the envelope.

Amplitude · Shape · Timing
🎛️

Filters

Lowpass, highpass, bandpass, notch. Frequency response curves, resonance, and real-time sweeps.

Frequency · Resonance · Tone
🥁

Noise & Percussion

Synthesise a kick, snare, and hi-hat from scratch using white noise, oscillators, and fast envelopes — no samples.

Noise · Percussion · Synthesis
🎹

Sequencer

A 16-step drum sequencer using lookahead scheduling — scheduling notes slightly ahead of time so the audio hardware never misses a beat.

Rhythm · Lookahead · Timing
🔊

Effects

Delay, distortion, and reverb. How to route signals through effects chains, manage feedback loops, and blend dry/wet signals.

Delay · Distortion · Reverb
📊

Analyser & Visualiser

Tap into the audio signal to build an oscilloscope and a real-time frequency spectrum without modifying what you hear.

FFT · Spectrum · Waveform