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.spectrogram.create({
            wavesurfer: wavesurfer,
            container: "#wave-spectrogram",
            labels: true,
            height: 256,
        })
    ]
});

wavesurfer.load('../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 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

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));