如何控制(音频缓冲区)AudioContext()的音量?
问题描述:
我在JavaScript中有以下AudioContext()声音对象。
它的体积是100%。我想以10%的体积播放它(其中音量= 0.1)。
如何将其体积缩小至10%?如何控制(音频缓冲区)AudioContext()的音量?
const aCtx = new AudioContext();
let source = aCtx.createBufferSource();
let buf;
fetch('https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav') // can be XHR as well
.then(resp => resp.arrayBuffer())
.then(buf => aCtx.decodeAudioData(buf)) // can be callback as well
.then(decoded => {
source.buffer = buf = decoded;
source.loop = true;
source.connect(aCtx.destination);
check.disabled = false;
});
check.onchange = e => {
if (check.checked) {
source.start(0); // start our bufferSource
} else {
source.stop(0); // this destroys the buffer source
source = aCtx.createBufferSource(); // so we need to create a new one
source.buffer = buf;
source.loop = true;
source.connect(aCtx.destination);
}
};
<label>Start Playing</label>
<input type="checkbox" id="check" disabled><br>
<br>Its volume is 100%. Please help me to reduce it to 10%.
答
我们使用GainNodes控制音量。
var gainNode = aCtx.createGain()
gainNode.gain.value = 0.1 // 10 %
gainNode.connect(aCtx.destination)
// now instead of connecting to aCtx.destination, connect to the gainNode
source.connect(gainNode)
解决方案
const aCtx = new AudioContext();
const gainNode = aCtx.createGain();
gainNode.gain.value = 0.1; // setting it to 10%
gainNode.connect(aCtx.destination);
let source = aCtx.createBufferSource();
let buf;
fetch('https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav') // can be XHR as well
.then(resp => resp.arrayBuffer())
.then(buf => aCtx.decodeAudioData(buf)) // can be callback as well
.then(decoded => {
source.buffer = buf = decoded;
source.loop = true;
source.connect(gainNode);
check.disabled = false;
});
check.onchange = e => {
if (check.checked) {
source.start(0); // start our bufferSource
} else {
source.stop(0); // this destroys the buffer source
source = aCtx.createBufferSource(); // so we need to create a new one
source.buffer = buf;
source.loop = true;
source.connect(gainNode);
}
};
<label>Start Playing</label>
<input type="checkbox" id="check" disabled><br>
<br>Its volume is 100%. Please help me to reduce it to 10%.
+1
@Kaiido谢谢。应该看到了。这也伤害了我......现在我明白了。 – arcs
答
可以使用AudioContext的createGain为puporse。
如下所示,
有关详细信息结帐上createGain
https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain
const aCtx = new AudioContext();
let source = aCtx.createBufferSource();
let buf;
var gainNode = aCtx.createGain(); // Create a gainNode reference.
gainNode.connect(aCtx.destination); // Add context to gainNode
fetch('https://dl.dropboxusercontent.com/s/knpo4d2yooe2u4h/tank_driven.wav') // can be XHR as well
.then(resp => resp.arrayBuffer())
.then(buf => aCtx.decodeAudioData(buf)) // can be callback as well
.then(decoded => {
source.buffer = buf = decoded;
source.loop = true;
source.connect(gainNode); //Connecting gain to source
gainNode.gain.value = 1; // 100% VOLUME RANGE OF VALUE IS 0-1
check.disabled = false;
});
check.onchange = e => {
if (check.checked) {
source.start(0); // start our bufferSource
} else {
source.stop(0); // this destroys the buffer source
source = aCtx.createBufferSource(); // so we need to create a new one
source.buffer = buf;
source.loop = true;
source.connect(gainNode); //Connecting gain to source
gainNode.gain.value = 0.1; // 10% VOLUME RANGE OF VALUE IS 0-1
}
};
所以我认识[我的代码](http://*.com/a/42970609/3702797 ),如果你完整地阅读了答案,你会发现在第二个片段中我使用了[gainNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain),这会给你对输出音量的控制。 – Kaiido