Using Yahoo! Media Player on a dynamic page

Recently I added paging to my churches podcast page, the steps on how I did this are part of another post that I aim to finish at some point, however I thought I'd quickly blog tonight some tips on using the Yahoo! Media Player on a dynamic page.

Originally the podcast paging was causing a full postback which reloaded everything on the page, this felt dirty so tonight I reconfigured my podcast control to make use of the ASP.Net Ajax UpdatePanel. The paging worked great however the WMP wasn't updating which left the playlist out of date and the new podcasts without play buttons.

The issue was that by default the YMP JS fires on load and the ajax update wouldn't trigger this. Moving the script to load as part of the ajax updated content also wouldn't help this, all I would be doing would be reloading the source, not actually solving the problem.

I turned to the YMP wiki however I didn't really turn anything up that was of great use.

I knew that the YMP scraped the page on load for MP3 files and then built up its playlist, so it was a case of finding this scrape function, clearing the current playlist and then triggering the scrape.

Firebug came to my rescue, I add a watch to the YMP object YAHOO.music.WebPlayer and found that it had quite a few functions available if you know they are there, I have listed a few useful ones below:

• asyncLoadPlayer() - if the player is loaded after the window has loaded this will manually load the whole player
• clear() - clears the playlist
• pause() - pauses the item playing in the media player
• play() - plays the current item in the playlist
• scrape() - scrapes the page for mp3's and adds them to the playlist
• shutdown() - shutsdown the media player and releases all resources
• startup() - starts the player up, not sure if this is useful as asyncLoadPlayer()is probably better
• stop() - stops the item playing in the media player

So for my case with a dynamically loading page I added some simple JavaScript to the content that is loaded in, this JavaScript first ensures YMP has already been loaded and then clears the playlist and scrapes the page for new media items for adding to the playlist.

function PageLoadedEventHandler() {
  if(YAHOO.music.WebPlayer.loaded){      
    YAHOO.music.WebPlayer.clear();      
    YAHOO.music.WebPlayer.scrape();
  }
}

I did ponder about leaving out the clear, that way as you page through the podcasts the playlist simply grows so you can listen to any of them, I decided against this but I hope you can see what you can do.

So there wasn't much to it, I am hoping Yahoo! will properly document the functions available within the YMP as I would have saved alot of time faffing with FireBug and the watch window. I hope this helps someone, I'm now thinking on how I could use my own player interface and utilise YMP to power it... any way thats something for a rainy day