Yahoo! Music – Easy, semantic, unobtrusive music badges

Let’s say you want to link to a song on the internet. Let’s also say that you want your users to easily listen to that music. Further, let’s say you want people to find and enjoy the music without having JavaScript enabled.

Is this asking too much?

Yahoo’s Christian Heilmann has been advocating layered, semantic badging.

Yahoo Music badges and the simple href

Yahoo! Media Player has taken this approach to embedding music. You simply put a link to a music file in your site, insert the music JavaScript and away you go. The Music Badge Twiki also shows how you can extend the functionality with basic HTML elements, such as adding a title attribute or image inside the link.

Here’s an example of the badge in effect. Orca live at the Casbah, 1992 I made a bootleg recording of Orca, a San Diego supergroup circa 1993. I’m simply going to create a basic link to the music file and include an optional image from flickr. The JavaScript will use that information for the player to appear. You’ll see page loads with a little play icon next to the link. There’s also a small player on the side of the browser. Click on either and you’ll see a media player appear in your browser with the music controls.

Here’s the code:

Orca live at the Casbah, 1992