WWW FAQs: How do I play MP3s in my web page on the iPhone?

2009-09-15: Although Apple's Mobile Safari browser is probably still the best browser in anyone's pocket, it does have certain limitations. One of the most important is that it does not support Flash at all. This means that my usual advice for embedding audio on the web is no good for Mobile Safari.

While Mobile Safari does have other audio options, they are somewhat limited. Most importantly, you cannot play background music while the user is reading the page. (There are those who would say this is a good thing.)

However, you can provide the user with access to audio in three ways:

1. Just link to an MP3 file with a normal "a" element, like this:


<a href="mysong.mp3">Play My Song</a>

The MP3 file will play in a full-screen player when the user clicks on the link. They can easily return to the page when they are done.

2. Embed the file with an old-fashioned embed element, like this:


<embed src="mysong.mp3">
</embed>

This works after a fashion. The user will see a "play" button at that point in the page, but the audio will not play until they click the button, and then it will play in a full-screen player. So there's not much of a win here.

Also, there is a bug in Mobile Safari: any content you put between the embed tag and its closing tag should be ignored by browsers that do understand how to play the audio, but Mobile Safari shows it anyway.

3. Embed the file with the new HTML5 audio element:


<audio src="your_two_seater.mp3">
Audio not supported
</audio>

This works out pretty much the same as the embed element: the audio plays in a full-screen player when the user clicks on the "Play" button and stops when they leave that player.

You can script it, like this:


<script>
document.getElementById('myid').play();
</script>

Assuming that you gave your audio element the id myid. But doing so simply forces the user to the full screen player. You can get exactly the same result with far less trouble by just linking directly to the MP3 file with an "a" element.

When you use the audio element Mobile Safari does correctly ignore the content between the opening and closing tags, since it is capable of playing the audio when the user clicks the "Play" button. Older browsers don't support the audio element, so you could tuck alternative players for them (such as Flash players or embed elements) inside it. The latest versions of desktop Safari and Firefox would use the audio element directly and ignore that content.

The Bottom Line

My advice to you: just link to the MP3 with an ordinary "a" element. You get the same results with the simplest markup. You can decorate it with your own fancy play button if you wish. There is currently no benefit to using more complex markup for audio on an iPhone.

But cheer up: background audio of any kind is a much-hated nuisance in 99.9% of cases. If your visitors really want to hear it, they'll click on the link. If they don't want to hear it... it's better not to bug them!

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.