Embedding Sound in Web Pages, Part II: Initializing the Jukebox - Doc JavaScript

Initializing the Jukebox

The first portion of the script initializes the following variables:

NSsound denotes whether or not Navigator is audio enabled. The LiveAudio plug-in must be installed and Java should be enabled:

var NSsound = navigator.plugins && -->
navigator.plugins["LiveAudio"] && navigator.javaEnabled();

IEsound denotes whether or not Internet Explorer is audio enabled. Since ActiveMovie Control is an integral part of Internet Explorer 4.0 and above, it is enough to make sure that the document.plugins array exists and that the version is 4.0 or above (document.all exists):

var IEsound = navigator.plugins && document.all;

curVolume holds the current volume, on a scale of 1 to 10. It also represents the number of green dots on the control panel's volume display. At first we initialize this variable:

var curVolume = 5;

timerID is used to set a timeout to start sliding the volume. The display panel's volume-up and volume-down buttons have two functions. First, any click on a corresponding button will change the volume display by one notch (one dot added or cleared). Secondly, the user can keep the mouse button pressed on these buttons and the volume display will keep sliding up or down, as long as the mouse button is pressed (up to the top or bottom limits). We initially set this variable to null.

intervalID holds the current interval setting that gradually raises or lowers the volume when the mouse is kept pressed over one of the volume buttons. Like timerID , we set this variable to null.

ready denotes whether or not the sound file is already loaded. Navigator supports this variable directly through the document.jukebox.IsReady() property. We have implemented a similar feature on Internet Explorer, using an explicit event handler (see Column 10, The Internet Explorer Event Model, for more background). We implemented this event by a separate script that combines the object, event, and event handler into one script:

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

The ReadyStateChange event handler returns a value that denotes the new "ready state" whenever the state change. val == 4 denotes that all data has already been loaded (see Column 20, Embedding Sound in Web Pages, Part I, for more details on Active Movie Control's ReadyState property). ready is initially set to false.

shouldPlay denotes the status of the audio track. We use this variable to synchronize between the sound file loading completion and the beginning of the sound track on Internet Explorer. Navigator provides the play() method that accepts the URL of the sound track as a parameter and is used to change the audio file being played. We have to mimic this sequence on Internet Explorer which provides the parameter-less play() method. We first set the filename property of the Active Movie Control (see Column 20, Embedding Sound in Web Pages, Part I, for more details). Once the sound file has completely loaded, the ReadyStateChange event is triggered, the ready variable is set to true and the track starts if shouldPlay is true. Althought it is used only on Internet Explorer, we set shouldPlay to false on both browsers, when the user stops or pauses the audio. loaded denotes the completion of the initial loading of the document. The jukebox should be completely loaded before it is referenced, in order to avoid a JavaScript error.

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

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