Dallas skyline illustration

CYC26 / Frontend

What Happens When the Music Starts? The Architecture of Browser Audio

Many developers treat browser audio as a black box: you hit play on an HTML audio tag and hope for the best. However, as web applications move toward complex games, virtual instruments, and real-time communication, the limitations of native playback become a bottleneck. This session deconstructs the evolution of the web audio stack into 3 different levels: - Level 1 - The HTML5 Audio Tag, exploring the trade-offs of high-level abstractions that offer zero signal access. - Level 2 - The Web Audio API, where we'll treat the browser like a virtual guitar pedalboard. We'll examine how AudioNodes work like modular building blocks for routing signals. We'll also look at why this model often struggles under heavy UI load due the main thread being overwhelmed, resulting in audible pops and clicks. - Level 3 - Audio Worklets & Wasm, the best option for performance with a dedicated processing thread. Audio processing basically boils down to high-speed math, multiplication for gain and accumulation for mixing), which is why low-level memory management via C++ or Rust through WebAssembly is crucial for low-latency digital signal processing (DSP).

Session abstract

What you’ll learn

Many developers treat browser audio as a black box: you hit play on an HTML audio tag and hope for the best. However, as web applications move toward complex games, virtual instruments, and real-time communication, the limitations of native playback become a bottleneck. This session deconstructs the evolution of the web audio stack into 3 different levels: - Level 1 - The HTML5 Audio Tag, exploring the trade-offs of high-level abstractions that offer zero signal access. - Level 2 - The Web Audio API, where we'll treat the browser like a virtual guitar pedalboard. We'll examine how AudioNodes work like modular building blocks for routing signals. We'll also look at why this model often struggles under heavy UI load due the main thread being overwhelmed, resulting in audible pops and clicks. - Level 3 - Audio Worklets & Wasm, the best option for performance with a dedicated processing thread. Audio processing basically boils down to high-speed math, multiplication for gain and accumulation for mixing), which is why low-level memory management via C++ or Rust through WebAssembly is crucial for low-latency digital signal processing (DSP).