How to get mp3 files to play in iPhone Safari web browser?

Question

How can I get an MP3 audio file to play in iPhone Safari (OS 3.1)?

Currently, I am generating HTML eg

<a href="file.mp3"><img src="sound.png" alt="Play audio"/></a>

to play the file on clicking on the nested image. This works on Safari on OSX, but not on the iPhone. There, the content of the file is shown as text, but it does not appear to be a mime-type problem when checked with Live HTTP Headers from Firefox.

I have found approaches referenced here . These require the Safari Plugins setting to be on in the preferences, which is why it did not previously work for me.

Answer 1

I imagine your best bet is to invoke a quicktime object in your web page. For playing mp3 files, your best bet is to serve a Winamp .pls style playlist with mimetype audio/x-scpls that serves as a signpost to the mp3 files. Create an embedded quicktime object around it. Try the docs for quicktime:

http://www.apple.com/quicktime/tutorials/embed.html

Answer 2

If you manage to get it working, it will play in the QuickTime Application (Full screen).

The HTML5 sound API is not available in the current iPhone OS (3.XX), but in OS 4.XX it will be available (at least playing video without launching the full screen player)

Answer 3

Use the HTML5 audio tag with an mp3 in it. http://www.w3schools.com/tags/tag_audio.asp

Answer 4

Hey this simple html5 tag will do the trick

<audio src="someUrlToContent" controls="controls"> </audio>

what this does on the iPhone is bring up a play button that when pushed will go to quicktime. on the iPad, a scrubbing play control will come up with a play/pause button. on both, the play control will size to the div they are in

Answer 5

As jottos points out, iPhone 3.x does not support HTML5 audio. If you want audio in the early versions of iPhone OS, you must use Quicktime specific code. This example actually embeds an entire playlist (not just a single song). If you want a single song, drop the qtnext parameters:

<embed
    src="riding-with-the-king.jpg"
    href="songs/01-riding-with-the-king.mp3"
    artworkdata="riding-with-the-king.jpg"
    type="audio/x-mp3"
    target="myself"
    scale="1"
    controller="false"
    loop="false"
    autoplay="false"
    allowembedtagoverrides="true"
    height="500"
    width="500"
    qtnext1="<songs/02 Ten Long Years.mp3> T<myself> E<controller=true autoplay=true loop=false>" 
    qtnext2="<songs/03 Key to the Highway.mp3> T<myself>" 
    qtnext3="<songs/04 Marry You.mp3> T<myself>" 
    qtnext4="<songs/05 Three O'Clock Blues.mp3> T<myself>"
    qtnext5="<songs/06 Help the Poor.mp3> T<myself>"
    qtnext6="<songs/07 I Wanna Be.mp3> T<myself>"
    qtnext7="<songs/08 Worried Life Blues.mp3> T<myself>"
    qtnext8="<songs/09 Days of Old.mp3> T<myself>"
    qtnext9="<songs/10 When My Heart Beats Like a Hammer.mp3> T<myself>"
    qtnext10="<songs/11 Hold on I'm Coming.mp3> T<myself>"
    qtnext11="<songs/12 Come Rain or Come Shine.mp3> T<myself>"
>

Answer 6

I had issues with mp3 on my local development system (Linux/apache2). I was only apple to play .OGG files in both Firefox(8) and Chrome(15) from the local file system. If I used the audio tag to link to a remote .MP3 or .OGG file either would work though? I am not sure why this is the case and since most of my local music files are MP3 it took me awhile to figure out that it was the file format that was the problem.