Enton Biba LogoEnton Biba

Spectrogram frequency labels

Date: March 2, 2017 JavaScriptSpectrogramWeb AudioWaveSurfer.jsSample
WaveSurfer.js spectrogram plugin with frequency labels

The spectrogram plugin for WaveSurfer.js now supports frequency labels. I've implemented this to the master library and will be available on version 1.3.2.  

How to enable to frequency labels:

Step 1 - create the WaveSurfer object

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#D2EDD4',
  progressColor: '#46B54D'
});

Step 2 - create the Spectrogram plugin inside the wavesurfer 'ready' event

wavesurfer.on('ready', function () {
  var spectrogram = Object.create(WaveSurfer.Spectrogram);
  spectrogram.init({
    wavesurfer: wavesurfer,
    container: "#wave-spectrogram",
    fftSamples: 1024,
    labels: true
  });
});

Step 3 - load some music

wavesurfer.load('http://wavesurfer-js.org/example/media/demo.wav');

See the Pen Spectrogram frequency labels by Enton Biba (@entonbiba) on CodePen.

Download