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

The Control Panel

The jukebox's control panel has a fairly simple design. It includes a select menu that displays the current song, a play button, a pause button, a stop button, volume control buttons, and a volume meter. The three control buttons (play, pause, and stop) are very similar in functionality to the volume buttons. As explained earlier, Navigator's implementation is based on the <A> tag, while the <IMG> tag is used for Internet Explorer. Let's take a look at the makeControlButtons() function:

function makeControlButtons() {
  var str = "";
  str += "<FONT SIZE='2' COLOR='#ffffff'>Control</FONT><BR>";
  if (NSsound) {
    str += "<A HREF='javascript:play()' onMouseOver='return " +
      "display(\"Play\")' onMouseOut='return display(\"\")'>" +
      "<IMG SRC='play.gif' WIDTH='12' HEIGHT='9' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
    str += "<A HREF='javascript:pause()' onMouseOver='return " +
      "display(\"Pause\")' onMouseOut='return display(\"\")'>" +
      "<IMG SRC='pause.gif' WIDTH='12' HEIGHT='9' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
    str += "<A HREF='javascript:stop()' onMouseOver='return " +
      "display(\"Stop\")' onMouseOut='return display(\"\")'>" +
      "<IMG SRC='stop.gif' WIDTH='12' HEIGHT='9' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
  } else {
    str += "<IMG SRC='play.gif' WIDTH='12' HEIGHT='9' " +
      "HSPACE='2' VSPACE='3' onClick='play()' " +
      "onMouseOver='return display(\"Play\")' " +
      "onMouseOut='return display(\"\")'>";
    str += "<IMG SRC='pause.gif' WIDTH='12' HEIGHT='9' " +
      "HSPACE='2' VSPACE='3' onClick='pause()' " +
      "onMouseOver='return display(\"Pause\")' " +
      "onMouseOut='return display(\"\")'>";
    str += "<IMG SRC='stop.gif' WIDTH='12' HEIGHT='9' " +
      "HSPACE='2' VSPACE='3' onClick='stop()' " +
      "onMouseOver='return display(\"Stop\")' " +
      "onMouseOut='return display(\"\")'>";
  }
  return str;
}

One difference between these buttons and the volume ones is that the links specified by the <A> tags are actual functions to be executed, as opposed to javascript:void(0) function calls in the previous page. The reason for this difference is that we wanted the extra functionality of "volume sliding" via the onMouseDown and onMouseUp events. The Play, Stop, and Pause buttons rely only on the onClick event handler. The <A> tag's HREF attribute can execute a JavaScript function if its value is set to javascript:functionName() (e.g., HREF='javascript:play()'). The usage of <IMG> tag on Internet Explorer obviously does not provide such an option, so the onClick event handler is specified explicitly.

We print the select menu with the rest of the control panel:

if (NSsound || IEsound) {
  document.write(
    "<FORM NAME='jukeboxform'>",
    "<TABLE BORDER='3'><TR><TD>",
    "<TABLE BORDER='0' CELLSPACING='0' CELLPADDING='4'>",
    "<TR><TD COLSPAN='3' BGCOLOR='#000000'>",
    "<SELECT NAME='songs' onchange='change()'>"
  );
  for (var i = 0; i < songs.length; i++) {
    document.write(
      "<OPTION VALUE='", songs[i].url, "'>",
      songs[i].name
    );
  }
  document.write(
    "</SELECT>",
    "</TD></TR>",
    "<TR><TD BGCOLOR='#000000' WIDTH='15' ALIGN='center'>",
    makeVolume(),
    "</TD><TD BGCOLOR='#000000' ALIGN='center'>",
    makeVolumeButtons(),
    "</TD><TD BGCOLOR='#000000' ALIGN='center'>",
    makeControlButtons(),
    "</TD></TR>",
    "</TABLE>",
    "</TD></TR></TABLE>",
    "</FORM>"
  );

Notice that the control panel is made of a table with two rows and three columns. The top row includes one cell which spans all three columns, and hosts the pull-down menu. The bottom row includes three cells: the volume display, the volume controls, and the control buttons. We build the select menu by looping through the songs, and printing the corresponding tag for each one. The onChange() event handler changes the song whenever the user changes the selection. The internals of the this event handler will be covered later in this column.

It is worth mentioning the difference in user interaction between the PC and the Mac. On the PC, the user can restart a paused track from the beginning, by clicking the Play button. On the Mac, on the other hand, clicking the Play button has no effect on a paused song. On both platforms, clicking the Pause button again resumes the song from its paused position.

Created: July 6, 1998
Revised: July 6, 1998

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