# 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 = Object.create(WaveSurfer);

    wavesurfer.init({
      // your options here
    });

    wavesurfer.on('ready', function () {
        var spectrogram = Object.create(WaveSurfer.Spectrogram);

        spectrogram.init({
            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.

Fork me on GitHub