// the find
katspaugh/wavesurfer.js
Audio waveform player
wavesurfer.js is a browser audio waveform renderer and player built on Web Audio API and Canvas. It's the go-to choice when you need an interactive waveform — scrubbing, regions, zoom, spectrogram — without rolling your own Web Audio plumbing. v7 is a full TypeScript rewrite from the old class-heavy v6.
The plugin architecture is genuinely clean — Regions, Timeline, Envelope, Record, Spectrogram each live in separate files and register their own event hooks without touching core. Shadow DOM isolation for the renderer means wavesurfer CSS won't bleed into your app and vice versa, which is rare thoughtfulness for a UI widget library. Pre-decoded peaks support is a first-class path, not an afterthought — you can bypass in-browser decoding entirely for large files or streaming. Test coverage is unusually thorough for a UI library: unit tests in Jest plus Cypress visual regression snapshots so rendering regressions get caught.
Large file handling is a real limitation that the FAQ acknowledges but doesn't fully solve — decoding a 2-hour audio file in the browser will exhaust memory on most devices, and the pre-decoded peaks path requires you to run a separate server-side tool (audiowaveform) to generate them. VBR audio produces visible waveform/playback drift that requires CBR re-encoding to fix, which is a nasty surprise in production when users upload their own files. The Shadow DOM styling approach via `::part()` is correct but limited — you can only style elements the library explicitly exposes with `part` attributes, so anything not listed is locked out. The reactive architecture in `src/reactive/` appears to be a half-shipped internal refactor — it has its own tests but isn't clearly documented as a public API, so it's risky to build on it.