Wavesurfer Spectrogram

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(){ 
    wavesurfer: window.wavesurfer,                                                            
    container: window.wavesurfer.container,
    labels: true

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;

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

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,

1 Like

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.

1 Like

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: