Auto Play is not working in Safari

[salonirathod]

-> Bug description
Auto play is not working when the tab is changed in Safari, but it works fine in Chrome.

-> Environment
Browser: Safari

Minimal code snippet

-> Expected result
The Next song audio should resume playback automatically when the tab is changed back to Safari, similar to how it works in Chrome.

-> Obtained result
In Safari, the autoplay next song does not resume when switching back to the tab, whereas in Chrome, the autoplay works as expected. It start Loading the next song but does not play till we switch back to the tab where songs are played in safari

Screenshots

[katspaugh]

As a workaround you could try subscribing to the timeupdate event instead of finish and checking if the current time is >= the duration.

[bobmulder]

Hi @salonirathod, I think I faced the same issue as you do.

To be a little more detailed, beside moving back to the tab, I also had to have an interaction with the page (e.g. click on the background for example).

This behaviour is expected on Safari. Safari is more strict on what websites can do than e.g. Chrome.

I discovered that howler.js has a workaround for this. They create an Audiocontext which will stay active all the time. All new audio elements are using that same single audio context. Therefore no new interaction is required to play 'new' audio.

Wavesurfer doesn't do this by default, but we can initiate that same approach ourselves.

Pass a media object to your wavesurfer options, with your own audio context. The audio context needs to be created once.

// when initializing your app

window.sharedAudioContext = new (window.AudioContext || window.webkitAudioContext)();

// wherever you use audio:

const options = {
    // ...
    media: new WebAudioPlayer(window.sharedAudioContext),
}

Now every wavesurfer element will use that single audio context.

Hope this helps!