How to play a play a region in wavesurfer.js?

Question

I recently discovered wavesurfer.js and have integrated it into a web-interface for linguists (making it possible for them to play the audio for query results they retrieve). Since the alignment of words and sound isn't always ideal, I am using the regions plugin to allow them to highlight the stretch they want to listen to - or at least that's the plan. For the past few days, I have been struggling to get this to work. I know very little about JavaScript - I'm working from examples that I have found, trying to adapt them to my needs. Please be gentle in your criticism.. ;-)

What I want: Allow user to drag-select a region and play it once (or possibly as a loop) when clicked (or when a button is pressed). Adjust region as necessary. Here's what I have got:

var RegionsPlugin = window.WaveSurfer.regions;

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'blue',
  progressColor: 'purple',
  barHeight: 2,
  backend: 'MediaElement',
    plugins: [      
    RegionsPlugin.create({
     })
    ]
});

wavesurfer.load('http://url.to.wav');

wavesurfer.on('ready', function () {
    wavesurfer.enableDragSelection({});
});

wavesurfer.on('region-click', function(region, e) {
    console.log(region.start);
    console.log(region.end);
    e.stopPropagation();
     wavesurfer.play(region.start, region.end);
});

This kind of works in Firefox (on a Mac), but in Opera and Chrome, it always starts playing from the beginning of the audio clip. I say "kind of works" in Firefox, because it only starts playing the region on the second click (and obviously nothing is written to the console). I'm not sure what happens on the first click...

I suspect this is really easy - but not for me...

Two more things relating to the spectrogram plugin (code not shown above):

1. Is there any way to modify the frequency range in the spectrogram? The phonetician I'm working with is very unhappy about the fact that she can't zoom in on the first 5000Hz.
2. Occasionally (but not consistently - a reload will often fix this - I get the error message "TypeError: buffer is null" when the spectrogram is loaded. Any suggestions where I should start looking for problems.

I'm using the latest version of wavesurfer.js. I posted the same request for help under "issues" on the GitHub site of wavesurfer.js but have not received any input yet - and am now hoping for some input here. I will update things if the developer gets back to me. Thanks in advance for any help!

Sebastian

Answer 1

Add these lines after wavesurfer.enableDragSelection({}); in your code. Should work.

wavesurfer.addRegion({ start: 0, // time in seconds end: 3, // time in seconds color: 'hsla(100, 100%, 30%, 0.1)' });