Real-time Audio Processing in the Browser: Web Audio API & AudioWorklet

Audio processing on the web has come a long way since the early days of basic HTML5 <audio> tags. Today, developers build complex synthesizers, interactive spatial gaming soundscapes, browser-native DAW systems, and live microphone transcriptions directly in a browser window.

However, executing real-time Digital Signal Processing (DSP)—where sound buffers are read, manipulated, and written 48,000 times per second—presents a major engineering challenge.

Historically, using Web Audio's legacy ScriptProcessorNode resulted in audio crackling and dropped frames because audio processing ran on the browser's shared main execution thread.

With AudioWorklet, modern web runtimes solve this completely. By executing your custom DSP algorithms in a dedicated, low-latency background audio thread, AudioWorklet lets you achieve professional, glitch-free audio performance.

In this guide, we'll implement a custom, real-time gain-modulating white-noise synthesizer using the Web Audio API and a background AudioWorkletProcessor.

⚡ 1. The Legacies and the Audio Thread Architecture

Web Audio operates over a Node Routing Graph model. You construct an AudioContext, instantiate various generator or modifier nodes (like oscillators or gain filters), and route them sequentially to the final speaker destination:

[ OscillatorNode ] ──> [ BiquadFilterNode ] ──> [ GainNode ] ──> [ Audio Destination ]
                                                                 (Physical Speakers)

To run custom audio calculations, we legacy-coded a ScriptProcessorNode. This node fired events back to the main JavaScript thread on every audio buffer window (e.g., every 1024 samples). If the main thread was busy rendering a DOM element, your audio handler missed its buffer deadline, causing an immediate, highly noticeable audio pop or crackle.

AudioWorklet fixes this by decoupling the audio graph from the main thread entirely. When you register an AudioWorklet:

1. 2.
   The browser spins up a dedicated, real-time priority OS thread (AudioWorkletGlobalScope).
2. 4.
   Your custom processor runs inside this background thread, isolated completely from any main-thread garbage collection or DOM layout shifts.
3. 6.
   The main thread and audio thread exchange control events and parameters using lightweight MessagePort communication.

🏗️ 2. The Custom Audio Processor: white-noise-processor.js

An AudioWorklet is split into two files:

1. 2.
   The Processor (Runs in the background audio thread, handling raw audio sample buffers).
2. 4.
   The Node (Runs on the main React/JS thread, presenting a standard Web Audio Node interface).

Let's write our custom background processor. Create a file named white-noise-processor.js:

javascript
// Run in the dedicated AudioWorkletGlobalScope thread
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  
  // Define custom parameters that can be modulated dynamically
  static get parameterDescriptors() {
    return [{
      name: 'amplitude',
      defaultValue: 0.1,
      minValue: 0.0,
      maxValue: 1.0
    }];
  }

  constructor() {
    super();
  }

  // The process loop: called dynamically on every 128-sample buffer block
  process(inputs, outputs, parameters) {
    const output = outputs[0]; // Get first output destination channel
    const amplitudeValues = parameters.amplitude;

    // Loop through all output channels (e.g., Left and Right stereo)
    for (let channel = 0; channel < output.length; ++channel) {
      const outputBuffer = output[channel];
      
      // Populate the 128 samples with random white noise
      for (let i = 0; i < outputBuffer.length; ++i) {
        // Read current amplitude parameter value (can be a constant or a dynamic array)
        const amp = amplitudeValues.length > 1 ? amplitudeValues[i] : amplitudeValues[0];
        
        // Generate random sample between -1.0 and 1.0, scaled by amplitude
        outputBuffer[i] = (Math.random() * 2 - 1) * amp;
      }
    }

    // Keep the processor alive recursively
    return true;
  }
}

registerProcessor('white-noise-processor', WhiteNoiseProcessor);

🛠️ 3. Spawning the Node on the Main Thread

Now, let's load our processor module into the main thread and route its synthesized output to our speakers:

typescript
async function startSynthesizer() {
  // 1. Initialize our audio graph context
  const audioCtx = new AudioContext();

  console.log("Loading background AudioWorklet module...");
  
  // 2. Load the external processor code into the audio context thread
  await audioCtx.audioWorklet.addModule("white-noise-processor.js");

  // 3. Instantiate our custom AudioWorkletNode
  const noiseNode = new AudioWorkletNode(audioCtx, "white-noise-processor");

  // 4. Retrieve and modulate parameters dynamically
  const amplitudeParam = noiseNode.parameters.get("amplitude");
  
  // Ramp the volume up and down smoothly over time
  const now = audioCtx.currentTime;
  amplitudeParam.setValueAtTime(0.0, now);
  amplitudeParam.linearRampToValueAtTime(0.3, now + 2.0); // Ramp up to 30% volume over 2 seconds
  amplitudeParam.linearRampToValueAtTime(0.0, now + 4.0); // Ramp back down to 0% over next 2 seconds

  // 5. Connect noise node to speakers
  noiseNode.connect(audioCtx.destination);
  
  console.log("Synthesizer active! White noise audio is playing.");
}

🚀 4. Going Multithreaded: AudioWorklet + WebAssembly

For heavy DSP operations—like real-time vocal autotuning, custom reverb convolvers, or virtual instrument synthesizers—JavaScript can still encounter CPU limitations.

To squeeze out maximum efficiency, compile your heavy mathematical code to WebAssembly (Wasm).

Load the Wasm module inside your main script, transfer its compiled memory buffers to the background AudioWorklet thread via the MessagePort, and execute your DSP calculations inside the AudioWorklet's process() loop at C++ speeds in pure, low-level binary.

🏁 5. Conclusion: decibels and Latencies

AudioWorklet represents a massive leap forward for professional browser-native audio engineering. By moving intensive DSP rendering off the main thread into dedicated real-time audio threads, the web ecosystem finally gains access to glitch-free, low-latency, and high-performance audio synthesis that rivals desktop native applications.