Embedding Sound in Web Pages, Part II: Control Functions - Doc JavaScript

Control Functions

The Jukebox script includes several control functions that accomplish the core funcionality of the Jukebox: Select a Song, Play, Pause, and Stop. The change() function is triggered by the pull-down <SELECT> menu's Change event:

function change() {
  if (!loaded) return;
  var list = document.jukeboxform.songs;
  var songURL = list.options[list.selectedIndex].value;
  document.jukebox.stop();
  if (NSsound)
    document.jukebox.play(false, songURL)
  else {
    document.jukebox.filename = songURL;
    shouldPlay = true;
  }
}

Notice the different handling of Navigator and Internet Explorer. Navigator's play() function is capable of loading a new file and then playing it. Explorer's equivalent function (play()) does not accept any parameters and thus a different approach is needed. As explained previously in this column, we use the explicit event handler to accomplish the play() functionality on Explorer. We first assign the new file name to the relevant Active Movie Control's property:

document.jukebox.filename = songURL;

and then we remember that the song should be playing (shouldPlay = true). Once the file is loaded, a readyStateChange event is triggered, and then an explicit script is invoked to start playing the audio track (see earlier page for explanations):

<SCRIPT LANGUAGE="JavaScript" FOR="jukebox" EVENT="ReadyStateChange(val)">
<!--
if (IEsound) {
  ready = (val == 4);
  if (ready && shouldPlay) document.jukebox.play(); 
}
//-->
</SCRIPT>

Notice that we stop the audio track before we change it. This is needed only for the Mac. When no change of songs is needed, the play() and play() functions are used similarly in our play() event handler:

function play() {
  if (!loaded) return;
  if (NSsound) ready = document.jukebox.IsReady();
  if (!ready) {
    alert("The audio file hasn't loaded yet.");
    return;
  }
  var list = document.jukeboxform.songs;
  var songURL = list.options[list.selectedIndex].value;
  if (NSsound) 
    document.jukebox.play(false, songURL)
  else
    document.jukebox.play();
}

The play() function above verifies that the file has been completely loaded (IsReady) before the user clicks the Play button. Explorer does not support an equivalent check, but one may implement the external event handler that the change() function above uses. It is not needed here because the initial loading of the midi file is verified by the loading of the whole document. We verify that the document has been completely loaded by the loaded boolean variable. We don't proceed in any of the control operations unless loaded is true.

Notice that we need to specify the songURL for the play() funtction. It is needed only for the Mac. On the PC, the song to be played is already associated with the sound object and there is no need to respecify it.

The stop() and pause()functions are very simple, as both browsers use identical names:

function pause() {
  if (!loaded) return;
  shouldPlay = false;
  document.jukebox.pause();
}
function stop() {
  if (!loaded) return;
  shouldPlay = false;
  document.jukebox.stop();
}

Notice that we need to set shouldPlay to false in order to avoid Explorer from playing the current song when the explicit onReadyStateChange event handler is invoked.

Created: July 6, 1998
Revised: May 16, 1999

URL: https://www.webreference.com/js/column21/controlfunctions.html