4.1.1 Region function play() question

[Redyoung49]

Wavesurfer.js version(s):

V4.1.1

Browser and operating system version(s):

windows 10 x64 & chrome 84.0.4147.125 x64

Code needed to reproduce the issue:

in my react project,

private waveform: WaveSurfer | undefined = undefined;
......
this.waveform.on("region-click",(region:any,mouseEvent:MouseEvent)=>{
                if(mouseEvent.button === 0 ){
                    region.play();
                }
                if(mouseEvent.button === 2)
                {
                    region.remove();
                }
            })
......

Use behaviour needed to reproduce the issue:

when i click the region , the wave play start from mouse clicked position to the end.

then I deleted the wavesurfer.js from node_modules and run command

 npm i wavesurfer@4.0.1 

the region play work well so ...

[sundayz]

region.play(pos) will start playback from pos, or from the region's start position if pos is undefined. wavesurfer.play(start, end) works the same.

Using those 2 functions you can achieve what you want to do.

[Redyoung49]

region.play(pos) will start playback from pos, or from the region's start position if pos is undefined. wavesurfer.play(start, end) works the same.

Using those 2 functions you can achieve what you want to do.

not work , region.play(region.start) and wavesurfer.play(region.start,region.end) , i dont know why.

the 'region-click' event trigger the function play() success when i click in the region area , but it play from the mouse pos to the end ,

[sundayz]

In 4.0 #1926 changed how the region click event works

In 4.1 it was reverted: #2024

If you want it to work like 4.0 just call mouseEvent.preventDefault() yourself and it will be the same.

Also you can try calling wavesurfer.seekTo(time) youreslf

[Redyoung49]

In 4.0 #1926 changed how the region click event works

In 4.1 it was reverted: #2024

If you want it to work like 4.0 just call mouseEvent.preventDefault() yourself and it will be the same.

Also you can try calling wavesurfer.seekTo(time) youreslf

preventDefault() not work

this.waveform.on("region-click",(region:any, mouseEvent:MouseEvent) => {
                if(mouseEvent.button === 0 ){
                    mouseEvent.preventDefault();//not work
                    region.play();
                }
            })

use stopPropagation() OK!!!!

this.waveform.on("region-click",(region:any, mouseEvent:MouseEvent) => {
                if(mouseEvent.button === 0 ){
                    //mouseEvent.preventDefault();
                    mouseEvent.stopPropagation();//YES
                    region.play();
                }
            })