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

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.

An AudioContext turns the stream into a source node (createMediaStreamSource).

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.…