solution

Question

127

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

rated 0 times [ 128] [ 1] / answers: 1 / hits: 15837 / 7 Years ago, thu, april 13, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tyemathewj

Add To Favorites

Follow

Total Points: 484

Total Questions: 107

Total Answers: 111

Location: Equatorial Guinea

Member since Sun, Feb 14, 2021

3 Years ago

answered 7 Years ago jocelynkarsynr · Accepted Answer

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