Clear subscriptions array to avoid memory leaks

[stalar]

Short description

I have observed memory leaks when using the minimap plugin.

In my application, I reuse the same wavesurfer instance and create a new MinimapPlugin each time I load new audio data. I also call destroy() on the old MinimapPlugin. Despite this, I see memory being leaked that was created from the minimap plugin.

Perhaps this reuse of an instance with different plugins is not an intended use-case in which case this PR is moot.

Implementation details

I found that the problem is with the following code:

this.subscriptions.push(
   plugin.once('destroy', () => {
     this.plugins = this.plugins.filter((p) => p !== plugin)
   }),
)

When the plugin is destroyed, there is still a reference to it in the subscriptions array.

I could not find a good way to remove the entry in subscriptions so I opted for not adding it there at all. The drawback is that unregister() on the event will not be called. This could lead to a plugin calling the destroy handler after the wavesurfer instance was destroyed, but that seems harmless.

How to test it

1. Load the minimap-leak example and press the "Reload" button several times
2. Open the Memory tab in Chrome DevTools
3. Take a heap snapshot
4. Look for "MinimapPlugin" in the snapshot - there should be only one instance of it
5. Look for "WaveSurfer" in the snapshot - there should be only two instances of it

Checklist

• This PR is covered by e2e tests
• It introduces no breaking API changes

[katspaugh]

Thanks for the PR! I'll need to investigate a bit more.

[katspaugh]

I've made an improved PR based on this one: #4114
It keeps adding the destroy handler to the subscriptions list but removes it on plugin destroy.