Progress bar of waves is getting stuck in safari browser

[salonirathod]

Bug description:
At times in safari progress bar is not getting seek with the song, while song is played perfectly but there is no progress seen in the waves. It works fine in chrome.

Environment:

• Browser: Safari

Minimal code snippet:
wavesurferInstance.on("audioprocess", () => { if (currentTrackRef.current.id !== currentTrack.id) { wavesurferInstance.pause(); return; } const per = wavesurferInstance.getCurrentTime() / wavesurferInstance.getDuration(); if (per === 1) { currentTrack?.song_wavesurfer?.seekTo(0); } const array = allSongsRef?.current?.findLast((item) => { return item?.song_url?.id === currentTrack.id; }); if (per > 0) { array?.song_wavesurfer?.seekTo(per); currentTrack?.song_wavesurfer?.seekTo(per); } }); }

Expected result
Waves must show the progress as songs plays

Obtained result

Screenshots

[arbrainstream]

Hello @lucastheis @katspaugh

I am also facing the same issue. Please share your suggestion for the same.

Thanks
Ankit

[katspaugh]

Probably related to the file type. Try playing the same file in a regular audio element.

[salonirathod]

Hi @katspaugh
Thanks for replying

All the songs are MP3 type and it is working fine chrome and firefox. The issue only occurs in Safari.

[owenbrooks]

Hi, I also see this issue on Safari on iOS (18.2.1). It occurs for me when seekTo() is called before play() has ever been called, by some delay.

Here's a minimal example:

const wavesurfer = WaveSurfer.create({
  container: document.body,
  url: '/audio.mp3',
});

wavesurfer.on("click", handleClick);

function handleClick() {
  wavesurfer.seekTo(0.5);
  setTimeout(() => {
    wavesurfer.play();
  }, 1000);
}

When I run the above, the playhead seeks to the middle of the audio, but the audio itself begins playing from the beginning, and the playhead doesn't advance further.

On the other hand, this works fine:

function handleClick() {
  wavesurfer.seekTo(0.5);
  wavesurfer.play();
}

and this is a workaround I can use for now:

function handleClick() {
  wavesurfer.play();
  wavesurfer.pause();
  wavesurfer.seekTo(0.5);
  setTimeout(() => {
    wavesurfer.play();
  }, 1000);
}

Interestingly, even a timeout of duration 0 causes this issue for me.