javascriptaudioaudiobuffer

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


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


Solution

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