Suppose you want to not just link to MP3 files on your site, but you want to also show a tiny flash player next to the link. I needed to do just that, so I modified some code for a brilliant little player called “playtagger” that Deli.cio.us came up with a while back. I love their player, but they have some stuff in it that I didn’t want, so I made a few easy changes and I’ll show you how you can, too.

Here’s what theirs looks like (enlarged and with the parts we don’t want crossed out):

Here’s my version:
Station ID
Note: Firefox doesn’t want you to hear flash audio that is in a hidden container. Anyone know a way around that?

You want to do the same thing? Just follow the steps below. It’s not as complicated as it looks.

1. Copy the files
Just right-click and “Save As” for both of these files:
– http://images.del.icio.us/static/js/playtagger.js
– http://images.del.icio.us/static/swf/playtagger.swf

If you don’t want to use your own Play and Stop images, grab the default ones:
– http://images.del.icio.us/static/img/mp3/play.gif
– http://images.del.icio.us/static/img/mp3/stop.gif

2. Modify the javascript
This is really easier than you would think. Just open up the playtagger.js file in your favorite editor and make the following changes:
- Search for “http://images.del.icio.us/static/img/mp3/play.gif” and replace it with the url to the Play image you want to use.
- Search for “http://images.del.icio.us/static/img/mp3/play.gif” and replace it with the url to the Stop image you want to use.
- Search for “http://images.del.icio.us/static/swf/playtagger.swf” and replace it with the path to where you saved the flash file. (do this in 2 places)
- Search for “img.parentNode.insertBefore(Delicious.Mp3.player, img.nextSibling)” and ADD, on the next line, “Delicious.Mp3.player.style.display=”none”;“
- Search for “100” and replace with “1”

3. Upload all the files to your web directory
You should already know how to do this.

4. Add the code to your header
Now just call the playtagger in your page like this: <script type=”text/javascript” src=”playtagger.js”></script>

Bonus: Be choosey
If you want to pick and choose which mp3 links get a player, just search for the following line:
if(o.href.match(/\.mp3$/i)){
and change it to:
if((o.href.match(/\.mp3$/i)) && (o.label==’mp3player’)){

Then just add label=”mp3player” to any mp3 link that you would like to have a player next to it.

If you can think of any other ways to improve upon this, add them in the comments.