html5 <audio> not playing on IOS Safari

Question

I have an mp3 which plays correctly via the embed tag in older browsers, but for iPad, when I try to play the same mp3 via <audio>, it says movie not supported. Is this a MIME type issue? This method works on desktop Safari.

How do I get it to play on Safari under IOS4.3?

Here's my code:

var audio = document.createElement('audio');  
audio.type = "audio/mpeg";     
audio.src = audioUrl;              
x.appendChild(audio);     
audio.load(); 
audio.play(); 

Answer 1

The issue is the load has to happen in a user-triggered event (button click, etc). I'm not sure which iOS version this is, but I confirmed it in 4.3.5. I've written up a bit more details and a possible workaround here:

Autoplay audio files on an iPad with HTML5

Edit: Apple's explanation: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

So the issue is iOS 4+

Answer 2

Note that if you are serving the content over https you need to have a valid certificate or it will not play on iOS devices (or on Safari on a Mac). You won't get an SSL error or any obvious SSL related messages -- it just won't work on iOS devices and Safari for the Mac, but will work for Chrome and Firefox (for example) on a Mac.

See here for a related question where SSL was the issue (as it was for me).