Uncaught (in promise) AbortError: The play() request was interrupted by a call to pause().

[Mattk70]

Bug description

ws.play() returns a Promise. If you call ws.pause() before the Promise settles you get this error. There have been other bug reports of a similar nature but I believe this is the root cause.

Environment

• Browser: Observed in Chrome, but suspect this will affect Edge, Firefox, Opera, and Safari

Minimal code snippet

// A basic example

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/demo.wav',
})

wavesurfer.on('click', () => {
  wavesurfer.play()
  wavesurfer.pause()
})

Expected result

No error. According to https://developer.chrome.com/blog/play-request-was-interrupted, ws.pause() should wait for the play() Promise to settle before attempting to pause.

Obtained result

Uncaught (in promise) AbortError: The play() request was interrupted by a call to pause().

[katspaugh]

@Mattk70 why did you close it? I've seen the same error in the regions e2e test.

[Mattk70]

I figured you'd just say "await the ws.play()", and if you do this:

wavesurfer.on('click', async () => {
  await wavesurfer.play()
  wavesurfer.pause()
})

You don't get an error. So I was thinking I would come back with a better illustration. It's difficult to re-create the issue but maybe something like this:

// A basic example

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
 container: document.body,
 waveColor: 'rgb(200, 0, 200)',
 progressColor: 'rgb(100, 0, 100)',
 url: '/examples/audio/demo.wav',
})



wavesurfer.on('click', async () => {
await wavesurfer.play()
wavesurfer.pause()
})

wavesurfer.emit('click');

Yep, that does it.

And yes, in my case, I am getting it while regions are being created (it seems to be when that is during playback, but I haven't been able to reliably reproduce it - it's intermittent (likely a timing thing).

[katspaugh]

I see, thanks!

This started after https://github.com/katspaugh/wavesurfer.js/pull/4014

[Mattk70]

I'm not sure this issue started then, I am using 7.9.0

[Mattk70]

A quick update: It may indeed have started with v7.9.1. Although I had v7.9.0 installed, my package.json has:

"wavesurfer.js": "^7.9.0"

So my app will have been built with v7.9.1 when that became available