Three Free & Easy Web Audio Players
Pages: 1, 2, 3

Yahoo Media Player: Customizable up the Wazoo

Yahoo took the opposite approach to Delicious: you can still add the Yahoo Media Player to your site with a single line of code, but you can also customize the player extensively. Here's the code:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

And here's the bookmarklet. Drag this link (Y! Player) to your browser toolbar and you'll be able to insert YMP buttons on other sites you visit. Note that version 2 of YMP is due out any day, so this bookmarklet may stop working. Check the bookmarklet developer's site for updates.

The initial Play button looks like a rectangle (YMP version 1) or circle (YMP version 2), and appears next to all supported audio links on the page. When you click it, a floating player slides open, filled with controls and information:

The Yahoo Media Player slides into view when you click an audio link, automatically creating a playlist of every supported file on the page. Here it even made a playlist of my m3u playlist. (Click to enlarge.)

One of YMP's neatest tricks is creating a playlist of everything on the page automatically. You can override the default order by adding a tabindex attribute to your audio links, though, as shown here:

<a href="song1.mp3" tabindex="2">second song</a>

<a href="song2.mp3" tabindex="1">first song</a>

Put an image tag inside the audio link and YMP will embed the image in the player, shrunken to fit. You can hide the initial image with a CSS display:none command:

<a href="Feelings.mp3"><img src="Manilow.png" alt="" style="display:none" />Feelings</a>

Add a title attribute to the link and the title text shows up in the player as the song title. Furthermore, clicking on the title or the image will launch a Yahoo search for that phrase — "Love Song" in the example below:

<a href="LoveSong.mp3" title="Love Song">click me, you fool</a>

If you're an Amazon Affiliate, you can add one more line of code to your page and the player will sprout a Buy button. When visitors click it, they're taken to Amazon.com, with a search string that includes the song title. If they then buy the item or anything else, you get a referral fee. I used this to sell a book on one of my sites by putting the title tag in the form title="Book Title by Author Name".

There are many other clever hacks as well. You can alter your MP3 file names so that YMP can find them but downloaders can't. You can even skin the player. Developer Lucas Gonze (hear our podcast interview) explains, "The player is designed to be customizable and extensible via CSS and JavaScript, and you can always reverse-engineer it just by looking at the source code. That's what distinguishes it from Flash players, and it's not an accident."

The easiest way to explore YMP, Gonze says, is to insert <script type="text/javascript" src="http://mediaplayer.yahoo.com/latest"></script> into a webpage and open up Firebug. (Currently, that URL points at version 2 of the YMP script.) If you're not at that level of JavaScripting, a better starting point would be the YMP wiki and forum, where you'll find lots of examples on hacking it.

Still missing, unfortunately, is a playback-position slider. But that's on the roadmap. Version 2 already has some slick new features, including the ability to create playlists of Rhapsody songs.

Yahoo Media Player Format Test

Depending on when you see this, several of the audio links below should have either rectangular (v1) or circular (v2) Play buttons beside them. YMP version 1 works with MP3 links; version 2 adds WAV, WMA, and m3u support.

1. MP3 (44.1kHz, 128kbps mono + image and title)
2. MP3 (32kHz, 128kbps mono)
3. MP3Pro (44.1kHz, 64kbps stereo + image)
4. MIDI
5. AIFF
6. WAV
7. WMA
8. Ogg Vorbis
9. m3u