问题描述
我添加了控制声音平移的功能,但我无法将所有声音放入单个缓冲通道。现在我在 github https://mdn.github.io/webaudio-examples/stereo-panner-node/ 上找到了一个项目。这个 github 项目的主要问题是虽然它几乎适用于所有设备,但它只能播放一种声音。我尝试使用 queryselectorall 对其进行修改,使其能够处理我网站上的所有噪音,但没有成功。
var audioCtx;
var myAudio = document.querySelectorAll("audio");
var panControl = document.querySelector('.panning-control');
var panValue = document.querySelector('.panning-value');
audioCtx = new window.AudioContext();
var panNode = audioCtx.createStereoPanner();
for (var i = 0; i < myAudio.length; i++)
{
source = audioCtx.createMediaElementSource(myAudio[i]);
source.connect(panNode);
}
panNode.connect(audioCtx.destination);
panControl.oninput = function() {
panNode.pan.value = panControl.value;
}
以上代码是我修改后的代码。它可以平移所有音频,但仅适用于有限数量的设备,尤其不适用于电话。当我在某些设备上添加修改后的代码时,音频没有声音。帮助我将多个声音添加到单个缓冲通道中,以便我可以添加平移功能以通过单个滑块/搜索器控制所有声音。
您的帮助将不胜感激。
解决方法
感谢没有帮助的人,只是在灌木丛中跳来跳去。顺便说一句,我找到了问题的答案。希望它可以帮助其他人。
let audioCtx;
const myAudio = document.getElementsByClassName('allmusic');
const myScript = document.querySelector('script');
const panControl = document.querySelector('.panning-control');
const panValue = document.querySelector('.panning-value');
for(let i = 0; i<myAudio.length; i++){
myAudio[i].addEventListener('play',() => {
if(!audioCtx) {
audioCtx = new window.AudioContext();
}
let source = audioCtx.createMediaElementSource(myAudio[i]);
let panNode = audioCtx.createStereoPanner();
panControl.oninput = function() {
panNode.pan.value = panControl.value;
panValue.innerHTML = panControl.value;
}
source.connect(panNode);
panNode.connect(audioCtx.destination);
});
}
用于平移控件
<input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
音频选择器将选择所有类为“allmusic”的音频。您也可以将其用作
const myAudio = document.querySelectorAll('audio');
我只是添加了一种不同的方式来为点击事件选择所有元素 享受。