wavesurfer-tiled-spectrogram

A wavesurfer.js plugin that shows a spectrogram made in advance, from image tiles. Only the tiles near what is on screen are fetched, at the resolution the zoom needs.

wavesurfer.js's own Spectrogram plugin has to download and decode the whole recording, then run an FFT over all of it, before it can draw anything. For a long recording that takes tens of seconds, and for very long or ultrasonic ones the browser may not manage it at all. Tiles made beforehand can be shown at once, whatever the recording's length or sample rate.

Try the demo

It plays the song of a grasshopper, Chorthippus biguttulus, after a spoken introduction, from the Natural History Museum's sound archive on BioAcoustica. Its audio and tiles come from audioBLAST, which can give any other recording it has tiled: try nine minutes of a mole cricket, streamed, or a katydid's ultrasound, recorded at 200 kHz. The demo compares the tiles with the Spectrogram plugin, streams the audio with the waveform's peaks instead of decoding it, zooms from one level of tiles to another, and shows them in other colours.

• Stand-in or standalone: the tiles stand in for the Spectrogram plugin until it has drawn its own, or are the spectrogram on their own, with no audio decoded.
• Zooms out: the spectrogram can be tiled at several resolutions, so a whole recording of hours on screen takes a tile or two.
• Simple format: a manifest and images, made with ffmpeg by tools/make-tiles.sh, or by anything else that writes the same format.
• Small: about 12 KB minified, with no dependencies, for wavesurfer.js 7.10 and 8.

The source, documentation and tile format (SPEC.md) are on GitHub. MIT licence.