Next post Previous post

Sound on a web page

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.

Standard link

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.

Simple JavaScript

With JavaScript you can create a new window and control its size so it doesn’t cover much of your page. The code is

<a href="javascript:newWindow=window.open('http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3','Sound', 'height=50,width=400')">a short MP3 file</a>

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.

Flash

There are dozens of Flash-based audio players that let you put a player in your page. In the past, I’ve used one from Google that looks like this

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:

  1. It uses Flash, which won’t work on iPhoneOS devices.
  2. It uses the <embed> tag, which, although accepted by lots of browsers, isn’t standard (X)HTML.

Objects

A standards-compliant way of embedding an audio player in your page is with the <object> tag. This is what I used in last night’s post, and it looked like this:

RSS and some browsers won’t show the player that’s supposed to be here. Click this instead.

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:

  1. 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.

  2. 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.

  3. Different browser plugins use different parameters, and you have to account for that. The autoplay parameter is for QuickTime, the autoStart for Windows Media Player and Real Audio.

HTML5

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.

Update 5/14/10
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 <object>.

Summary

There’s no single, generally accepted way to embed an audio player.

  1. In fact, Safari—which is where the screenshot comes from—puts an HTML5 wrapper around the file URL, which you can see if you have Safari’s Developer Tools enabled and choose Show Web Inspector from the Develop menu. ↩

  2. Unless there’s a Firefox plugin or Greasemonkey add-on that can handle MP3s. ↩

Next post Previous post