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

Volume Functions

The Jukebox script includes several volume-related functions to increase, decrease, and set the volume. The underlying functionality is that of "sliding volume." The volume goes up or down (depending on the button used) while the mouse key is down. Here is the function that sets the volume at a certain level:

function setVolume(vol) {
  if (!loaded) return;
  curVolume = vol;
  if (NSsound)
    document.jukebox.setvol(NSvolume[vol])
  else
    document.jukebox.volume = IEvolume[vol];
  for (var i = 0; i < 10; i++) {
    document.images["vol" + i].src = (i < vol) ? on.src : off.src;
  }
}

Setting volume is different between Navigator and Internet Explorer. Navigator supports the setvol() function, while Explorer supports the volume property. The volume display is created by replacing the initial off.gif files with the correct number of on.gif files. The exact number of such switches depends on the volume level.

The startSlide() function is triggered when the user keeps the mouse button down, creating an onMouseDown event. The function changes the volume and then triggers a timeOut event that calls slideVolume() after 500 ms. This time interval is needed to verify that the user keeps pressing the mouse and still wants to "slide" the volume up or down:

function slideVolume(direction) {
  sliding = true;
  intervalID = setInterval("changeVolume(" + direction + ")", 50);
}

The slideVolume() function calls changeVolume() every 50 ms to slide the volume up or down. The changeVolume() function finally does the "volume sliding":

function changeVolume(step) {
  if (!loaded) return;
  var newVolume = curVolume + step;
  if ((newVolume >= 0) && (newVolume <= 10))
    setVolume(newVolume);
  else if (sliding)
    stopSlide();
}

The function first updates newVolume and then verifies that it is bounded in the 0 to 10 range. If newVolume is inside the range, the volume is set accordingly. If it is outside the range, the "volume sliding" is stopped by the stopSlide() function:

function stopSlide() {
  if (intervalID) clearInterval(intervalID);
  if (timerID) clearTimeout(timerID);
  sliding = false;
}

The stopSlide() function stops the "volume sliding" by clearing the two outstanding timers (intervalID and timerID) and setting sliding to false. Notice that the stopSlide()function is called directly from the control panel, by the onMouseUp event handler. "Volume sliding" stops when the user stops pressing the mouse down on either the volume-up or volume-down buttons.

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

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