Stereo Panning Demo

This page demonstrates a way to give a user control over the stereo panning of a sound. Normally panning is controlled with a knob (dial) or a fader (slider). The HTML element <input> with type="range" is the easiest way to put a slider in your web page. The pan property of a StereoPannerNode element can have a value from -1 (panned fully left) to 1 (panned fully right). In this example, the range of the slider is -100 to 100 (with 0 as the default), and in JavaScript we simply multiply its value by 0.01 (same as dividing by 100) to map its value to the -1 to 1 range of the pan property. Note that we use the "oninput" event of the slider for continual updating every time the user moves the slider to a different value, rather than the "onchange" event, which occurs only once when the user releases the slider.

The page also demonstrates a way to do a timed pan left or right, using the linearRampToValueAtTime() method of the pan AudioParam. The method allows you to specify a value you want to go to and the time at which you want the parameter to arrive there. When the slider is moved by hand, we can interpolate linearly to the new value in a short time, say 100 milliseconds. For an automated change of panning, we move the slider from its current value to -100 or 100 in the specified panning time. (The panning time is specified by the user in seconds.)