0

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/

Layne
  • 642
  • 1
  • 13
  • 32

2 Answers2

0

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.

s.krueger
  • 1,043
  • 8
  • 13
0

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.

Alex_B
  • 838
  • 7
  • 13
  • Sorry about that! My original audio file has to be mp3. Here's an updated fiddle with a new mp3 link for testing. http://jsfiddle.net/Pzsax/5/ – Layne Dec 02 '12 at 18:01
  • The code in your fiddle works fine for me in safari 5.1.7. However firefox is coming back with "Specified "type" attribute of "audio/mpeg" is not supported. Load of media resource http://www.largesound.com/ashborytour/sound/AshboryBYU.mp3 failed." type error again. – Alex_B Dec 02 '12 at 18:05
  • Please read the following post about firefox and audio element http://stackoverflow.com/questions/4923136/why-doesnt-firefox-support-mp3-file-format-in-audio – Alex_B Dec 02 '12 at 18:06
  • you could also add a fallback option as described here http://www.html5rocks.com/en/tutorials/audio/quick/ – Alex_B Dec 02 '12 at 18:08
  • It works fine for me on Safari on my computer. It's when I try to play it on an iPhone or iPad that it screws the pooch. – Layne Dec 02 '12 at 18:19
  • All, my apologies. The code did work as expected in mobile Safari. Thanks for everybody's assistance. – Layne Dec 03 '12 at 08:22