So you may have noticed in the last post I embedded an mp3 player so you could play Christopher’s songs without flicking to another page. Having waded through many MANY mp3 players, I thought it might be helpful for others to have this exploration stored somewhere.

I had a few requirements:

- Free
- Must be easily embeddable
- Must not be ugly
- No branding

After looking through a few of these players, I added a few more requirements:

- Volume adjustable
- Able to play multiple mp3s
- Able to view to the track name

The last three are features you’d expect from any player that you would use to listen to your sounds on a regular basis. I didn’t think I’d have to add them as requirements, but there you go.

The first couple don’t meet my requirements at all, but as not everyone is as fussy as I, maybe you’ll find this useful.

1. Odeo MP3 Player

This MP3 player is easily embedded. Simply copy/paste some code into the html, and point it to where the MP3 file is stored. You’ll need to define the duration for it to calculate how far into the song it is, but otherwise it’s fairly simple.

Unfortunately, its branded, will only play one track, and is not volume adjustable. Still, its pretty cute and super easy to use.

The Code:

You will need to replace ‘MP3_URL’ and ‘DURATION’ with the appropriate values.

2. Google Reader

This player is as easy to use as the Odeo Player, but better. It has volume controls, is branding free, and automatically detects the duration of the MP3 file.

Not particularly pretty though, is it. And it still only plays one track, and there is nothing to let you know what the track name is.

The Code:

You will need to replace ‘MP3_URL’ with the appropriate value.

3. Yahoo! MP3 Player

When I first came across this player, I liked what I saw. It’s customisable, so you can make it as pretty as you like. It has volume control, shows the track and has those handy next/previous arrow buttons, so you must be able to point it to multiple MP3’s, right? And be able to play multiple mp3’s?

Uhh, not quite. You can set set ONE MP3 track. If you’d like to make use of that handy multiple MP3 file functionality, you have to go to Easy Listener and have them crawl an html page looking for mp3 files. Not so handy when you don’t really want the files to be available from an html page, and you can’t point it to a directory either.

Still, it’s easily embedded. Like the other two players, you simply copy/paste the code and point it to the MP3 file. Unfortunately it’s branded, and still doesn’t play more than one track easily.

The Code:

You will need to replace ‘MP3_URL’ with the appropriate value.

4. Audio Player Wordpress Plugin

Here the players start to get a little more complex, but not so much. This particular Plug In is from 1pixelout. It requires uploading a javascript audio player and flash player into the directory where the mp3’s are stored, and then it’s just a matter of copying and pasting the appropriate code into the html.

Unfortunately I’m not going to provide those files for you, but you can get them here, along with a pretty sweet tutorial and a working example. Here is a pretty picture for you, though:

While this solution is easily embedded, and is super cute (just look at the sliding action!) it’s still not what I’m looking for. While the tutorial suggests you can add more than one MP3 file, that is not actually the case, and there is still no track name. Alas.

5. Fabricio Zuardi’s Music Player

This MP3 is similar to the Wordpress Plugin, in that you will need to upload some files to your server. Again,I’m not going to provide the files – you can find them here courtesy of creativetechs.com.

This player has all the features I was looking for (apart from the Not Ugly one, still, it could be worse!) and more – it allows you to upload cover art for each MP3 file. Unfortunately it doesn’t load one if none are playing, but as it’s an extra I let it slide.

The only real problem I had was that embedding it was slightly tricky. I had issues reading in the playlist.xspf file, but by changing the format to playlist.txt and altering the appropriate embedded html code it worked fine. Also, the cover art won’t show unless it is exactly 130×130px.

While this player is fine for here and now, if I ever decide to use something similar for a clients site (say, like christopher-reed.com then I think I will simply build my own player.

If anyone else comes across a nice, not-ugly MP3 player that meets my requirements let me know!

Tags: design