Yahoo's Media Player

Posted: September 21, 2008

This week, I began setting up my new band’s website and I wanted to find a media player to add to the site to play a few songs we had recorded as a demo. I started with the usual suspects: JW FLV Media Player, XSPF Web Music Player, Flash MP3 Player, and another Flash MP3 Player. However, I found that all of these players had some sort of shortcoming, whether it was the colours couldn’t be changed or the dimensions of the player were meant for a playlist of 12 songs and not three.

In my search for something better, I came across Yahoo’s Media Player. With just one simple line that references a Javascript file in the <head> of your page, the script looks for all anchor tags that link to an MP3 file. It then places a small ‘play’ button icon in from of the link and adds the MP3 to the playlist. The MP3 player appears at the bottom left of the screen and expands when a track is playing.

Friends of Thieves Website

The media player appears in the bottom left of the screen.

Yahoo Media Player

Customizing the Media Player

You can even customize some settings for Yahoo’s Media Player. For example, if you add tabindex (ie <a href=”mysong.mp3″ tabindex=”1″>My Song</a>), you can set the order the song will appear in the playlist. By default, the playlist is ordered based on the order the links appear on your webpage. You can also add a <img> between your anchor and the graphic will be loaded into and resized by the player. This is handy for embedding album art right into the player.

The other great advantage to using this media player is Yahoo looks after the code and is responsible for updating the code to be compatible with any new browsers that are released. Therefor, you shouldn’t have to worry about ever having to upgrade, in theory.

Yahoo’s Media Player is a great, simple way of adding an MP3 player to your website. Now, if they could only find a way to keep the music player while a visitor browses multiple pages on a site.

Leave a Reply

Your email address will not be published. Required fields are marked *