Reading a live waveform with the Web Audio analyser

The demo player draws its bars from the narration's real frequency data through an AnalyserNode. When the file cannot play, the same bars fall back to a CSS keyframe so the component never looks broken.

Speech energy lives in the lower part of the spectrum, so spreading the raw bins across the bars gives a lopsided picture. The player maps only the lower sixty percent of bins across all bars and lifts the higher ones, which keeps the whole row alive while someone talks.

Autoplay rules and missing files are facts of life, so the component degrades on purpose: if play rejects, it flips to a simulated timeline driven by performance.now and lets the CSS animation move the bars. The transcript still highlights by timestamp either way.

All posts