Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture

Question

I\'m making a music playing page, where I use SoundManager 2 for AngularJs. I\'m using a remote API to get a song URL to play. I enhanced an angular-soundmanager2 click eve

Answer 1

I had to experiment with Chrome playing sounds. It turned out that even after a user gesture (such as click) it waits for 1000ms and if no sound was played it throws the exception above. In my case the problem was coming from asynchronous track URL loading.

But it also turned out that after the first track is played chrome doesn't care anymore for this 1000ms delay and you can call play programmatically with any timeout you want.

So the solution was to play a micro almost zero-second long muted sound from static resources after the very first time a user clicks on a track and after that load a desired track URL.

Hope it helps or someone finds other solutions.