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

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

Answer 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+

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

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

Answer 5

Good news everybody

I read somewhere that once you’ve played the sound once on a user interaction, you can then play it again without further interaction.

So set volume to zero and play all loaded sounds in one go at start.

I had a listener on 'touchstart' with a single instantiated function that played all the sounds once the user touches the screen.

Here's how I did it in my REACT componentDidMount()

componentDidMount() 
{
    
    let that = this;
    document.body.addEventListener('touchstart', function(evt) //First touch event on the screen will trigger this
        { 
            console.log("Audio Setup for iOS:", that.state.allow_sound);
            if(!that.state.allow_sound) //False on initial load
            {
                var Audio1 = document.getElementById("ping");
                Audio1.load();  
                Audio1.volume = 0;
                Audio1.play();          
                
                var Audio2 = document.getElementById("boom");
                Audio2.load();  
                Audio2.volume = 0;
                Audio2.play();  
                        
                var Audio3 = document.getElementById("splash");
                Audio3.load();  
                Audio3.volume = 0;
                Audio3.play();          
                
                var Audio4 = document.getElementById("hit");
                Audio4.load();  
                Audio4.volume = 0;
                Audio4.play();                          

                that.setState({allow_sound : true})
            }
    });
}

Then you can call these sounds dynamically from within the code.