wavesurfer.js + Spectrogram

wavesurfer.js Spectrogram Plugin

Adds a simple spectrogram to your wavesurfer.js instances.

Installation

1. add the Spectrogram plugin script tag
2. create a WaveSurfer instance
3. add a container HTML element for the spectrogram
4. create a Spectrogram instance in the WaveSurfer's "ready" event callback

Download the plugin (5 KB)

Quick Start

var wavesurfer = WaveSurfer.create({
    // your options here
    plugins: [
        WaveSurfer.spectrogram.create{
            wavesurfer: wavesurfer,
            container: "#wave-spectrogram"
        })
    ]
});

wavesurfer.load('example/media/demo.wav');

Options

• wavesurfer - required - a WaveSurfer instance.
• container - required - the element in which to place the spectrogram, or a CSS selector to find it.
• fftSamples - number of FFT samples (512 by default). Number of spectral lines and height of the spectrogram will be a half of this parameter.
• frequenciesDataUrl - URL to load spectral data from.