Any way to know when the regions plugin is ready to accept new regions?

[jagthedrummer]

I'm working on an interactive player where the regions plugin is added after the wavesurfer is initially created and I'm trying to figure out how to know when the plugin is ready to accept new regions.

I'm trying to do this:

// During initial setup I create the wavesurfer, but do not create any regions.
this.wavesurfer = await WaveSurfer.create(...);

// Time passes, someone clicks a button to enable "region mode"
// and I want that event handler to do this:
this.regions = await RegionsPlugin.create({});
await this.wavesurfer.registerPlugin(this.regions);
this.regions.addRegion(...);

The problem I'm running into is that sometimes (often, but not always) the call to this.regions.addRegion will fail with a complaint that this.regions is null. (The awaits here seem to be useless because neither RegionsPlugin.create or wavesurfer.registerPlugin return a promise, so nothing is actually being awaited.)

If I set a timeout and add the region after a few hundred milliseconds it works pretty consistently.

Is there any way to know when the regions plugin is ready?

[katspaugh]

You should be able to add regions as soon as wavesurfer knows the audio duration.

So on one of the following events:

• ready
• decode

See this example: https://wavesurfer.xyz/examples/?regions.js