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 at the Casbah, 1992Orca 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 at the Casbah, 1992Orca live at the Casbah, 1992



, , , ,




3 responses to “Yahoo! Music – Easy, semantic, unobtrusive music badges”

  1. Lim Chee Aun Avatar

    Cool. I’m wondering how the music Javascript looks like?

  2. Ted Avatar

    here’s the javascript link:

  3. Lucas Gonze Avatar

    I’m happy that the community is noticing this aspect of our work on the media player.

    An interesting benefit of our approach is that the player degrades really gracefully. Even if the player doesn’t work at all in some context, the fact that there is a plain old link to the media enables users to do what they need. Even in a console browse like Lynx that link can do what the user needs.

Leave a Reply

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