Web Audio API Cheat Sheet

The raw Web Audio API — the layer under Tone.js and friends. Create a context, wire nodes into a graph, and schedule parameter changes on the audio clock.

Context

const ctx = new AudioContext()Create the audio context

await ctx.resume()Resume after a user gesture (autoplay policy)

ctx.currentTimeThe audio clock, in seconds — schedule against this

ctx.destinationThe output node (your speakers)

Make a sound

const osc = ctx.createOscillator()Create an oscillator

osc.type = 'sine''sine' | 'square' | 'sawtooth' | 'triangle'

osc.frequency.value = 440Frequency is an AudioParam, so set .value

osc.connect(ctx.destination)Wire it to the output

osc.start(); osc.stop(ctx.currentTime + 1)Start now, stop in one second

Gain & routing

const gain = ctx.createGain()Create a gain (volume) node

gain.gain.value = 0.3The AudioParam is called .gain

osc.connect(gain).connect(ctx.destination)connect() returns the target, so calls chain

node.disconnect()Unwire a node

Parameter automation

p.setValueAtTime(v, t)Jump to a value at time t

p.linearRampToValueAtTime(v, t)Ramp linearly to v by time t

p.exponentialRampToValueAtTime(v, t)Ramp exponentially (never ramp to exactly 0)

g.gain.setValueAtTime(1, ctx.currentTime);
g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5)

A simple decay envelope

Filters & analysis

const f = ctx.createBiquadFilter()Create a filter

f.type = 'lowpass'; f.frequency.value = 800Type plus cutoff

const an = ctx.createAnalyser(); an.fftSize = 2048Create an analyser for visualisation

const data = new Uint8Array(an.frequencyBinCount);
an.getByteFrequencyData(data)

Read the spectrum into a byte array

Playing files

const buf = await ctx.decodeAudioData(arrayBuffer)Decode fetched audio into an AudioBuffer

const src = ctx.createBufferSource()Create a playback source

src.buffer = buf; src.loop = trueAssign the buffer; optionally loop

src.connect(ctx.destination); src.start()Play it (a source can only be started once)

Web Audio API — The browser's native audio engine.

← All cheat sheets