Wavesurfer Spectrogram

, ,
1

Hi,
As this may be useful for annotating audio files, I am trying to integrate the wavesurfer spectrogram on my prodigy recipe.
I had to load the wavesurfer package (as prodigy only gives access to the instance created via window.prodigy) and the spectrogram plugin package into my JS script, with something like this :

var createSpectro = function(){ 
  window.wavesurfer.addPlugin(WaveSurfer.spectrogram.create({
    wavesurfer: window.wavesurfer,                                                            
    container: window.wavesurfer.container,
    labels: true
  })).initPlugin('spectrogram');
}

function loadScript(url, callback){
  var head = document.head;
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  script.onreadystatechange = callback;
  script.onload = callback;
  head.appendChild(script);
}
loadScript("https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.js",createSpectro);

And then, I had to modify the css with the global_css parameter (".prodigy-content{ text-align : left}"), but I finally got something working.

spectroOk
spectroOk891×723 97.8 KB

This way of doing things has several problems, the versions of wavesurfer between the one I get for the plugin and the one from Prodigy can change and be incompatible, and the change in css can affect other things later on.

Do you think there is a better way?

(Otherwise I'm interested in a future version of Prodigy with the wavesurfer spectrogram plugin :slight_smile: )
Thanks a lot,
Jim

1 Like
2

This looks like a good solution – thanks for sharing! :smiley: I think I initially didn't include the spectogram plugin because I wasn't 100% sure how useful it'd be for people in the context of annotation. But if it's a useful addition, we can definitely consider including it as an option out-of-the-box.

3

Annotating directly on the spectrogram would indeed be a great addition for speech experts, especially for phone-level labeling.

Some experts are even capable of "reading" speech spectrograms as if those were text :exploding_head:

1 Like
4

Hi -- I'm trying to implement something like the above, but I'm not having success. Any chance you could post a full working example? Any help much appreciated.