Is wavesurfer.stop() supposed to emit a 'region-out' event? #3814

weavermedia · 2024-08-09T02:44:36Z

weavermedia
Aug 9, 2024

I'm seeing some strange behavior and before I report it as a bug I'm seeking some feedback here.

I'm using Play and Stop buttons to play/stop the audio. I'm also using a single region as a loop section.

Play -> wavesurferRegion.play()
Stop -> wavesurfer.stop()
Region -> { start: 1, end: 3, drag: true }
Region loops by listening for 'region-out' and sending region.play()

Normal behavior (from init before dragging the region):
When I hit the Play button the region plays from the start. When I hit Stop the audio stops and the cursor returns to zero. Every time, as expected. If I hit Play and leave it playing until the end of the region it loops, as expected.

Weird behavior (after dragging the region):
When I hit Play the region plays from the start but when I Stop the region again plays from the start.

If I don't loop the region using the 'region-out' event then Stop works as expected.

It seems like wavesurfer.stop() is emitting a 'region-out' event which interferes with the loop function. But it only starts to do that after dragging the region.

Can anyone reproduce this? It's driving me a bit nutty 😜

Answered by katspaugh

Aug 12, 2024

I'm seeing this behavior in your example, yes. I think the problem is that stop() goes to the beginning of the audio and thus triggers a region-out event. You could usepause() instead, the playhead will then stay where it was.

View full answer

katspaugh · 2024-08-09T10:49:53Z

katspaugh
Aug 9, 2024
Maintainer

Could you create a reproducible example in this sandbox – https://wavesurfer.xyz/examples/ – and paste the code here?
Btw thanks for your sponsorship! 💟

1 reply

weavermedia Aug 9, 2024
Author

Here's a minimal code example. The weird behavior is slightly different here than in my app. This time the Stop button triggers a 'region-out' event even without dragging the region first. However if you then drag the region to beyond the playhead the Stop button works as expected. But once the playhead enters the region the Stop button starts triggering the 'region-out' event again.

I added some logging so you can see when pressing Stop triggers a 'region-out'.

Have a play and let me know what you think.

/*
<html>
  <div id="ws"></div>
  <button id="play">PLAY</button>
  <button id="stop">STOP</button>
  <div id="log">LOG</div>
</html>
*/

import WaveSurfer from 'wavesurfer.js'
import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'

const regions = RegionsPlugin.create()

const ws = WaveSurfer.create({
  container: '#ws', 
  url: '/examples/audio/audio.wav',
  plugins: [regions],
})

let region = null

ws.on('decode', () => {
  region = regions.addRegion({
    start: 1,
    end: 4,
    drag: true,
  })
})

document.querySelector("#play").onclick = () => {
  document.querySelector("#log").innerHTML += "<br>PLAY"
  region.play()
}
document.querySelector("#stop").onclick = () => {
  document.querySelector("#log").innerHTML += "<br>STOP"
  ws.stop()
}

regions.on('region-out', (region) => {
  document.querySelector("#log").innerHTML += "<br>REGION OUT"
  region.play()
})

weavermedia · 2024-08-12T17:15:24Z

weavermedia
Aug 12, 2024
Author

@katspaugh Were you able to reproduce this?

1 reply

katspaugh Aug 12, 2024
Maintainer

I'm seeing this behavior in your example, yes. I think the problem is that stop() goes to the beginning of the audio and thus triggers a region-out event. You could usepause() instead, the playhead will then stay where it was.

Answer selected by weavermedia

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is wavesurfer.stop() supposed to emit a 'region-out' event? #3814

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Is wavesurfer.stop() supposed to emit a 'region-out' event? #3814

weavermedia Aug 9, 2024

Replies: 2 comments · 2 replies

katspaugh Aug 9, 2024 Maintainer

weavermedia Aug 9, 2024 Author

weavermedia Aug 12, 2024 Author

katspaugh Aug 12, 2024 Maintainer

weavermedia
Aug 9, 2024

Replies: 2 comments 2 replies

katspaugh
Aug 9, 2024
Maintainer

weavermedia Aug 9, 2024
Author

weavermedia
Aug 12, 2024
Author

katspaugh Aug 12, 2024
Maintainer