Web Audio API Volume Control with Gain Slider

In the previous tutorial we explained what a gain node is in Web Audio API. Here it is demonstrated how the gain node can be used to create an interactive web based volume controller using a slider.

For interactive demonstration click on the ON/OFF button to turn on or off the audio tone and use the slider to increase or decrease the volume.

Gain:

The following is the Web Audio API example code which uses JavaScript program to control the volume of audio tone controlable slider.

 
<button onclick='onoff()'>Tone ON/OFF</button><br/><br/>
        <input type='range' max=1 value=0.1 step=0.01 id='VolumeSlider'>
        <p>Gain Control Slider</p>
        <span id='VolumeLabel'></span>
        <script>
            var ctx = new AudioContext();
            var tone = new OscillatorNode(ctx);
            var vol = new GainNode(ctx,{gain:0.1});
            tone.start();
            var Connected = false;
            vol.connect(ctx.destination);
        
            function onoff(){
                if (Connected == false) {
                ctx.resume();
                tone.connect(vol);
                Connected = true;
                } 
                else {
                Connected = false;
                tone.disconnect(vol);
                }
            }
            VolumeSlider.oninput = function() {
            VolumeLabel.innerHTML = this.value;
            vol.gain.value = this.value;
        }
    </script>
 

This code is an example of how to create an audio tone using an oscillator with a gain node to control the volume, and also how to turn the tone on and off with a button and adjust the volume using a slider. Here's what each line does:

The first line creates a button with the label "Tone ON/OFF", which calls the "onoff()" function when clicked.
The second line creates a line break for visual spacings.
The third line creates an input element of type "range" with a maximum value of 1, an initial value of 0.1, and a step size of 0.01. The input element has an id of "VolumeSlider", which is used to reference it later.
The fourth line creates a paragraph element with the label "Gain Control Slider".
The fifth line creates a span element with an id of "VolumeLabel", which is used to display the current value of the volume slider.
The next few lines of code create an AudioContext object, an OscillatorNode object, and a GainNode object. The oscillator starts generating a waveform immediately using the "start()" method. The gain value of the GainNode is set to 0.1 initially.
The gain node is connected to the destination of the AudioContext using the "connect()" method.
The "onoff()" function is called when the button is clicked. This function checks the value of the "Connected" variable, which is initially false. If it's false, the function resumes the AudioContext, connects the oscillator to the gain node using the "connect()" method, and sets the value of "Connected" to true. If it's true, the function sets "Connected" to false and disconnects the oscillator from the gain node using the "disconnect()" method.
The next few lines of code set up an event listener for changes to the volume slider. When the slider value changes, the event listener updates the text of the "VolumeLabel" span to display the current value of the slider, and sets the gain value of the gain node to the current value of the slider using the "gain.value" property.

Overall, this code creates a simple example of how to use the Web Audio API to generate an audio tone using an oscillator and control its volume using a gain node. The user can turn the tone on and off with a button, and adjust the volume using a slider.

References and Further Readings

[1] Web Audio API createGain and GainNode

[2] Creating an Oscillator with Web Audio API

[3] Filters with Audio Web API

[4] Web Audio API : Visualizing Frequency Response