我正在读这个article
我的目标是同时播放两个声音。一个声音在不同的音量。拥有常规的“音频”标签不是一个解决方案,因为它在移动设备上效果不佳。所以我开始潜入 Web Audio API。
我写了下面的代码,在所有设备上都能很好地工作。单一问题-我无法弄清楚如何控制音量。来自 example 的代码不工作 (
请帮助
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);
1
connect()方法返回一个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() }<on id="play">Play</on><on id="pause">Pause</on><br />
<label><input type="range" value="50" max="100" /> Track 1</label><br />
<label><input type="range" value="50" max="100" /> Track 2</label>本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（51条）