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

An Update to the YMP Web Control

Tonight I was going over my YMP Web Control that I released in December. However I noticed that I could end up having multiple controls render onto a page. This could happen by having a control in my master page and then including it in a web user control, or countless other situations. This then results in your page not validating and the JavaScript going astray. So tonight I altered the code, it now checks to see a YMP control has already rendered and if so it doesn't render. This version should replace the previous version and works in exactly the same way. Download the new version.

Yahoo! Media Player Web Control

Last week Yahoo! released there new Yahoo! Media Player and I had a little play with it, and I must admit found it to be quite cool. Basic but still very functional. Well I wanted to use this in a small project I'm working on and initially just added the JS to my page. However I thought wouldn't this be useful if I could just add an ASP.Net Web Control into any page I want this on, would save me x lines of code. So I created myself a quick Web Control, YMPWebControl. Its quite simple to use and by default all you have to do is put it into a page, and it renders the appropriate JavaScript. So here it is. YMP-1.1.zip

How To Use It

So add a register assembly into the top of your aspx file

<%@ Register Assembly="YMP" Namespace="YMP" TagPrefix="YMP" %>

Then where ever you want the YMP to render, I advise it be the last control in your page as it "adds to your page" and you want the page to load as quick as possible.

<YMP:YMPControl runat="server" ID="ympcontrol"/>

I have also added two optional parameters, DevelopmentVersion and EmbedInHead. These two boolean parameters allow you to turn on the Development version of the player, which supposedly is buggy has all the latest stuff, and allows you to embed the control into the header of your page from where ever it was added. Now this second parameter I would advise against using as you can just manually stick the control code into your header. The option was added in the case where you don't have the ability to change your master page or get access to the head section of code, i.e your using templates or something. This solves that. So an example of wanting the development version of the YMP but also loading it into the head

<YMP:YMPControl runat="server" ID="ympcontrol" EmbedInHead="true" DevelopmentVersion="true"/>

Download the YMP-1.1.zip And that's it, try it out if you like it and use it please let me know, below.

Update

The control has now been updated to version 1.1, this new version only allows one instance of the control to be rendered on a page. All previous links have been updated to this new version. Download the YMP-1.1.zip