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:

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.