May 14, 2010 at 4:22 PM by Dr. Drang
In last night’s post, I included some code to embed a little audio player in the page. There are many ways to do this, and I spent entirely too much time exploring them to ever want to do it again. So here’s (almost) everything I know on the subject.
You don’t really have to put a player on the page. You can instead just use a regular old link, like this one to a short MP3 file. The HTML code is
<a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">a short MP3 file</a>
This is so simple that you can even do it in Markdown
[a short MP3 file](http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3)
or Textile or any of the other simplified markup systems. When the user clicks on the link, she’s taken to a new page with a player.
Because I’m on a Mac, the player that appears is QuickTime.1 The player that appears for you will depend on your operating system, your browser, and how your browser is configured (via plugins) to handle MP3 files. The URL of the MP3 file will be in your browser’s toolbar.
This method has the great advantage of always working, no matter what the browser and operating system, as long as the browser understands the file format and has a plugin for it. MP3 files should work on any browser, anywhere. The disadvantage, of course, is that the player isn’t embedded in your page. You can make things a little nicer by adding
target="_blank" to the link:
<a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" target="_blank">a short MP3 file</a>
This link will look the same, a short MP3 file, but will put the player in a new window (or perhaps a new tab) when the user clicks it. Since the new window will obscure the page, there isn’t much advantage to it; but it does suggest the next possibility.
The link will still look the same, a short MP3 file, but the player that pops up when you click it will be less obtrusive.
Still, it’s not as nice as having the player in the page.
and uses this code
<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#fff" wmode="window" flashvars="playerMode=embedded" />
The URL of the MP3 is the
audioURL parameter; you can fiddle with the width and height and color as you see fit.
It’s a nice enough looking player, but it has two problems:
- It uses Flash, which won’t work on iPhoneOS devices.
- It uses the
<embed>tag, which, although accepted by lots of browsers, isn’t standard (X)HTML.
The code for this player is
<object type="audio/mpeg" data="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" width="400" height="40"> <param name="src" value="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> RSS and some browsers won't show the player that's supposed to be here. <a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">Click this instead.</a> </object>
This will work with iPhoneOS but is not without problems:
- It won’t work in older browsers, like IE6. That doesn’t bother me on this blog, but might be a killer on a commercial site. This is somewhat mitigated by its degradation to whatever non-
<param>HTML is placed between the opening and closing
<object>tags. As you can see, I put a simple HTML link to the MP3 in that spot so people with older browsers can still get to the audio.
It won’t necessarily come through in an RSS feed. Google Reader shows the degraded text inline, but is nice enough to put up a player at the end of the item.
I don’t know what other RSS readers will do.
- Different browser plugins use different parameters, and you have to account for that. The
autoplayparameter is for QuickTime, the
autoStartfor Windows Media Player and Real Audio.
This, finally, is the Holy Grail of embedded audio. One tag,
<audio>, that lets you embed a player in your page. It definitely won’t work on older browsers, and by “older” I mean “even the current version of Internet Explorer.” But it is seductively simple. This code
<audio src="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" controls style="width:400px"> If you see this text <a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">click here</a> to listen to the audio. </audio>
will give you this player:
What’s that? You’re using Firefox? The latest version? And there’s no player? Just something that looks like this?
Well, that’s because Firefox won’t play MP3s natively. Patents, don’t you know. You’ve read Gruber’s posts about Firefox and H.264 v. Ogg Theora on the video side? Same issue on the audio side, but with MP3 v. Ogg Vorbis. The galling thing is that it puts up that gray box instead of degrading to the old-fashioned link.
If you want to serve up
<audio> on Firefox, you’ll have to make an
.ogg file and dirty up that nice clean tag:
<audio controls style="width:400px"> <source src="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.ogg" /> <source src="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" /> Older browsers will have to <a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">click here</a> </audio>
Which should work in Safari and Firefox.
This page says you have to list the
.ogg before the
.mp3 or Firefox won’t work, but that bug has been fixed. I can order them either way with Firefox 3.6.
As I write this, I have no idea how an RSS reader will treat the
<audio> tags. But I’ll find out as soon as it’s published.
Both Google Reader on my Mac and Reeder on my iPhone show the
<audio> player inline. So that’s better than the RSS behavior of
There’s no single, generally accepted way to embed an audio player.
- Flash works well if you don’t care about mobile users or people with Flash blockers.
<audio>tag is fine if you don’t care about IE users (or if you do care and just want to rub it in), but it forces you to provide an
<object>tag gives most users a player and everyone a chance to hear the audio somehow. It’s probably the best compromise for most sites.