Web Audio API, Biquad Filter DSP & Synthesizer Studio

The W3C Web Audio API is a high-performance, hardware-accelerated audio processing and synthesis subsystem built into modern web browsers. Processing is structured as a directed acyclic graph (DAG) of modular AudioNode instances connected from sources (OscillatorNode, AudioBufferSourceNode, MediaStreamAudioSourceNode) through intermediate modifiers (GainNode, BiquadFilterNode, DelayNode, ConvolverNode, DynamicsCompressorNode, AnalyserNode) to an audio destination (AudioDestinationNode). The audio graph executes off the main thread inside a real-time, low-latency audio rendering thread in discrete quantums of 128 samples (typically every 2.9 milliseconds at 44.1 kHz or 2.67 ms at 48 kHz). AudioParams allow sample-accurate automation curves scheduled on the AudioContext hardware clock.

A digital biquad filter is a second-order infinite impulse response (IIR) filter whose Z-domain transfer function is H(z) = (b0 + b1*z^-1 + b2*z^-2) / (a0 + a1*z^-1 + a2*z^-2). Robert Bristow-Johnson derived exact closed-form algebraic formulas by applying the Bilinear Transform (with analog frequency pre-warping) to classical analog prototypes (Butterworth, Chebyshev). Given sampling rate Fs, cutoff frequency f0, and quality factor Q, the intermediate variables are w0 = 2*pi*f0/Fs and alpha = sin(w0) / (2*Q). For a Lowpass filter: b0 = (1 - cos(w0))/2, b1 = 1 - cos(w0), b2 = (1 - cos(w0))/2, a0 = 1 + alpha, a1 = -2*cos(w0), a2 = 1 - alpha. Dividing all coefficients by a0 normalizes the difference equation to: y[n] = b0*x[n] + b1*x[n-1] + b2*x[n-2] - a1*y[n-1] - a2*y[n-2], which executes in just 5 multiply-accumulate operations per audio sample.

Web Audio provides three primary AudioParam automation functions: (1) linearRampToValueAtTime(V, T): Linearly changes the parameter value from the previous event to value V at time T. While simple, human hearing perceives loudness logarithmically, making linear amplitude ramps sound unnatural. (2) exponentialRampToValueAtTime(V, T): Exponentially interpolates to value V over time T, perfectly matching the human decibel hearing response. However, exponential ramps cannot target or begin from absolute zero (V must be > 0, e.g. 0.0001), otherwise a division-by-zero math error occurs. (3) setTargetAtTime(target, startTime, timeConstant): Exponentially approaches target value starting at startTime according to V(t) = target + (V0 - target) * exp(-(t - startTime) / timeConstant). After 1 timeConstant it reaches 63.2% of target, and after 5 timeConstants it reaches 99.3%, providing mathematically smooth RC filter decay without discontinuity pops.

An AnalyserNode performs real-time frequency and time-domain analysis without modifying the audio stream passing through it. It maintains an internal circular ring buffer of audio frames. When getFloatFrequencyData() or getByteFrequencyData() is called, the node applies a Blackman window function to the audio window to suppress spectral leakage, computes a Fast Fourier Transform (FFT) using the configured fftSize (typically 32 to 32768 bins, default 2048), and applies exponential temporal smoothing via smoothingTimeConstant (0.0 to 1.0). The resulting frequency bins represent signal power in decibels from 0 Hz to the Nyquist frequency (Fs / 2). Because the analysis runs asynchronously on request, it imposes zero additional latency or buffer overhead on the downstream audio rendering graph.

Legacy ScriptProcessorNode ran custom audio synthesis callbacks directly on the browser main JavaScript thread. Because the main thread also handles DOM rendering, garbage collection (GC), user click events, and style reflows, any JavaScript execution delay exceeding 2.9 ms starved the audio hardware buffer, causing audible clicks, pops, and dropouts (buffer underruns). AudioWorklet completely eliminates this architecture flaw by executing user DSP code inside a dedicated AudioWorkletGlobalScope on the browser real-time audio thread. Custom AudioWorkletProcessor classes receive 128-sample Float32Array channel blocks in their process() method, communicating with the main thread via lock-free MessagePort or SharedArrayBuffer with Atomics.

A DynamicsCompressorNode implements an automatic dynamic range compression curve to prevent digital clipping and balance loudness: (1) Threshold (dB): The input level above which compression begins (-100 dB to 0 dB). (2) Ratio: The ratio of input level increase to output level increase once threshold is exceeded (e.g. 4:1 or 20:1 for limiting). (3) Knee (dB): Smooths the transition around the threshold using a quadratic spline curve to prevent abrupt gain changes. (4) Attack (seconds): The exponential rate at which gain reduction is applied when the signal exceeds threshold (typically 0.003s). (5) Release (seconds): The rate at which gain recovers once signal drops below threshold (typically 0.25s). The compressor continuously computes the gain reduction envelope and exposes it via compressor.reduction.