在做mozilla教程。当我移动滑块时,即使gainNode.gain.value为零,音量也不会下降。
HTML
<input type="range" id="volume" min="0" max="2" value="1" step="0.01">
<audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3" crossorigin="anonymous" id="basic-audio"></audio>
JAVASCRIPT
const volumeSlider = document.getElementById('volume');
const audioElement = document.getElementById('basic-audio');
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
track.connect(audioContext.destination);
const gainNode = audioContext.createGain();
track.connect(gainNode).connect(audioContext.destination);
volumeSlider.addEventListener('input', function() {
gainNode.gain.value = this.value;
console.log(gainNode.gain.value);
}, false);
我知道这是一个愚蠢的问题。
而不是
track.connect(audioContext.destination);
然后
track.connect(gainNode).connect(audioContext.destination);
就做一次
track.connect(gainNode).connect(audioContext.destination);
来自 MDN参考文献,
GainNode接口表示体积的变化。
既然你的范围是从0到2,那就意味着从0到2的变化,如果你想减少声音,你需要应用负值。
试着将你的输入改为:。
<input type="range" id="volume" min="-1" max="2" value="1" step="0.01">