Ползунок изменяет усиление веб-звука, но звук все еще слышен

Question

Создание учебника по Mozilla. Громкость не go уменьшается при перемещении ползунка, даже если значение 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);

Answer 1

Я знал, что это глупый вопрос.

Вместо

track.connect(audioContext.destination);

, а затем

track.connect(gainNode).connect(audioContext.destination);

Просто сделайте это один раз

track.connect(gainNode).connect(audioContext.destination);

Answer 2

Из справки MDN ,

Интерфейс GainNode представляет изменение громкости

Поскольку ваш диапазон составляет от 0 до 2, это означает изменение от 0 до 2. Если вы хотите уменьшить звук, вам нужно применить отрицательные значения.

Попробуйте изменить ввод на:

<input type="range" id="volume" min="-1" max="2" value="1" step="0.01">