The jukebox controller requires the SoundController component from Recipe 13.16. If you completed that exercise, you should have a Sound Controller menu option in the Components panel, which contains a SoundController component. Otherwise, you can download and install the completed SoundController component from http://www.person13.com/ascb/components/soundController.zip.

Once you have the SoundController component installed, create a copy of it in your jukebox movie's Library by dragging an instance onto the Stage and deleting the instance. The symbol remains in the Library, even after the instance is deleted.

Create a new movie clip symbol named JukeboxController.

Open the linkage properties for the JukeboxController symbol using the Library panel's pop-up Options menu.

Select the Export for ActionScript and Export on First Frame checkboxes.

Give the symbol a linkage identifier of JukeboxControllerSymbol.

Click OK to close the Linkage Properties dialog box.

Edit the JukeboxController symbol.

Add the following code to the first frame of the default layer:

// Make sure to enclose the code in #initclip/#endinitclip so that this code
// executes before any code on the main timeline.
#initclip

// In the JukeboxController constructor, create two SoundController instances and
// store references to them in the currentPlayer and queuePlayer properties. Hide
// the second player instance by setting its _alpha to 0.
function JukeboxController (  ) {
  this.attachMovie("SoundControllerSymbol", "player2", _root.getNewDepth(  ));
  this.attachMovie("SoundControllerSymbol", "player1", _root.getNewDepth(  ));
  this.player2._alpha = 0;
  this.currentPlayer = this.player1;
  this.queuePlayer = this.player2;
}

// Make sure that JukeboxController subclasses MovieClip.
JukeboxController.prototype = new MovieClip(  );

// The loadSong(  ) method uses the SoundController's setTarget(  ) method to set
// currentPlayer's target sound and tell it to play once it is loaded.
JukeboxController.prototype.loadSong = function (snd) {
  this.currentPlayer.setTarget(snd, true);
};

// The loadQueue(  ) method sets the target sound for queuePlayer without playing
// the sound immediately.
JukeboxController.prototype.loadQueue = function (snd) {
  this.queuePlayer.setTarget(snd);
};

// The startNext(  ) method starts the next song.
JukeboxController.prototype.startNext = function (  ) {
  // Use the custom fade(  ) method (from MovieClip.as in Chapter 7) to fade
  // the currentPlayer sound down and the queuePlayer sound up.
  this.currentPlayer.fade(5);
  this.queuePlayer.fade(5, true);

  // Swap the references for currentPlayer and queuePlayer. If currentPlayer was
  // player1, it becomes player2 and queuePlayer becomes player1.
  var tmp = this.currentPlayer;
  this.currentPlayer = this.queuePlayer;
  this.queuePlayer = tmp;

  // Swap the sound controllers' depths so that
  // currentPlayer has the greater depth.
  this.currentPlayer.swapDepths(this.queuePlayer);

  // If the new current song is loaded, begin playback. Otherwise, the
  // onEnterFrame(  ) method monitors it until it is loaded, then begins playback.
  if (this.currentPlayer.snd.isLoaded) {
    this.currentPlayer.start(  );
  } else {
    this.currentPlayer.onEnterFrame = function (  ) {
      if (this.snd.isLoaded) {
        this.start(  );
        delete this.onEnterFrame;
      }
    }
  }
};

// Register the class to the corresponding linkage identifier name.
Object.registerClass("JukeboxControllerSymbol", JukeboxController);

#endinitclip

Open jukebox.fla if it is not already open.

Add the following code to the default layer of the main timeline:

// Include Sound.as from Chapter 13 and Forms.as from Chapter 11.
#include "Sound.as"
#include "Forms.as"
// Include DataGlue.as and RecordSet.as, 
// which come with the Flash Remoting components.
#include "DataGlue.as"
#include "RecordSet.as"

// The init(  ) function creates a local connection that listens for songs that 
// have been added via the local or server MP3 selectors. Additionally, the
// init(  ) function creates a recordset to hold the playlist information.
function init (  ) {
  receiver = new LocalConnection(  );
  receiver.receivePathInfo = function (path) {
    if (path != "" && path != undefined && path != null) {
      _root.addSongToList(path);
    }
  };
  receiver.connect("pathSendConnection");
  songsList = new RecordSet("url, snd");
}

// The createElements(  ) method creates all the component instances and text 
// fields.
function createElements (  ) {
  _root.attachMovie("FListBoxSymbol", "songsListBox", _root.getNewDepth(  ));
  _root.createAutoTextField("newSongURLLabel", _root.getNewDepth(  ),
                            0, 0, 0, 0, "URL to MP3:");
  _root.createInputTextField("newSongURL", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "moveUpBtn", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "moveDownBtn", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "removeBtn", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "addSoundBtn", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "startPlayBtn", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "getLocalBtn", _root.getNewDepth(  ));
  _root.attachMovie("FPushButtonSymbol", "getServerBtn", _root.getNewDepth(  ));
  _root.attachMovie("JukeboxControllerSymbol", "jukeboxCtrl", _root.getNewDepth(  ));

  addSoundBtn.setLabel("Add Song");
  moveUpBtn.setLabel("Move Up");
  moveDownBtn.setLabel("Move Down");
  removeBtn.setLabel("Remove Song");
  startPlayBtn.setLabel("Begin Playback");
  getLocalBtn.setLabel("Get Local MP3");
  getServerBtn.setLabel("Get Server MP3");
  addSoundBtn.setClickHandler("addSound");
  startPlayBtn.setClickHandler("startNextSong");
  moveUpBtn.setClickHandler("moveSongUp");
  moveDownBtn.setClickHandler("moveSongDown");
  removeBtn.setClickHandler("removeSong");
  getLocalBtn.setClickHandler("getMP3");
  getServerBtn.setClickHandler("getMP3");
}

// The layoutElements(  ) function positions the components and text fields in a
// table.
function layoutElements (  ) {
  tc0 = new TableColumn(5, songsListBox);
  tc1 = new TableColumn(5, startPlayBtn, moveUpBtn, moveDownBtn, removeBtn);
  tc2 = new TableColumn(5, newSongURLLabel, newSongURL, addSoundBtn,
                        getLocalBtn, getServerBtn);
  tc3 = new TableColumn(5, jukeboxCtrl);
  tr0 = new TableRow(5, tc0);
  tr1 = new TableRow(5, tc1, tc2);
  tr2 = new TableRow(5, tc3);
  t = new Table(5, 0, 0, tr0, tr1, tr2);
}

// The formatSongsList(  ) function is used by the DataGlue.bindFormatFunction(  ) 
// call in updateListView(  ) to format each element in the song list.
function formatSongsList(element) {
  // Get the name of the MP3 from the URL/path. If you split 
  // the URL using "/" as the delimiter, the name of the MP3 is 
  // the last element of the resulting array.
  var urlAr = element.url.split("/");
  if (urlAr.length == 1) {
    urlAr = element.url.split("\\");
  }
  var name = urlAr[urlAr.length - 1];

  // Create the object to return to bindFormatFunction(  ). The data should be the
  // element itself, and the label should be the name of the MP3 file.
  var obj = new Object(  );
  obj.data = element;
  obj.label = name;

  // If the song is already loaded, display its duration next to the name. 
  // Otherwise, display the percentage that has loaded.
  if (element.snd.isLoaded) {
    obj.label += " (" + SoundController.timeDisplay(element.snd.duration) + ")";
  } else {
    obj.label += " [" + element.snd.percentLoaded + "%]";
  }
  return obj;
}

// The updateListView(  ) function is called continually to update the playlist
// menu to reflect load progress while any songs are loading.
function updateListView (  ) {
  var selected = _root.songsListBox.getSelectedIndex(  );
  DataGlue.bindFormatFunction(_root.songsListBox, _root.songsList, 
                              _root.formatSongsList);
  _root.songsListBox.adjustWidth(  );
  _root.songsListBox.setSelectedIndex(selected);
}

// The addSongToList(  ) function adds a song to the playlist from a URL.
function addSongToList (url) {

  // Load a sound into a new sound object created using the custom
  // createNewSound(  ) method from Recipe 13.1.
  var mySound = Sound.createNewSound(  );
  mySound.loadSound(url);

  // Add the song to the songsList recordset.
  songsList.addItem({url: url, snd: mySound});

  // Create an onEnterFrame(  ) method that calls updateListView(  ) continually
  // until the song is loaded.
  mySound.mc.onEnterFrame = function (  ) {
    _root.updateListView(  );
    if (this.parent.isLoaded) {
      delete this.onEnterFrame;
    }
  };
}

// The startNextSong(  ) function plays the next song in the playlist.
function startNextSong (  ) {

  // The counter variable keeps track of which song is currently being played. If
  // it is undefined or greater than the number of songs, reset it to 0.
  if (counter >= songsListBox.getLength(  ) || counter == undefined) {
    counter = 0;
  }

  // Highlight the current song in the playlist.
  songsListBox.setSelectedIndex(counter);

  // Get the sound object for the current song.
  var snd = songsListBox.getItemAt(counter).data.snd;

  // Set the sound to fade in for the first five seconds 
  // and to fade out for the last five seconds.
  snd.fadeIn(5000);
  snd.fadeOut(5000);

  // When the song fades out, call this function (startNextSong(  )) again.
  snd.setOnFadeOut("startNextSong");

  // When the song ends (as opposed to when it starts fading out), call
  // stopPlayer(  ) to stop the song.
  snd.setOnStop("stopPlayer");

  // Load the new song into the queue and tell the 
  // jukebox controller to play the next song. 
  jukeboxCtrl.loadQueue(snd);
  jukeboxCtrl.startNext(  );
  counter++;
}

// When the end of the song is reached, this function stops the song.
function stopPlayer (  ) {
  _root.jukeboxCtrl.queuePlayer.stop(  );
}

// The addSound(  ) function is the click handler for the Add Song button; it adds
// a song to the playlist from the URL typed into the text field.
function addSound (  ) {
  var url = newSongURL.text;
  newSongURL.text = "";
  addSongToList(url);
}

// The moveSongUp(  ) function moves a song up in the playlist.
function moveSongUp (  ) {

  // Get the index of the of playlist item the user has selected.
  var selected = songsListBox.getSelectedIndex(  );

  // Move the song only if it isn't already first in the list.
  if (selected > 0) {

    // Insert the item into the list at one index prior to its current position.
    songsList.addItemAt(selected - 1, songsListBox.getItemAt(selected).data);

    // Remove the item from its original position in the list.
    songsList.removeItemAt(selected + 1);

    // Update the view of the playlist and set the selected index such that the
    // song that was moved is highlighted.
    updateListView(  );
    songsListBox.setSelectedIndex(selected - 1);
  }
}

// The moveSongDown(  ) function does the opposite of the moveSongUp(  ) function.
function moveSongDown (  ) {
  var selected = songsListBox.getSelectedIndex(  );
  // Move the song only if it isn't already last in the list.
  if (selected < songsListBox.getLength(  ) - 1) {
    songsList.addItemAt(selected + 2, songsListBox.getItemAt(selected).data);
    songsList.removeItemAt(selected);
    updateListView(  );
    songsListBox.setSelectedIndex(selected + 1);
  }
}

// The removeSong(  ) function removes a song from the list.
function removeSong (  ) {

  // Get the index of the selected song in the playlist.
  var selected = songsListBox.getSelectedIndex(  );

  // Make sure a song is selected before trying to remove one.
  if (selected != undefined) {

    // Get the sound associated with the song.
    var snd = songsList.getItemAt(selected).snd;

    // Remove the song from the playlist.
    songsList.removeItemAt(selected);
    updateListView(  );

    if (selected < counter) {
      // If the index of the deleted song is less than counter (the index of the
      // song that is currently playing), decrement counter.
      counter--;
    } else if (selected == counter) {
      // If the deleted song was the current song, fade out the song from its
      // current play position.
      snd.fadeOut(5000, snd.position);
    }
  }
}

// The getMP3(  ) function is the click handler for the
// getLocalBtn and getServerBtn buttons. It opens the HTML 
// pages for the selectors in new browser windows.
function getMP3 (btn) {
  if (btn == getLocalBtn) {
    this.getURL("javascript:void(window.open('localFileForm.html', 
                '_blank', 'width=300,height=150'))");
  }
  else if (btn == getServerBtn) {
    this.getURL("javascript:void(window.open('directoryBrowser.html',
                '_blank', 'width=210,height=360'))");
  }
}

init(  );
createElements(  );
layoutElements(  );

Save the Flash document and publish the .swf and .html files.