Web Audio API createGain and GainNode

Here it is illustrated how to use gain in Web Audio API. In web audio programming using API, a source node generates audio signal which is then amplified using gain node, just like an amplifier in electronics. Gain in electronics is provided by using transistors or operational amplifiers. Just like creating audio amplifier we can use gain node as source node audio amplifier.

Prerequisite: What is Web Audio API? and what are its applications?

Following is an example code of creating a gain node to amplify the audio signal from the source. The amplified signal is then connected to the speaker of the PC and you can hear the amplified audio sound.

 
<button onclick='hello()'>Hello with Gain</button>
        <script>
        function hello(){
            var ctx = new AudioContext();
            var tone = new OscillatorNode(ctx);
            var vol = new GainNode(ctx, {gain:0.4});
            tone.start();
            tone.connect(vol).connect(ctx.destination);
        }
    </script>
 

This code is an example of how to create an audio tone using an oscillator with a gain node to control the volume. Here's what each line does:

The first line creates a button with the label "Hello with Gain", which calls the "hello()" function when clicked.
The "hello()" function is called when the button is clicked. This function creates a new AudioContext object, which is the main entry point for the Web Audio API.
Next, the code creates an oscillator using the "OscillatorNode" constructor function, passing in the AudioContext object as an argument.
The code then creates a GainNode using the "GainNode" constructor function, also passing in the AudioContext object as an argument. The second argument is an options object that specifies the initial gain of the node, which in this case is set to 0.4.
The "start()" method is called on the oscillator, which causes it to begin generating the waveform.
The oscillator is then connected to the gain node using the "connect()" method, and then the gain node is connected to the destination of the AudioContext using another "connect()" method call. This means that the audio generated by the oscillator is first passed through the gain node to control its volume, and then passed to the device's audio output.

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. Clicking the "Hello with Gain" button will start the tone with a volume of 0.4, and the user can adjust the volume by changing the gain value in the options object of the GainNode constructor. Note that each button click will increase the volume by the gain factor. The default value of gain if not specified is 1 which means it just passes the input audio to the output without any amplification just like a buffer in electronics circuit.

Another way to use audio gain in web audio programming is to use the createGain() method of the AudioContext. Following is an example code:

 
<button onclick='hello()'>Hello with Gain</button>
        <script>
        function hello(){
            var ctx = new AudioContext();
            var tone = new OscillatorNode(ctx);
            var vol = ctx.createGain();
            vol.gain.value = 0.4;
            tone.start();
            tone.connect(vol).connect(ctx.destination);
        }
    </script>
 

To demonstrate just click on the button below.

What Next? see how to control audio tone with potentiometer with Web Audio API.

Web Audio API createGain and GainNode

Post a Comment