Playing html5 audio in ajax response in iOS

Question

After a lot of googling and researching, I have found out that iOS blocks autoplaying of html5 audio and video. Audio and Video can only be played as a response to a click event.

Now, I have another problem. I run a music website with a lot of user generated playlists. After clicking play, I make an ajax request to fetch the track URLs, and then load them and play them. iOS doesn't consider this as a synchronous click event to play music, so the music doesn't start playing on clicking the play button. I have to click on the player control's pause and play buttons to make it start playing (which basically just use pause() and play()).

I just can't think of what to do. Loading all the MP3 URLs before hand before the click event is not feasible. Is there any other way to get this done?

Answer 1

Okay, after a bit of fooling around and researching, I figured out that the only way to do a playlist fetch and play in one click, is to use a synchronous request instead of an AJAX request. The page will freeze up while the request loads, but it seems to be the only way out.

Answer 2

I know this is an ancient question, but for people coming across this there is a straightforward solution which is to play a short, silent sound directly from the click handler. Ideally, this would be a sound file you have already fetched and cached.

After that you'll be able to initiate playback from other handlers, even those without direct user interaction. (such as your AJAX/XHR response)