How to "autoplay" an HTML5 audio element in Mobile Safari?

Question

I am porting a vehicle in-dash display unit app over to the browser. The big goal is to get it running completely within Mobile Safari.

It's an HTML5/JS music app that relies heavily on jQuery.load to move around between different "screens" by loading in page fragments.

The issue is that when a user selects a track to play, they are taken to the "now playing" screen, which should start playback of the track. The track is not playing though once this screen is reached, and the user instead needs to explicitly click play from this screen in order for audio playback to start. Once this has happened for the first time, autoplay works for the duration of the app.

I understand that Mobile Safari intentionally put blockers in place to prevent audio from autoplaying so that web apps are kept from consuming data unless in direct response to user input.

The thing is, my audio playback IS in direct response to user input...sort of. However, a bunch of things need to happen before my playback actually starts, and those things happen within the now playing page (calling API to get URL for track to be played, report user is playing track, get track metadata, yatta yatta yatta).

To try and get around this, I have the app preload a silent .1s mp3 file into the audio element on startup. Then in direct response to a click event to transition to now playing screen, I call .play() on the audio element.

I assumed that having a call to .play in direct response to user input would the subsequent call to .play() within the now playing page to work, since this is the behavior I had previously observed.

Only, it didn't seem to make any difference.

Any ideas on how I can adjust my flow in order for audio playback to start after loading the now playing screen?

EDIT: Added some code snippets below

Vehicle.audio = {
        init: function () {
            audioElement.setAttribute("src", "/audioinit.mp3");
            audioElement.play();
        },

        play: function (source) {
            log("VEHICLE: playing audio from source " + source);

            Vehicle.audio.stop();
            audioElement.setAttribute("src", source);
            audioElement.play();
        },

In response to user selecting a track:

$(document).on("click", "a.play-track", function () {
    Vehicle.audio.init();
    /* my wrapper function for jQuery.load() */
    replace_wrap("nowplaying.html");
});

Then on the now playing page, Vehicle.audio.play() is called.

Possible duplicate of How can I autoplay media in iOS >= 4.2.1 Mobile Safari? — dippas

idbehold idbehold · Accepted Answer · 2016-05-31T19:08:14

The thing is, my audio playback IS in direct response to user input...sort of. However, a bunch of things need to happen before my playback actually starts, and those things happen within the now playing page (calling API to get URL for track to be played, report user is playing track, get track metadata, yatta yatta yatta).

Try adding a "touchstart" event listener to the entire "now playing page" which will then synchronously call .play() on the audio element:

$(document).one("touchstart", function () {
  Vehicle.audio.init()
})

This way as soon as an iOS user touches anywhere on the now playing page, the audio should begin loading/playing.

How to "autoplay" an HTML5 audio element in Mobile Safari?

2 Answers