wavesurfer.js + Spectrogram

wavesurfer.js Spectrogram Plugin

Adds a simple spectrogram to your wavesurfer.js instances.


  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: wavesurfer,
            container: "#wave-spectrogram",
            labels: true



  • 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.
  • labels - Whether or not to display frequency labels.
Fork me on GitHub