Wavesurfer.js: How to set the current time

[shaojinding]

Thanks for your awesome job on wavesurfer.js!

I found there's only how to get current time, but there's no way to set current time. I'm not sure if I didn't find it, or we don't have this function right now?
Any ideas?

Thanks,

Shaojin

[dmongrel]

@burningding The way it's done in the region examples is:

wavesurfer.play(region.start);
wavesurfer.pause();

You can replace region.start with the number of seconds.

[shaojinding]

@dmongrel Sorry for the ambiguous narration of question. In my case, I want to set the position of cursor (the current time) to the mid of region (the average between region.start and region.end). How can I achieve this?

Thanks!

[ghost]

You could also try
wavesurfer.seekTo(timeToSet / wavesurfer.getDuration())
where timeToSet is the number of seconds. This shouldn't fire pause and play events.

[entonbiba]

@burningding you can set it with seekTo() method or with play(); pause() combined. I'll added two methods called setCurrentTime() and 'setCurrentTimeBetween()' that allows you to set with seconds.

For now if you want to add the current time in the middle of two sections of the audio, You can do the following which will set it in the middle between start 4 seconds and end 12 seconds.

  var sec = wavesurfer.getDuration();
  wavesurfer.seekTo((4/sec)+(12/sec)*.5);

After pr #1046 is merged, you can do the following

var seconds = 60; // 60 seconds
wavesurfer.setCurrentTime(seconds); // will set the current time to 60 seconds

or

var start = 5; // 5 seconds
var end = 10 // 10 seconds
wavesurfer.setCurrentTimeBetween(start,end); // will set the current time to 7.5 seconds

[shaojinding]

@entonbiba @nelemnaru Thanks for your help! Looking forward the new version!

[shaojinding]

@nelemnaru @entonbiba I tried to use

var sec = wavesurfer.getDuration(); wavesurfer.seekTo((4/sec)+(12/sec)*.5);

to set the current time, it works well.

Now I want to drag to add a region and also set the current time to the mid of the region. I tried to add the code above to the event "region-update-end", it's true that the cursor will be set to the mid when "region-update-end" is fired. However, it seems that another mouse event is also fired, so at last, the cursor will be set to the place where I release the mouse. I also tried to use stopPropagation as well as stopImmediatePropagation in "region-update-end" event, but it doesn't work. Any idea on it?

Thanks!

[entonbiba]

@burningding so when you drag the region, you want it to set the play time in the middle or ?
The event region-update-end should work, can you post a sample on codepen?

[ghost]

I have a similar problem trying to play a region on double click, and stopPropagation doesn't help. It starts playing the region, but the cursor ends up moving to where I clicked. Currently, I'm using a workaround by using a setTimeout delay of 0.

wavesurfer.on('region-dblclick', function (region, e) {
    e.stopPropagation();

    setTimeout(function(){
        region.play();
    }, 0);
});

You could try setting a 0 timeout on your code until the issue is solved.

[entonbiba]

@nelemnaru you can use e.stopImmediatePropagation(); instead,

wavesurfer.on('region-dblclick', function (region, e) {
    e.stopImmediatePropagation();
    region.play();
});

[ghost]

@entonbiba I tried your suggestion to no avail. The region still begins playing from where I double-clicked instead of region start. (Don't know if it matters, but I'm using Firefox.)

[entonbiba]

@nelemnaru For now try the following below,

wavesurfer.on('region-dblclick', function (region, e) {
    e.stopImmediatePropagation();
    // code here
   wavesurfer.play(region.start, region.end);
});