v146 · Web APIs · Render Capacity Monitor

Render Capacity Monitor

Start audio playback and watch the AudioRenderCapacity stats update in real time. Add more oscillators to increase audio thread load and observe average/peak CPU load climb. A non-zero underrun ratio means audio frames were dropped — audible as glitches or pops.

Checking AudioRenderCapacity support…

live render capacity stats

averageLoad —
peakLoad —
underrunRatio —

controls

0.5s
0
Log will appear here after starting…

code

const ctx = new AudioContext();

// Start monitoring
ctx.renderCapacity.start({ updateInterval: 0.5 });

ctx.renderCapacity.addEventListener('update', (event) => {
  const avg = event.averageLoad.toFixed(3);
  const peak = event.peakLoad.toFixed(3);
  const underrun = event.underrunRatio.toFixed(3);

  if (event.underrunRatio > 0) {
    console.warn(`Audio underrun! ratio=${underrun} — reduce workload`);
    reduceDSPComplexity();
  }

  updateUI({ avg, peak, underrun });
});

// Add more audio nodes to stress-test
const osc = ctx.createOscillator();
osc.connect(ctx.destination);
osc.start();

// Stop monitoring when done
ctx.renderCapacity.stop();

see also