Hot replacement audio source

[SmirnovMaxim]

Bug description

There are several tracks in the form of a playlist, they should play one after another. However, now when changing a track, the previous one plays. The problem is solved only by pausing and then playing again.

Environment

• Browser: Chrome

Minimal code snippet

https://codepen.io/SmirnovMaxim/pen/jENQyro

Expected result

After call load(...) the new track is playing

Obtained result

After call load(...) the old track is playing

Screenshots

[katspaugh]

Thanks! That's a weird bug. Looks like the previous URL is cached somewhere internally and isn't cleared properly on load.
Edit: The waveform does change so it looks like it's stuck somewhere in the media element.

[SmirnovMaxim]

I think it's some race condition - when I'm debugging in DevTools this behavior step by step the new track is playing.

[katspaugh]

I fixed it in your codepen by resetting the audio element like so:

document.querySelector("#next").addEventListener("click", () => {
  index = index === 0 ? 1 : 0;
  wavesurfer.stop()
  
  wavesurfer.getMediaElement().src = ''
  wavesurfer.load(list[index]);
});

Also it starts switching the audio after you press Next a second time, so maybe you're seeing this?

[SmirnovMaxim]

I tried it but doesn't work

P.S. Codepen has been updated

[katspaugh]

For me, it now works when the track finishes and automatically switches to the next one.
The next button doesn't fully work – it briefly switches to the next audio and then back to the previous one. Probably because it triggers a finish event, so it switches twice.

[SmirnovMaxim]

Yeah, it works, thanks so much