Player becomes unresponsive when seeking at the end of a FLAC file

insertmike commented 8 months ago

Bug description

When performing a seek mouse operation at the end of a .flac file, WaveSurfer becomes unresponsive. The player do no longer resolves promises of .play and .pause, and fails to trigger events such as timeupdate.

This issue is being raised separately as !3534 does not specifically address unresponsiveness beyond console errors.

Environment

Browser: Chrome

Minimal code snippet

Note: need clicking at the 97+ percentile.

import WaveSurfer from 'wavesurfer.js'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: 'xxx.flac',

})

/*
<html>
  <div style="margin: 1em 0 2em;">
    <button id="play">Play/Pause</button>
  </div>
</html>
*/

const playButton = document.querySelector('#play');

playButton.onclick = () => {
 wavesurfer.playPause()
}

Expected result

When mouse seeking at the end of a FLAC file, WaveSurfer remains responsive.
When seeking at the end of a FLAC file, the WaveSurfer instance continues to fire events such as ontimeupdate.

Obtained result

seekFlacBug

katspaugh commented 8 months ago

Thanks for the report!

Could you try reproducing this bug with a custom media element instead of passing a URL? I.e.

import WaveSurfer from 'wavesurfer.js'

const audio = new Audio('xxx.flac')

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  media: audio,
})

insertmike commented 8 months ago

@katspaugh

Thank you for your fast reply. Tried your proposal and unfortunately the issue persists:

Minimal Code Snippet

import WaveSurfer from 'wavesurfer.js'

const audio = new Audio('xxx.flac ')

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  media: audio,
})

wavesurfer.on('timeupdate', (newTime) => console.log(newTime))

/*
<html>
  <div style="margin: 1em 0 2em;">
    <button id="play">Play/Pause</button>
  </div>
</html>
*/

const playButton = document.querySelector('#play');

playButton.onclick = () => {
 wavesurfer.playPause()
}

Obtained Result

You can note how timeupdate also stops firing in the console. As this could be workarounded with interaction the unresponsiveness is integration blocker.

seekFlacBugCustomAudio

katspaugh commented 8 months ago

Thanks! This rules out that the problem is blob URL-related.

What if you insert the same FLAC file as a regular audio element w/o wavesurfer? Does it hang also?

insertmike commented 8 months ago

@katspaugh

I can share the audio as it's from a public dataset (asvspoof): Audio File + Online Player

What if you insert the same FLAC file as a regular audio element w/o wavesurfer? Does it hang also?

It does not hang and you can see it in the audio file link above, when using a regular audio player.

To add to this, it not only happens to this specific audio, but all of my local flac files.

insertmike commented 6 months ago

Hello @katspaugh ,

Can we expect any updates on this matter :)

Greetings

katspaugh commented 6 months ago

You could try adding backend: 'WebAudio' as a workaround. A fix is not likely as it seems to be browser-related.

katspaugh / wavesurfer.js