如何控制（音頻緩衝區）AudioContext（）的音量？

Question

我在JavaScript中有以下AudioContext（）聲音對象。
它的體積是100％。我想以10％的體積播放它（其中音量= 0.1）。
如何將其體積縮小至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

我們使用GainNodes控制音量。

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) 

解決方案

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

可以使用AudioContext的createGain爲puporse。

如下所示，

有關詳細信息結帳上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 
     } 
    };