Wavesurfer.js: Cannot read property 'addEventListener' of undefined when calling enableDragSelection

[Bran1304]

Hello,

I am using wavesurfer within a react app, and I came across a strange issue. I'm using the Regions plugin and I need to do enableDragSelection. So once the wavesurfer is ready and it fires the ready event, I call wavesurfer.enableDragSelection({});. This works just fine when I am running the app locally, but as soon as I make a deploy on Heroku, I get this error instead.

Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at o.value (regions.js:742)
    at o.enableDragSelection (regions.js:607)

Any help really appreciated! :)

Wavesurfer.js version(s): 2.1.1

Browser version(s): Chrome v70

[thijstriemstra]

@Bran1304 if you can reproduce this with a simple example we can take a look.

[aburai]

• this.wrapper is undefined
• this.wrapper is set, when Regions is ready

wavesurfer fires ready, your code runs, but Regions ready is not completed

for your information, enableDragSelection will be called when Regions ready

       this.wavesurfer.on('ready', this._onReady);

       this._onReady = () => {
            this.wrapper = this.wavesurfer.drawer.wrapper;
            if (this.params.regions) {
                this.params.regions.forEach(region => {
                    this.add(region);
                });
            }
            if (this.params.dragSelection) {
                this.enableDragSelection(this.params);
            }
        };

[Bran1304]

@aburai Thanks so much for your answer!

That there looks like it's just checking if wavesurfer is ready, or am I wrong? Is there any way to tell Regions is ready?

Thanks again
Bran

[thijstriemstra]

Is there any way to tell Regions is ready?

Don't think so, try region-created event or add a new event and open a pull request.

[Bran1304]

Thanks for all your help guys, I resolved it by checking the isReady value in wavesurfer.regions.wavesurfer like so:

onReady(wavesurfer) {
    if (!wavesurfer.regions.wavesurfer.isReady) {
      setTimeout(() => this.onReady(wavesurfer), 1000)
      return
    }

    wavesurfer.enableDragSelection({});
}

I might look into adding that event @thijstriemstra when I get some free time this weekend 👍

[shobees]

I am using Wavesurfer in react app . It works . I save the regions in server . I want to add the saved region when the annotate load ..