The createGain() method of the AudioContext interface creates a GainNode, which can be used to control the overall gain (or volume) of the audio graph.
Syntax
var gainNode = AudioContext.createGain();
Return value
A GainNode which takes as input one or more audio sources and outputs audio whose volume has been adjusted in gain (volume) to a level specified by the node's GainNode.gain a-rate parameter.
Example
The following example shows basic usage of an AudioContext to create a GainNode, which is then used to mute and unmute the audio when a Mute button is clicked by changing the gain property value.
The below snippet wouldn't work as is — for a complete working example, check out our Voice-change-O-matic demo (view source.)
<div> <a class="mute">Mute button</a> </div>
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var gainNode = audioCtx.createGain();
var mute = document.querySelector('.mute');
var source;
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia (
// constraints - only audio needed for this app
{
audio: true
},
// Success callback
function(stream) {
source = audioCtx.createMediaStreamSource(stream);
},
// Error callback
function(err) {
console.log('The following gUM error occured: ' + err);
}
);
} else {
console.log('getUserMedia not supported on your browser!');
}
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
...
mute.onclick = voiceMute;
function voiceMute() {
if(mute.id == "") {
gainNode.gain.value = 0;
mute.id = "activated";
mute.innerHTML = "Unmute";
} else {
gainNode.gain.value = 1;
mute.id = "";
mute.innerHTML = "Mute";
}
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| Web Audio API The definition of 'createGain()' in that specification. |
Working Draft |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 10.0webkit | (Yes) | 25.0 (25.0) | No support | 15.0webkit 22 (unprefixed) |
6.0webkit |
| Feature | Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | 26.0 | 1.2 | ? | ? | ? | 33.0 |