WebAudio API 更改其中一个来源的音量

Question

我正在读这个article

我的目标是同时播放两种声音。一种声音的音量不同。拥有常规的“音频”标签不是解决方案，因为它在移动设备上效果不佳。所以我开始研究 Web Audio API.

我写了下面的代码，它适用于所有设备。唯一的问题 - 我不知道如何控制音量。示例中的代码不起作用（

请帮忙

function init() {
// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
bufferLoader = new BufferLoader(
    context,
    [
    'mp3/speech.mp3',
    'mp3/bg-melody.mp3',
    ],
    finishedLoading
    );

bufferLoader.load();
}

function finishedLoading(bufferList) {
   document.querySelector('.message').innerHTML = "Ready to play"
  // Create two sources and play them both together.
  source1 = context.createBufferSource();
  source2 = context.createBufferSource();
  source1.buffer = bufferList[0];
  source2.buffer = bufferList[1];
  source1.connect(context.destination);

  // This code is not working
  var gainNode = context.createGain();
  gainNode.gain.value = 0.1;
  source2.connect(gainNode);
  source2.connect(context.destination);
 source2.loop = true;
}

更新：

此更改解决了问题

source2.connect(gainNode).connect(context.destination);

Answer 1

connect() 方法 returns 和 AudioNode，然后必须调用 connect() 以便将节点链接在一起：

const gainNode = context.createGain()
source2
  .connect(gainNode)
  .connect(context.destination)

const $ = document.querySelector.bind(document)
const $$ = document.querySelectorAll.bind(document)
const audioCtx = new (AudioContext || webkitAudioContext)()
const gainNodes = [
  audioCtx.createGain(),
  audioCtx.createGain(),
]

const url = 'https://opus-bitrates.anthum.com/audio/music-96.opus'
loadAudio(url, gainNodes[0])
loadAudio(url, gainNodes[1],
  15.132 / (32 * 2),  // 32 beats in 15.132s
)

$$('input').forEach((el, i) => {
  gainNodes[i].gain.value = el.value / 100
  el.oninput = () => gainNodes[i].gain.value = el.value / 100
})
$('#play').onclick = play
$('#pause').onclick = pause

async function loadAudio(url, gainNode, delayS = 0) {
  const buffer = await (await fetch(url)).arrayBuffer()
  const source = audioCtx.createBufferSource()
  source.buffer = await audioCtx.decodeAudioData(buffer)
  source.loop = true
  source
    .connect(gainNode)
    .connect(audioCtx.destination)
  source.start(delayS)
}

function play() { audioCtx.resume() }
function pause() { audioCtx.suspend() }

<button id="play">Play</button><button id="pause">Pause</button><br />
<label><input type="range" value="50" max="100" /> Track 1</label><br />
<label><input type="range" value="50" max="100" /> Track 2</label>

WebAudio API 更改其中一个来源的音量

WebAudio API change volume for one of sources

javascript

audiocontext

web-audio-api