Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
insertmike opened this issue Feb 16, 2024 · 6 comments
Open

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

insertmike opened this issue Feb 16, 2024 · 6 comments
Labels
bug

Comments

@insertmike
Copy link

Bug description

Related: #3534

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

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

Obtained result

seekFlacBug
@insertmike insertmike added the bug label Feb 16, 2024
@insertmike insertmike changed the title Seeking at the end of .flac files makes wavesurfer unrensposive Player becomes unresponsive when seeking at the end of a FLAC file Feb 16, 2024
@katspaugh
Copy link
Owner

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
Copy link
Author

@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
Copy link
Owner

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
Copy link
Author

insertmike commented Feb 16, 2024 •
edited

@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.

@katspaugh katspaugh mentioned this issue Mar 31, 2024
Closed
@insertmike
Copy link
Author

Hello @katspaugh ,

Can we expect any updates on this matter :)

Greetings

@katspaugh
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@katspaugh @insertmike