Getting audio to play in mobile safari?

Question

It sure seems unreasonably difficult to get audio to play in mobile Safari on my iPad. Clearly I'm messing up somewhere. I read that you have to have a play action, which I've done, yet it doesn't play the audio. I just want to click an image button and play an mp3. What I've built works fine on my desktop, just doesn't play in mobile Safari.

$(".playback").click(function() {
    var selectedAudio = $(this).attr("id");
    var myAudio = document.getElementById(selectedAudio + "-audio");
    myAudio.play();
});​

Here's a fiddle I used for testing. Many thanks!

http://jsfiddle.net/Pzsax/2/

Answer 1

Just as a quick info, your fiddle isn't working in Firefox 17.

Firebug throws:

The specified "type" attribute of "audio / mpeg" is not supported. Loading the media resource has failed.

Answer 2

I have just changed the type of audio to "audio/ogg" it stated to work in Firefox. Try the same in Safari. Also you could try adding a secondary source of audio in a different format "audio/mpeg" .mpeg files.