Adding Yahoo! Media Player to Your Web Page
Note: This post is one of a series of posts that breaks out the individual topics of my presentation “Pimp My Web Page” given at WebVisions 2009. You can see the fully pimped page that includes the code detailed below at http://pimpedblog.harmonicnw.com. Code tested for XHTML 1.0 Strict pages on IE 6 and 7 for PC, Firefox 3 for PC/mac, Safari 4 public beta for mac.
I first saw the Yahoo! Media Player on pampelmoose.com, an excellent music blog run by Portlander Dave Allen. I thought it was a really elegant way to integrate a player into a web site. As it turns out, it is also easy to set up and free!
To use the player, put the following code in <head>:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
The media player will then automatically recognize links to mp3 files in your HTML and add them to the playlist.
The Basics
The Yahoo! Media Player should really be called Yahoo! Music Player as all it does at the moment is play mp3 audio. But it does so very well: the player adds a little play/pause button next to your mp3 links and then adds the song to the player that appears as a tab in the lower left part of the screen. The player itself is a Flash application.
You can associate album art to a song within the player by putting an <img> inside of your anchor link. The current version of the player uses a 46 pixel by 46 pixel image. You can add the style display:none to hide the image on the page. For example:
<a title="Nearly" href="http://pimpend.harmonicnw.com/media/nearly.mp3"><img style="display:none" src="http://pimpend.harmonicnw.com/images/myv1.jpg" width="46" height="46" alt="Metaphorically Yours [vol 1] album cover" />Play 'Nearly'</a>
By default, the player displays the same text as you have in your HTML as the title of the song. If you want to make the title something different, you can add a title value in your anchor tag. In the above example, the title will appear as “Nearly.”
For more information on using the Yahoo! Media Player, go check out the documentation. They explain everything there as/more clearly than I can.
What if I Don’t Want Users to Download My MP3s?
Since you must make the songs available in your page HTML for the player to work, that means that any mp3s you link to are going to be fully downloadable by the user. I don’t know of a way around this. If you don’t want people downloading the audio, consider using a different player.
Update 6/10: Just got a comment from Lucas who posted a link to a method of obfuscating the mp3 location. The audio file is still downloadable, but you’d need to be somewhat web savvy to know how to get at it.
Hiding the Play/Pause Button
You can use the following CSS rules to hide the play/pause button:
body a.ymp-btn-page-play em.ymp-skin,
body a.ymp-btn-page-pause em.ymp-skin,
body .ymp-skin {
display: none;
}
body a.ymp-btn-page-play,
body a.ymp-btn-page-pause {
outline: none !important;
padding-left: 0 !important;
position: relative !important;
}
Local Problems
You may run into some problems testing the player on your computer.. as in the music files might not play. This is due to issues with Flash loading files from your local hard drive. Try adjusting your Flash settings to make things work out properly. If you can’t get it to work out, just have faith that when you test it out on your actual server the songs will play. Even if the songs don’t play, the player should at least show up, add mp3s to its playlist and display album art.
You can use audio and album art files that are located on other web sites. If you test out the example HTML in The Basics section, you’ll be using an audio and image file from the harmonicnw.com domain.