Home-brewed Flash MP3 player

I’ve finally finished my own Flash-based MP3 player for my site (specifically for the music section). Let me give you a little tour…

The image you see above is an image (for now) of the new player. Pretty spiffy eh? While you can click on it to load the real player, I strongly advise against it for the time being. Take the time to read through this post first – and you’ll eventually get to play with it with a written commentary below.

I’ve included what I thought to be the more useful stuff a person would normally look for in a player. Aside from the regular stuff (title, play/pause/stop, etc.) here’s some more:1. Comprehensive/Interactive seek bar You notice that the bar has 3 colors. The darkest is of course just a placeholder. The next darkest shows how much of the song has actually loaded. Finally the lightest bar is how much of audio has been played.

1. Playhead time/Total track time I put in information on the playhead because whenever I discuss a song with a friend, and want them to listen to a certain part, it’s always easier to just tell them what time in the song to listen to. So the left side would be the current position of your playhead. The right side is the total track time. In the image, the track time has not been calculated yet, as the song hasn’t finished loading. Unfortunately it would take too much work (if possible at all) to try calculating total track time based on filesize – as the constant needed to calculat depends on the bit-rate of the file its playing.

2. Download / Info links The “note” icon (with the green arrow) is your download icon. Click on it to get the file instead of playing it through the player. It is to be noted however that due to the nature of my player, which can load songs from any location – I cannot implement a force-download script – as you will have to limit/define your “locations.” ¹ Not to mention I’ll be limited to my local server. The little “info” icon on the upper right is only seen on the music section – this is because it sends an AJAX to load the comprehensive song information. Obviously when using the player on other pages (like this post) there’s nowhere to display that info page.

How about we do a little hands-on demonstration? Click on the image to load the actual player and let us continue the tour… ² Of course if you’re reading this in an RSS client, nows the time to visit the post’s actual page.

Now that you’ve clicked on the image and loaded the real player, you should be loading/listening to the song called “Jaded.”

Now try the play/pause button. Pretty simple functions, but try mousing-over the volume icon. Like the seek bar you can also drag or click at any point on that volume meter that just popped up.

Also try clicking the actual volume button to toggle the mute state. Not only does the level bar reflect the mute/unmute state, but it will un-mute to the last set volume. So if you turn the volume down a bit… then mute it. Un-muting it will return you to your last volume setting.

There’s also a little detail that if you drag/click the volume to 0, it will then set it to mute automatically. But when you un-mute it, it will resume full blast. The reason for this is because it’s counter-intuitive to return to 0 volume when returning from a muted state.

The filesize information chooses whether to display in KiloByte or MegaByte. As of now the song obviously shows 3.67MB. Try loading this file, and you’ll see it display in KB ³ With no decimal place (rounded off) to boot!

It’s a lot of these “little details” that actually made me take so long to finish programming this damn thing – but I think everything came together nicely. As the way it performs, and the information it displays is very intuitive.