Spectrogram frequency labels
Date: March 2, 2017![WaveSurfer.js spectrogram plugin with frequency labels WaveSurfer.js spectrogram plugin with frequency labels](https://github.com/entonbiba/wavesurfer-spectrogram-with-frequency-labels/raw/master/wavesurfer-js-spectrogram-with-frequency-labels.png)
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');
Links: WaveSurfer.jsSpectrogram Frequency Labels Sample
See the Pen Spectrogram frequency labels by Enton Biba (@entonbiba) on CodePen.