Want to play MP3s on your site? I did. The unpredictable behavior of audio links annoyed me so much that I finally broke down and wrote my own player. And then I wrote several more. An enterprising bloke in Australia even copied my code and started selling it as his own. But web audio is a treacherous world, and we both learned that what worked well on our own browsers often sputtered horribly on other people's.

Fortunately, the ubiquity of Adobe Flash has created a dependable foundation for online audio, spawning a swarm of inline players, buttons, and widgets. Indeed, the most comprehensive player out there is called Anarchy.

But many of these players require complex setup, lack the controls or style you want, and cost money. In this article, I'll look at two free players you can add to your own site with a single line of code. One, Delicious Play Tagger, is also deliciously simple for you and your visitors to operate. The other, Yahoo Media Player (YMP), is highly customizable. Version 2 of YMP, currently in beta, even overcomes a big limitation of pure Flash players by adding support for other common music formats like WMA and WAV.

Even better, both come with bookmarklets, tiny JavaScript links you can add to your browser toolbar and click to embed the players in any MP3 page you visit.

Inspired by Play Tagger and YMP, I revisited my JavaScript-based web audio player. It now supports seven file formats (MP3, AIFF, WAV, WMA, Ogg Vorbis, m3u , and MIDI — at least on my computer ;-). It also allows you to embed a photo and a caption in the pop-up player window, and it no longer requires messy JavaScript links — like Play Tagger and YMP, my player now works with normal <a href="file.mp3">My Song</a> audio links. I'll explain the details below.

Play Tagger: Deliciously Easy

Delicious.com, the social bookmarking site, created an MP3 play button with a unique twist: when you click it, the button expands to offer a "tag this" link so you can share your discovery. I used it in my blog recently to play a bunch of MP3s:

Play Tagger Example

Clicking the Play button again stops playback; clicking any other Play button stops the current song and starts the new one. Simple!

Adding Play Tagger to your site is simple as well. You just insert the following line anywhere on the page.

<script type="text/javascript" src="http://static.delicious.com/js/playtagger.js"></script>

This script tag then grabs the much longer Play Tagger code from Delicious's site and inserts it into your page. When the page loads, the code creates the tiny Play button in front of each MP3 link on the page.

Play Tagger is great for quick, no-hassle playback, but it gives no indication of the song's duration or current playback position. That makes it tough to say, "Listen to the guitar solo at 1:32." There's no volume control or location handle to scroll through the song; playback always starts from the beginning. And as mentioned, Play Tagger plays only MP3s. Sometimes simplicity is just what you want, though. I use Play Tagger all the time.

Play Tagger Format Test

Here's a collection of audio files in different formats. The MP3 links below (but not the others) should have the little Play Tagger button in front. If you have an older version of Flash, you may hear examples 2 and 3 playing back at the wrong speed. (Flash expects MP3s to be encoded at integer multiples of the 11.025kHz sampling rate, e.g., 22.05 and 44.1kHz). Clicking the other links will demonstrate how unpredictable web audio is — you may get anything from a plug-in warning to a triggered download.

  1. MP3 (44.1kHz, 128kbps mono)
  2. MP3 (32kHz, 128kbps mono) — to test if playback rate changes
  3. MP3Pro (44.1kHz, 64kbps stereo) — note dullness of sound; high frequencies require a special decoder
  4. MIDI
  5. AIFF
  6. WAV
  7. WMA
  8. Ogg Vorbis
  9. m3u

Here's some good news though: if you drag this bookmarklet link (playTagger) to your browser toolbar, you can instantly add Play Tagger buttons to almost any MP3 page you visit. See the site for details.

Yahoo Media Player: Customizable up the Wazoo

Yahoo took the opposite approach to Delicious: you can still add the Yahoo Media Player to your site with a single line of code, but you can also customize the player extensively. Here's the code:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

And here's the bookmarklet. Drag this link (Y! Player) to your browser toolbar and you'll be able to insert YMP buttons on other sites you visit. Note that version 2 of YMP is due out any day, so this bookmarklet may stop working. Check the bookmarklet developer's site for updates.

The initial Play button looks like a rectangle (YMP version 1) or circle (YMP version 2), and appears next to all supported audio links on the page. When you click it, a floating player slides open, filled with controls and information:

Yahoo Media Player
The Yahoo Media Player slides into view when you click an audio link, automatically creating a playlist of every supported file on the page. Here it even made a playlist of my m3u playlist. (Click to enlarge.)

One of YMP's neatest tricks is creating a playlist of everything on the page automatically. You can override the default order by adding a tabindex attribute to your audio links, though, as shown here:

<a href="song1.mp3" tabindex="2">second song</a>
<a href="song2.mp3" tabindex="1">first song</a>

Put an image tag inside the audio link and YMP will embed the image in the player, shrunken to fit. You can hide the initial image with a CSS display:none command:

<a href="Feelings.mp3"><img src="Manilow.png" alt="" style="display:none" />Feelings</a>

Add a title attribute to the link and the title text shows up in the player as the song title. Furthermore, clicking on the title or the image will launch a Yahoo search for that phrase — "Love Song" in the example below:

<a href="LoveSong.mp3" title="Love Song">click me, you fool</a>

If you're an Amazon Affiliate, you can add one more line of code to your page and the player will sprout a Buy button. When visitors click it, they're taken to Amazon.com, with a search string that includes the song title. If they then buy the item or anything else, you get a referral fee. I used this to sell a book on one of my sites by putting the title tag in the form title="Book Title by Author Name".

There are many other clever hacks as well. You can alter your MP3 file names so that YMP can find them but downloaders can't. You can even skin the player. Developer Lucas Gonze (hear our podcast interview) explains, "The player is designed to be customizable and extensible via CSS and JavaScript, and you can always reverse-engineer it just by looking at the source code. That's what distinguishes it from Flash players, and it's not an accident."

The easiest way to explore YMP, Gonze says, is to insert <script type="text/javascript" src="http://mediaplayer.yahoo.com/latest"></script> into a webpage and open up Firebug. (Currently, that URL points at version 2 of the YMP script.) If you're not at that level of JavaScripting, a better starting point would be the YMP wiki and forum, where you'll find lots of examples on hacking it.

Still missing, unfortunately, is a playback-position slider. But that's on the roadmap. Version 2 already has some slick new features, including the ability to create playlists of Rhapsody songs.

Yahoo Media Player Format Test

Depending on when you see this, several of the audio links below should have either rectangular (v1) or circular (v2) Play buttons beside them. YMP version 1 works with MP3 links; version 2 adds WAV, WMA, and m3u support.

  1. MP3 (44.1kHz, 128kbps mono + image and title)
  2. MP3 (32kHz, 128kbps mono)
  3. MP3Pro (44.1kHz, 64kbps stereo + image)
  4. MIDI
  5. AIFF
  6. WAV
  7. WMA
  8. Ogg Vorbis
  9. m3u

Batmosphere Multiplayer: DIY Gone Batty

Batmo Multiplayer
The player running in Firefox 2 on the Mac. (Click to enlarge.)

Here's my own stab at making an online audio player. Rather than Flash, it relies on built-in versions of QuickTime and Windows Media Player, so if your computer's set up right, it will play many more formats than Flash players. This player is very much a work in progress, but I learned a lot by puttering around with it, so I thought I'd share some of my discoveries.

Whereas Play Tagger and YMP insert a button in front of MP3 links, the Batmosphere Multiplayer actually rewrites the links themselves into triggers for pop-up players. The link's title tag becomes the caption, its ID becomes the headline, and if you insert an image tag in the audio link (before the text), the player embeds the image in the pop-up window as well.

I used a pop-up rather than an inline or floating player so that visitors can continue to hear songs as they surf between pages. You can see what it looks like at right. Notice how the window height scales to the size of the photo; Yahoo Media Player shrinks the image to a square. I also used styled text rather than an image to make the icon; that lets it scale with the surrounding text.

Here's the link format. As with YMP, you can hide the source image with a CSS display:none command:

<a href="MP3.mp3" title="This is a 44.1 kilohertz MP3." id="A Song for You">
<img src="demo-image.jpg" style="display:none;" />My Song</a>

Try it (may not work in Internet Explorer):My Song

Here are four variations of the link, starting with plain audio and adding features via tag attributes:

Batmosphere Multiplayer Format Tests

In the external JavaScript file that powers this player, I set up definitions to handle each of the audio file formats below. Whether they play back on your computer depends, unfortunately, on which plugins you have installed, but my Mac, equipped with QuickTime and the Flip4Mac and Perian extensions, played 'em all. Firefox on Windows Vista played everything but Ogg.

  1. MP3 (44.1kHz, 128kbps mono) — tall image
  2. MP3 (32kHz, 128kbps mono) — square image
  3. MP3Pro (44.1kHz, 64kbps mono)
  4. MIDI — wide image, no headline ID
  5. AIFF — audio only
  6. WAV — long caption
  7. WMA
  8. Ogg Vorbis
  9. m3u (curly apostrophe should be encoded in title as &#8217;)

Under the Hood

You can examine the complete script at http://cachefly.oreilly.com/digitalmedia/2008/08/batmomultiplayer.js. In the script itself, I've commented briefly on most of the interesting techniques, but I'll walk through a few of them here. The script opens with this work-in-progress disclaimer:

// To do: move embedding function to external script to fix IE's 
"Click to Activate" error. Detect image height for Opera.

As mentioned, the script is working for me in Firefox and Safari on both Mac OS X and Windows Vista. It's not working at all in Internet Explorer, the turd in the punchbowl of online media. (Viewer discretion advised on that link.) That breakdown is probably due to a "security" issue, like IE's notorious "Click to Activate this Control" demand. Please let me know if you spot my error.

The Opera challenge is more interesting. I designed the script to embed an image in the pop-up window, scaling it to 250 pixels wide. In order to calculate how tall the resulting window needed to be, I grabbed the original dimensions of the image and multiplied their ratio by 250:

New Height = (250 x Old Height)/Old Width

I got the dimensions by calling the first child of the audio link (i.e., the image object inside the link tag), and then adding .height to the end of the variable:

o.setAttribute("onclick","javascript:BatPop(this.id,this.title,this.href,
this.firstChild);return false;"); // window name, caption, sound URL,
image object (in link)
...
imgScaleHeight = (imgwidth*imgObj.height/imgObj.width);

But Opera couldn't find the height of the image object. I'm guessing I'll need to load the image first and then detect its height.

The function that detects and modifies audio links is based closely on Play Tagger. I basically added more file extensions; Play Tagger modifies only .mp3 links:

var links=document.getElementsByTagName('a');
for (var i=0,o;o=links[i];i++){
if(o.href.match(/\.mp3$/i)||o.href.match(/\.wav$/i)
||o.href.match(/\.aif$/i)||o.href.match(/\.aiff$/i)
||o.href.match(/\.m3u$/i)||o.href.match(/\.wma$/i)
||o.href.match(/\.mid$/i)||o.href.match(/\.ogg$/i)){
The rounding function is handy; I implemented it after discovering Safari couldn't deal with fractional pixel heights:

imgheight = Math.round(imgScaleHeight * Math.pow(10,0))/Math.pow(10,0);

The embedding code is based on my earlier players. The big discovery here was that specifying the MIME type application/x-ms-wmp forces Firefox to use the Windows Media Player plugin, which is what I wanted. And adding the ClassID parameter below does the same for Internet Explorer:

PlayerWin.document.write("<object width='"+imgwidth+"' 
height='65' classid='clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6'>");

Go Make Some Noise

So, there you have it: from the simplicity of Play Tagger to the extensibility of Yahoo Media Player and the crazed tinkering of the Batmosphere Multiplayer, there are more ways than ever to be heard online. Go out and make some noise, and please share your own web audio tips below.