DOMException: BodyStreamBuffer was aborted at m.destroy

[gregorio-disco]

Hey! 👋 I'm currently working on an audio tool that can navigate between multiple audios if the navigation process is done quickly, I get an unhandled error by the library.

Bug description

The library throws an unhandled exception if the wavesurfer instance is destroyed (with .destroy() method) while still loading or processing an audio.

Environment

• Browser: Chrome, Edge, Firefox

Minimal code snippet

// somewhere.jsx
...
      if (player.current) {
        player.current.destroy();
      }

      player.current = WaveSurfer.create({
        container: histogramRef.current,
        plugins: [Zoom],
        ...options,
      });
 ...

Expected result

A handled exception

Obtained result

An unhandled exception

Screenshots

[katspaugh]

You should catch the promise from the load method. E.g.

// somewhere.jsx
...
      if (player.current) {
        player.current.destroy();
      }

      player.current = WaveSurfer.create({
        container: histogramRef.current,
        plugins: [Zoom],
        ...options, // don't pass a URL here
      });

      player.current.load(url).catch(() => {
        // handle errors here
      })
 ...

Also consider using https://github.com/katspaugh/wavesurfer-react