The createGain()
method of the BaseAudioContext
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> <button class="mute">Mute button</button> </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 == "") { // 0 means mute. If you still hear something, make sure you haven't // connected your source into the output in addition to using the GainNode. gainNode.gain.setValueAtTime(0, audioCtx.currentTime); mute.id = "activated"; mute.innerHTML = "Unmute"; } else { gainNode.gain.setValueAtTime(1, audioCtx.currentTime); mute.id = ""; mute.innerHTML = "Mute"; } }
Specifications
Specification | Status | Comment |
---|---|---|
Web Audio API The definition of 'createGain()' in that specification. |
Working Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
createGain | Chrome
Full support
10
| Edge Full support ≤18 | Firefox
Full support
53
| IE No support No | Opera
Full support
22
| Safari
Full support
6
| WebView Android Full support Yes | Chrome Android Full support 33 | Firefox Android
Full support
53
| Opera Android
Full support
22
| Safari iOS
Full support
6
| Samsung Internet Android Full support 2.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.