How can I autoplay media in iOS >= 4.2.1 Mobile Safari?

Question

I cannot seem to get audio media to play in Mobile Safari on iOS 4.2.1 in any situation other than the handler of a click event performed by the user. Even then, if p

Answer 1

Autoplay is supported (in my tests) with an iPhone 5 (iOS 6) using the headphone jack.

Answer 2

Please Try this Code it is working both version, you need to add the audio control dynamically in page. it is working.

var isiPad = false;
if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)) { 
    isiPad = true; 
}
$(function() { 
    if (isiPad) { 
        var audioElement2 = document.createElement('audio'); 
        audioElement2.setAttribute('src', 'img/bgsound.mp3'); 
        audioElement2.controls = true; 
        audioElement2.loop = true; 
        audioElement2.load();
        audioElement2.play();
    }
});

Answer 3

As others have said here and according to Apple documentation, MobileSafari does NOT support the autoplay attribute in the video tag. However, in iOS 6 it DOES work. This appears to be a bug which Apple fixed in iOS 6.0.1 (and presumably in iOS 6.1).

Don't rely on autoplay working in iOS 6 if you happened to stumble across it working in iOS 6.0.

-Michael

Answer 4

How about this?

Create an audio sprite with Sound Manager 2, preload & cache it from the first user interaction, and then play as and when needed.

Would that work?

Answer 5

There is one way to play the video/audio file automatically on 4.2.1. Create an iframe and set its source to the media file's URL and append the iframe to the body. It'll be autoplay.

var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://mysite.com/myvideo.mp4");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);

Answer 6

This worked on the iPad until last nights 4.2 upgrade:

$(function() {
    var Beep = document.createElement('audio');
    Beep.setAttribute('src', 'beep-23.mp3');
    Beep.load();
    Beep.play();
}

My Beep.play(); still works for a click event, but the initial Beep.play() stopped working...