wavesurfer.js + Spectrogram

wavesurfer.js Spectrogram Plugin

Adds a simple spectrogram to your wavesurfer.js instances.

Quick Start

var wavesurfer = WaveSurfer.create({
    // your options here
    plugins: [
            wavesurfer: wavesurfer,
            container: "#wave-spectrogram",
            labels: true,
            height: 256,



  • 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 default height of the spectrogram will be a half of this parameter.
  • height - height of the spectrogram view in CSS pixels (fftSamples/2 by default).
  • frequencyMin - Min frequency to scale spectrogram(0 by default).
  • frequencyMax - Max frequency to scale spectrogram(12000 by default). Set this to samplerate/2 to draw whole range of spectrogram.
  • splitChannels - Render with separate spectrograms for the channels of the audio
  • frequenciesDataUrl - URL to load spectral data from.
  • labels - Whether or not to display frequency labels.
  • colorMap - Specifies the colormap to be used when rendering the spectrogram.

Generating a colorMap

The colormap npm can be used to generate a colormap. In this example, the colormap has been saved to a json file and is retrieved by the client before initializing the spectrogram.

const colormap = require('colormap');
const colors = colormap({
    colormap: 'hot',
    nshades: 256,
    format: 'float'
const fs = require('fs');
fs.writeFile('hot-colormap.json', JSON.stringify(colors));                        

Fork me on GitHub