Embedding Sound in Web Pages, Part II: The Volume Buttons and Gauge - Doc JavaScript

The Volume Buttons and Gauge

The volume buttons are rich in fucntionality that you will find useful for many other scripts. The buttons are implemented differently on Navigator and Internet Explorer. Let's take a look at the makeVolumeButtons() function:

function makeVolumeButtons() {
  var str = "";
  str += "<FONT SIZE=2 COLOR='#ffffff'>Volume</FONT><BR>";
  if (NSsound) {
    str += "<A HREF='javascript:void(0)' " +
      "onClick='if (!document.layers) changeVolume(1)' " +
      "onMouseDown='return startSlide(1)' onMouseUp='stopSlide()' " +
      "onMouseOver='return display(\"Increase volume\")' " +
      "onMouseOut='return display(\"\")'><IMG " +
      "SRC='volup.gif' WIDTH='9' HEIGHT='10' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
    str += "<A HREF='javascript:void(0)' " +
      "onClick='if (!document.layers) changeVolume(-1)' " +
      "onMouseDown='return startSlide(-1)' onMouseUp='stopSlide()' " +
      "onMouseOver='return display(\"Decrease volume\")' " +
      "onMouseOut='return display(\"\")'><IMG " +
      "SRC='voldown.gif' WIDTH='9' HEIGHT='10' HSPACE='2' " +
      "VSPACE='3' BORDER='0'></A>";
  } else {
    str += "<IMG SRC='volup.gif' WIDTH='9' HEIGHT='10' " +
      "HSPACE='2' VSPACE='3' " +
      "onMouseOver='return display(\"Increase volume\")' " +
      "onMouseOut='return display(\"\")' " +
      "onMouseDown='return startSlide(1)' onMouseUp='stopSlide()'>";
    str += "<IMG SRC='voldown.gif' WIDTH='9' HEIGHT='10' " +
      "HSPACE='2' VSPACE='3' " +
      "onMouseOver='return display(\"Decrease volume\")' " +
      "onMouseOut='return display(\"\")' " +
      "onMouseDown='return startSlide(-1)' onMouseUp='stopSlide()'>";
  }
  return str;
}

As you can see, the buttons are implemented as anchors (<A> tags) on Navigator and as images (<IMG> tags) on Internet Explorer. The reason for this mismatch is that neither implementation works on both browsers. The link solution (<A> tags) does not work on Internet Explorer, due to an undocumented bug. The images solution (<IMG> tags) doesn't work on Navigator, because Navigator's <IMG> tag does not support the click event (this isn't a bug). We did not use the <FORM> tag because there is no way to customize its buttons.

Let's take a look at the <A> solution for Navigator:

str += "<A HREF='javascript:void(0)' " +
  "onClick='if (!document.layers) changeVolume(1)' " +
  "onMouseDown='return startSlide(1)' onMouseUp='stopSlide()' " +
  "onMouseOver='return display(\"Increase volume\")' " +
  "onMouseOut='return display(\"\")'><IMG " +
  "SRC='volup.gif' WIDTH='9' HEIGHT='10' HSPACE='2' " +
  "VSPACE='3' BORDER='0'></A>";

The button's event handlers are:

• onClick is used to increment the volume by one notch. It only functions on Navigator 3.0x, because Navigator 4.0x supports the onMouseDown and onMouseUp event handlers. The expression !document.layer evaluates to true on Navigator 4.0x, but returns false if the user is running Navigator 4.0x.
• onMouseDown invokes the sliding volume routine. As long as the mouse is pressed down on the image, the volume gradually increases. If the user simply clicks the button, the volume is incremented by one unit (on a scale of 1 to 10). On the Mac, the onMouseDown event triggers a shortcut menu to pop up. In order to avoid this menu pop-up, we make sure out event handler function (startSlide()) returns false, and we propagate this value to the onMouseDown event by the onMouseDown='return startSlide(direction)' assignment. In this way, we ensure that the onMouseDown event is not propagating to any other functions, including the one generating the shortcut pop-up menu.
• onMouseUp stops the "volume slide" started by the onMouseDown event.
• onMouseOver. Displays the message Increas volume in the status bar.
• onMouseOut clears the status bar.

The volume-down button is similar to the volume-up one. Additionally, the <IMG> solution is not much different from the <A> one, as describe above. The only significant difference is that the <A> tag causes the cursor to switch from an arrow to a hand shape. By explicitly performing this routine on Internet Explorer, we can eliminate the differences between the two implementations (Navigator and Internet Explorer, <A> and <IMG>).

The volume display consists of ten images referenced off.gif. The images are named voli, where i is the relative position of the image among the others: vol9 is the name of the top dot in the volume meter, and vol0 is the bottom one. Here is the makeVolume() function, which returns the HTML code for the volume gauge:

function makeVolume() {
  var str = "";
  for (var i = 9; i >= 0; i--) {
    str +=  "<IMG SRC='" + off.src + "' HEIGHT='" + 
      off.width + "' WIDTH='" + off.width + "' NAME='vol" +
      i + "'><BR>";
  }
  return str;
}

Notice that the URL of the "off" image is stored in the src property of the off object. In order to replace the images with "on" images (the green bullets), we preload the images:

var off = new Image(4, 4);
off.src = "off.gif";
var on = new Image(4, 4);
on.src = "on.gif";

For more information on preloading images and using the Image object, see Column 1, Universal JavaScript Rollovers.

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

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