How to control the sound volume of (audio buffer) AudioContext()?

Question

I have following AudioContext() sound object in JavaScript.
Its volume is 100%. I want to play its volume in 10% (where volume = 0.1).
How can I reduce its volume to 10%?

 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%. 

Answer 1

We use GainNodes to control the volume.

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)

solution

 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%. 

Answer 2

You can use createGain of AudioContext for that puporse.

As shown below,

For more information checkout on 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
      }
    };