How a browser microphone test works (getUserMedia and AnalyserNode)

A mic test page looks simple: you talk and a bar moves. Underneath it is only three browser APIs.

1. navigator.mediaDevices.getUserMedia({ audio: true }) asks the user for permission and returns a MediaStream. This only works on HTTPS, and the user must allow it.
2. An AudioContext turns the stream into a source node (createMediaStreamSource).
3. An AnalyserNode reads the signal. getByteTimeDomainData gives you the waveform, getByteFrequencyData gives you the spectrum. You call it on every animation frame and draw the values on a canvas.

For a level meter, take the root mean square of the time-domain samples. It follows loudness better than the peak does, and it jumps around less.

Two things surprised me while building mine (https://www.prodevicetest.com/mic-test/). First, browsers can apply echo cancellation, noise suppression and auto gain by default, so a test can look better than the raw mic. Turning these off with constraints (echoCancellation: false, and so on) shows what the hardware really does. Second, on mobile the permission prompt appears every time unless the user selects ""remember"", so the page needs to explain what will happen before it asks.

The full set of tests (screen, keyboard, printer and more) is at https://www.prodevicetest.com/."