Region play not working as expected

Hi all! 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:

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:

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. Thanks in advance for any help! Sebastian

PS: I realise this is a set of questions rather than a real “issue” - if I should post this somewhere else, please let me know.

[misko]

Is it possible that the cursor is enabled , and when you click two events get fired? one to play the region and one to seek to cursor position?

I had a similar issue and I fixed it by adding , interact: false

Which seems to prevent the original seek event from firing and only the region plugin events get fired.

[vejmelkam]

Hi, I have the same issue, traced into wavesurfer.play(start, end) not respecting the start parameter at all, only the end parameter. I have Chrome 67.0.3396.87 on OS X. This happens regardless of whether the play() call was invoked via a region click handler or not - simply calling play() with the start/end parameters suffices to reproduce.

I have traced it to the line

this.media.currentTime = start in mediaelement.js

which has no effect, currentTime remains at zero. There are a few posts proposing different hypotheses why this could happen.

What’s strange is that using anonymous mode in Chrome solves the issue, play() works as expected. In normal mode I can’t get this to work even with developer tools active and caching disabled. Any hints on where to start to fix this?