v146 · Web APIs · WebAudio

Playback Statistics API for WebAudio

Chrome 146 adds the AudioRenderCapacity API to AudioContext. It reports real-time statistics about the audio render thread — average CPU load, peak load, and the fraction of audio renders that underran (causing audible glitches). This lets apps detect audio dropouts and adapt workload dynamically.

concepts

  1. Render Capacity Monitor

    Play a layered tone and watch live renderCapacity statistics: average load, peak load, and underrun ratio. Add extra oscillators to stress-test the audio thread and observe the load climb.

  2. Latency Stats

    Explores the latency metrics exposed by AudioContext — outputLatency, baseLatency, and getOutputTimestamp() — alongside render capacity, showing the full picture of audio performance available in Chrome 146.

  3. Glitch counter

    Drive a live synth, dial up a main-thread CPU load, and watch glitch events, dropped-audio milliseconds and render capacity on a live time series. Push the load far enough and you can hear the artifacts the API is reporting.

  4. Mixer Stats

    A 4-channel tone mixer (bass, mid, high, air oscillators) with a live stats panel reading AudioContext.playbackStats every 300ms. Toggle channels on/off, adjust volume faders, and watch render capacity, average render duration, and glitch count update in real time.

why it shipped

The Web Audio API has long had no way to detect whether the audio render thread is overloaded. Apps running complex DSP — game engines, music production tools, live effects processors — had to guess or use setTimeout-based heuristics to detect glitching. The AudioRenderCapacity API gives a direct signal: if underrunRatio is non-zero, audio frames are being dropped and audible dropouts will occur. Apps can react by reducing polyphony, lowering worklet complexity, or switching to lower-quality processing.

the API

const ctx = new AudioContext();

// Access renderCapacity on the AudioContext
const capacity = ctx.renderCapacity; // AudioRenderCapacity

// Start receiving stats — updateInterval in seconds (default: 1.0)
capacity.start({ updateInterval: 0.5 });

capacity.addEventListener('update', (event) => {
  // event is AudioRenderCapacityEvent
  console.log('avg load: ', event.averageLoad);   // 0.0–1.0
  console.log('peak load:', event.peakLoad);      // 0.0–1.0
  console.log('underruns:', event.underrunRatio); // 0.0–1.0 (non-zero = audio glitches)
  console.log('timestamp:', event.currentTime);   // AudioContext time
});

// Stop when done
capacity.stop();

references