CODEWITHSUNDEEP
javascripthtmlweb-audio-api
ntf
ntf

Reputation: 189

Slider changes web audio gain but can still hear audio

Doing mozilla tutorial. Volume doesn't go down when I move slider even though gainNode.gain.value goes to zero.

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);

Upvotes: 1

Views: 1011

Answers (2)

ecrb
ecrb

Reputation: 710

From the MDN reference,

The GainNode interface represents a change in volume

Since your range is from 0 to 2, that means the change is from 0 to 2. If you want to reduce the sound, you need to apply negative values.

Try changing your input to:

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

Upvotes: -1

ntf
ntf

Reputation: 189

I knew it was a dumb question.

Instead of 

track.connect(audioContext.destination);

and then

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

Just do it once

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

Upvotes: 4

Related Questions