v146 · Web Audio · Performance · demo

Mixer Stats

A 4-channel tone mixer where each channel is a distinct oscillator. The stats panel reads AudioContext.playbackStats in real time — showing render capacity, average render duration, and glitch count. Add channels to stress-test the audio thread and watch the render load rise.

Chrome 146+ — AudioContext.playbackStats API. In older browsers the stats panel shows "—" for all values; the mixer still plays using the Web Audio API.

Click Start · toggle channels and adjust their volume faders · watch render capacity and load change in the stats panel

Playback Statistics — AudioContext.playbackStats stopped

Render Capacity

—

avg thread load

Avg Render (ms)

—

per quantum

Glitches

—

audio underruns

Render load —

// WebAudio Playback Statistics — Chrome 146
// Read render capacity and glitch count from a running AudioContext

const ctx = new AudioContext();

// ... connect oscillators, samples, etc. ...

// Poll playbackStats for performance telemetry
setInterval(() => {
  const stats = ctx.playbackStats;

  // renderCapacity: 0.0 (idle) → 1.0 (100% load)
  if (stats.renderCapacity > 0.8) {
    console.warn('Audio thread overloaded — reduce complexity');
  }

  console.log('Avg render duration:', stats.averageRenderDuration * 1000, 'ms');
  console.log('Glitch count:', stats.glitchCount);
}, 500);

see also