Autoplay audio files on an iPad with HTML5

Question

I'm trying to get an audio file to autoplay in Safari on an iPad. If I go to the page using Safari on my Mac, it's fine. On the iPad, autoplay does not work.

Answer 1

Autoplay doesn't work on the iPad or iPhone for either the video or the audio tags. This is a restriction set in place by Apple to save the users bandwidth.

Answer 2

More or less this is a restriction set in place by Apple to avoid rendering their own Appstore obsolote (think about it: it's true!)

Answer 3

Is it possible to include the audio within an webapp and have mobile safari autoplay it?

Fa11enAngel: Looks good. But that is for video. Knowing nothing at all about javascriptI have tried to modify it for audio but without any luck.

<script type="text/javascript"> 
    function fakeClick(fn) {
        var $a = $('<a href="#" id="fakeClick"></a>');
            $a.bind("click", function(e) {
                e.preventDefault();
                fn();
            });

        $("body").append($a);

        var evt, 
            el = $("#fakeClick").get(0);

        if (document.createEvent) {
            evt = document.createEvent("MouseEvents");
            if (evt.initMouseEvent) {
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            }
        }

        $(el).remove();
    }

    $(function() {
        var audio = $("#someVideo").get(0);

        fakeClick(function() {
            audio.play();
        });
    });

    </script> 

and the HTML5 audio:

<audio src="http://files.me.com/ajk/r42ocn.mp3" controls id="someVideo" /><a href="http://files.me.com/ajk/r42ocn.mp3" type="audio/mpeg"> test </a></audio>

and the test site.

http://web.me.com/ajk/

Answer 4

It's not true. Apple doesn't want to autoplay video and audio on IPad because of the high amout of traffic you can use on mobile networks. I wouldn't use autoplay for online content. For Offline HTML sites it's a great feature and thats what I've used it fore.

Here is a "javascript fake click" solution: http://www.roblaplaca.com/examples/html5AutoPlay/

Copy & Pasted Code from the site:

<script type="text/javascript"> 
        function fakeClick(fn) {
            var $a = $('<a href="#" id="fakeClick"></a>');
                $a.bind("click", function(e) {
                    e.preventDefault();
                    fn();
                });

            $("body").append($a);

            var evt, 
                el = $("#fakeClick").get(0);

            if (document.createEvent) {
                evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    el.dispatchEvent(evt);
                }
            }

            $(el).remove();
        }

        $(function() {
            var video = $("#someVideo").get(0);

            fakeClick(function() {
                video.play();
            });
        });

        </script> 

This is not my source. I've found this some time ago and tested the code on an IPad and IPhone with IOS 3.2.X.

Answer 5

Has this approach been broken by the iPhone OS4 update? I tried autoplaying an audio tag using that approach and when that didn't work I tried the video autoplay demo from the original link but that did not autoplay either...

Answer 6

Try calling the .load() method before the .play() method on the audio or video tag... which will be HTMLAudioElement or HTMLVideoElement respectively. That was the only way it would work on the iPad for me!

Answer 7

I don't mind using html5 for development on apple's devices, but thy are really annoying me by saying flash sucks. I try to use html5 and it's nowhere near as powerful as flash. to top it off apple strips away the ability to really create great apps by being big brother and deciding what they think is best for the users.

give me the whole of html5 not some stripped down version of it.

Steve Jobs needs to stop being evil before he can point the finger at adobe and say their mantra is BS!

by the way, android froyo runs flash beautifully!

I'm almost at the point of editing my iphone version of candytunes to display "Apple is Evil" when people go to my site. why bother trying to build for iphone when they block anything that could potentially compete?

Answer 8

I'm also trying to implement autoplay in audio. Tried your script on both video and audio tags without any luck. Does it work? How can you make it work for audio?

Answer 9

This seems to work:

<html>
<title>
iPad Sound Test  - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript"> 
    window.onload = function() {
        var audioPlayer = document.getElementById("audio");
        audioPlayer.load();
        audioPlayer.play();
    };
    </script> 

</body>
</html>

See it in action here: http://www.johncoles.co.uk/ipad/test/1.html