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(); 

Solution 1

As of 4.x iOS no longer supports autoplay for html5 audio objects. See: Autoplay audio files on an iPad with HTML5

edit (2011-10-04): This was regarding to how the original posters code snippet was presented. If given code is not executed via an event triggered by user action (f.ex click), the audio won't play. If you have this code inside a function that is bound to click event on some button, it should work (haven't tested).

Solution 2

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+

Solution 3

I have to add something to the answer by kinakuta

I tried the link in the comment to the answer apples html5 showcase The music plays with Firefox 16, Internet Explorer 9, Google Chrome 22 and Opera if you mask Opera as firefox.

But Apples OWN Demo DOES NOT WORK with Apple Safari 5.1.7 on my Machine because I don't have Quicktime on my machine. HTML5 Audio is not working very well with Safari, there are others having trouble with it. this can be irritation during development If one does not want quicktime installed on the computer.

Solution 4

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).

View more solutions

Comments

[kinakuta]

This was not a question about autoplay.

[Anssi Moilanen]

Ok by the looks of the code snippet I assumed that this was the case. Edited and clarified my answer.

[Judah Gabriel Himango]

This answer is right on: the question is why this code doesn't work on iOS. The answer is: because Apple has blocked <audio> elements from playing without user interaction. They've blocked auto play.

[Fabien Snauwaert]

Technically, what happens is that Safari relies on QuickTime to play audio (at least on Windows, can't speak for MacOS). So, no QT, no audio.

[Tormy Van Cool]

Well, the situation still there without autoplay as well .. a similar code I used, doesn't play ... just mute .. only iOS .. and now we are at 12.x.x not matter Chrome vs Safari ... and it's quite annoyng