spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column21


Volume Functions

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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.

http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business


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

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