when playing a region, the region-in event and region-out event fired almost same time(less than 20 micro-seconds) which lead to playing region fails

[alexzhangmaker]

the console output: timeRegionIn:1720684628131===>timeRegionOut:1720684628138, delta:7 here the number is Date().getTime(), and the delta is the difference between in and out event.

And below is the region to be play, and we can see the start and end is "start": 6.310421089646, "end": 8.87566764644661 { "listeners": { "update": {}, "update-end": {}, "play": {}, "click": {}, "dblclick": {}, "remove": {} }, "totalDuration": 237.145397, "numberOfChannels": 1, "minLength": 0, "maxLength": null, "contentEditable": false, "subscriptions": [ null, null, null ], "id": "region-g4950a6n02g", "start": 6.310421089646, "end": 8.87566764644661, "drag": false, "resize": true, "color": "rgba(58.7709341160575, 222.1914898683647, 59.940289305805834, 0.5)", "channelIdx": -1, "element": {}, "content": {} }

And this happens very often.

Can anyone please help to figure out the reason? Thanks

[pengzhendong]

Reproduced:

1. Open https://wavesurfer.xyz/examples/?regions.js
2. Drag the Drag me, and then click it

Updated region r {listeners: {…}, totalDuration: 26.386688, numberOfChannels: 2, minLength: 0, maxLength: Infinity, …}
region-in r {listeners: {…}, totalDuration: 26.386688, numberOfChannels: 2, minLength: 0, maxLength: Infinity, …}
region-out r {listeners: {…}, totalDuration: 26.386688, numberOfChannels: 2, minLength: 0, maxLength: Infinity, …}
region-in r {listeners: {…}, totalDuration: 26.386688, numberOfChannels: 2, minLength: 0, maxLength: Infinity, …}

[katspaugh]

The reason is probably the browser seeking back and forth when the audio is unbuffered. I’ve seen this behavior in Safari. You can set a backend: 'WebAudio' option to mitigate this.

[alexzhangmaker]

@katspaugh Thanks. problem solved by adding "backend: 'WebAudio'" option.