AudioWorklet vs Legacy ScriptProcessorNode: Why Web Audio Clicks and Pops on Budget CPUs

If you have ever played a retro WebAssembly emulator or browser game on a laptop and heard audio glitching, crackling, or dropping out whenever the screen gets busy, you have experienced an audio buffer underrun.

In the early days of the Web Audio API, custom DSP audio synthesis was handled by ScriptProcessorNode. While simple to use, ScriptProcessorNode runs directly on the browser’s JavaScript main UI thread. Whenever game physics or garbage collection hesitated for even 5 milliseconds, the audio buffer ran dry, producing loud audible clicks.

To eliminate audio pops forever, the W3C introduced AudioWorklet.

1. The Real-Time Audio Constraint

Digital audio operates under strict, unforgiving deadlines:

• At 48,000 samples per second with a typical 128-sample quantum buffer, the audio engine must generate audio data every 2.67 milliseconds.
• If the browser main thread is delayed by even 3ms calculating a physics collision or parsing JSON, the speaker runs out of samples: Click! Pop!

2. The AudioWorklet Revolution

AudioWorklet separates audio processing completely from the main browser thread:

1. It runs inside a dedicated, high-priority real-time audio rendering thread managed directly by the operating system audio server (WASAPI on Windows, CoreAudio on macOS, ALSA/PulseAudio on Linux).
2. It has no access to the DOM or window object, preventing garbage collection stalls.
3. Even if the main browser tab freezes completely at 1 FPS, the AudioWorklet continues outputting crystal-clear 48kHz audio without a single drop.

Modern retro emulators (such as Ruffle and DOSBox-WASM) rely exclusively on AudioWorklets to deliver lag-free vintage FM synthesis.

Related Guides & Documentation

• Category Hub: Browse all guides in Controls, Latency & Audio Fixes
• Related Guide: Understanding Browser Input Buffering: Why Frame Queueing Causes Perceived Controller Lag — How the Chromium compositor frame swapchain queues frames and how to minimize input lag by aligning polling with requestAnimationFrame.
• Related Guide: Enabling Dual-Rumble Haptic Vibration Feedback via the Gamepad HapticActuator API — How modern browsers communicate with controller rumble motors and how to configure browser permissions for force-feedback in HTML5 games.
• Related Guide: Troubleshooting Audio Crackling and Sound Delay in Browser Games — A guide to understanding audio buffer underruns, sample rate mismatches, and latency in web games using the Web Audio API.