Audio Tag Autoplay Not Working in Mobile

Audio Tag Autoplay Not working in mobile

Now, it's2020

Note that (for the below reason?) Chrome has changed their autoplay policy (see https://developers.google.com/web/updates/2017/09/autoplay-policy-changes ) so you now must either:

• resume() the audio context after some (any) user interaction with the page
• or be "highly ranked" (ie trust Chrome not to stop audio by default based on user's and world's behavior)
• or (as far as I get it) user must be on origin A then click a link to same origin A and that new page of A can autoplay things.

---

You can play a sound using the AudioContext API and taking the source from any ArrayBuffer (ie: from a XMLHttpRequestor a File)

    window.addEventListener('load', function () {
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var source = audioCtx.createBufferSource();
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'audio-autoplay.wav');
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener('load', function (r) {
            audioCtx.decodeAudioData(
                    xhr.response, 
                    function (buffer) {
                        source.buffer = buffer;
                        source.connect(audioCtx.destination);
                        source.loop = false;
                    });
            source.start(0);
        });
        xhr.send();
    });

Live example

Works on Chrome and Firefox both mobile and Desktop

Important notes

It's worth mentioning, IMO, that this "trick" can actually be considered as a browser bug, and might no longer work at any time if browser decide that this breaks user experience/becomes a widely-used annoyance (like ads).

It's also worth mentioning that, at least on my mobile and FF 54, the sound will still be played, even if your mobile is muted...

It's also also worth mentionning that user might set the autoplay behavior to fit their wishes and needs either through the browser's usual options or through the more-advanced about:config page (autoplay behavior is set by Firefox's media.autoplay.enabled and media.block-autoplay-until-in-foreground preferences).

So forcing the audio autoplay is a bad UX idea no matter how you do it.

HTML: audio cannot be played in mobile browser

Autoplay is not allowed in the mobile browsers. So it won't work.

If you must use audio in your app, then you can try this post

http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/

audio tag play not working in mobile when even javascript call

You may need to add audiocontext on window load

window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  ...
}

and need to resume context before play

context.resume().then(() => {
     $("#myAudio").get(0).currentTime = 0;
    $("#myAudio").get(0).play();
    console.log('Playback resumed successfully');
  });

How to autoplay audio in any browser?

A couple of weeks ago I tried exactly what you intend to do, however, after a lot of research I realized this is nearly impossible now. For example in Chrome (I don't know if also in other browsers) you cannot autoplay sounds/videos unless one of these points is accomplished:

• The user interacts with your website (click on any part of your site).
• The user added your website to the home screen (mobile).
• The user has crossed the media interaction index (MEI) threshold.
• Your website is in the Google whitelist for autoplaying (such as Youtube).

In my case I did a little trick with a cookies policy button to force the users to interact with my website and trigger the sound playing.

You can see more information and examples here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

HTML5 audio tag does not work in Android - Chrome when created in JS?

Looks like this is intended feature that spans more then just the Chrome browser. User interaction is required to get media elements to play.

Blink and WebKit have a setting for requiring a “user gesture” to play or pause an audio or video element, which is enabled in Opera for Android, Chrome for Android, the default Android browser, Safari for iOS and probably other browsers. This makes some sense, since mobile devices are used in public and in bed, where unsolicited sound from random Web sites could be a nuisance. Also, autoplaying video ads would waste bandwidth. Block Quote from 'blog.foolip.org'

Duplicate Threads from Other Users

Autoplay audio on mobile safari

How can I autoplay media in ios 4.2.1

Autoplay audio with ios 5 workaround?

Current Status

Developers have requested the deletion of 'mediaPlaybackRequiresUserGesture' which was reviewed and denied (for now). "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction."

Upon further inspection i found this...

"I misunderstood the outcome of the discussion (removing mediaPlaybackRequiresUserGesture) surrounding this topic. We need to keep this code in order to not break google.com while gathering data about this feature."

Google.com relies on the feature being disabled, otherwise it breaks (they didn't say what it breaks).

Original Bug Report

---

Related Topics