The JukeBox Script

Our streaming media jukebox for the plugin version is very similar to our ActiveX control version from Column 51, A Streaming Media Jukebox. We first define an array of objects:

var streams = new Array();

We then define the object constructor as:

function makeStream(url, name) {
  this.url = url;
  this.name = name;
}

And finally, we populate the array with several ASX and ASF files:

streams[0] = new makeStream("http://msdn.microsoft.com/downloads/samples
  /Internet/imedia/netshow/smedia/NS3/JavaScript/Buttons/control.asx",
  "Microsoft Promo for Windows Media Player");
  // (The three lines above should be joined as one line.
  // They have been split for formatting purposes.)
streams[1] = new makeStream("http://www.advintsol.com/webmaster030399/
  webmaster.asx", "Microsoft Training for Windows Media Player");
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
streams[2] = new makeStream("mms://netshow.microsoft.com/ms/sbnasfs/wmt
  /turtle28.asf", "The Turtle");
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
streams[3] = new makeStream("mms://netshow.microsoft.com/ms/sbnasfs/wmt/
  wmt.asf", "Flying Windows Media Player logo");
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)

Once we know the number of elements in the array, we can dynamically write a pull-down list. The extra complexity in the Plugin version is that we need to explicitly select the desired entry to be displayed in the pull-down window. We first extract the URL parameter and then check with which entry we have a match:

function getSelectedEntry() {
  var query = location.search.substring(2, location.search.length-1);
  for (var i = 0; i < streams.length; i++) {
    if (streams[i].url == query) return i;
  }
  return 0;
}

And then we write the pull-down selection list:

document.writeln('<SELECT NAME="streams" onChange="change()">');
  var menuSelection = getSelectedEntry();
  for (var i = 0; i < streams.length; i++) {
    if (i == menuSelection) document.writeln('<OPTION VALUE="', streams[i].url,
      '" SELECTED>', streams[i].name)
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
    else document.writeln('<OPTION VALUE="', streams[i].url, '">',
      streams[i].name)
  // (The two lines above should be joined as one line.
  // They have been split for formatting purposes.)
  }
  document.writeln('</SELECT>');

The jukebox event handler kicks in whenever there is a change in the selection:

function change() {
  var list = document.playerCtrl.streams;
  var streamURL = list.options[list.selectedIndex].value;
  menuSelection = list.selectedIndex;
  document.mediaPlayer.Stop();
  document.displayMode.playOrPause.value = " Pause ";
  location.href = "demo.html" + "?" + '"' + streamURL + '"';
}

We first extract the URL of the currently selected item. We then call the Media Player's Stop() method and then reload the page with the new selection as a parameter.