Web 音频 api 多个音频的立体声声像

Question

我已经添加了控制声音声相的功能，但我无法将所有声音都放入单个缓冲通道中。现在我在 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;
    
  }

以上代码是我修改后的代码。它可以平移所有音频，但仅适用于有限数量的设备，尤其不适用于 phone。当我在某些设备上添加修改后的代码时，音频没有声音。帮助我将多个声音添加到单个缓冲通道中，这样我就可以添加声像功能以通过单个 slider/seeker.

控制所有声音

我们将不胜感激。

Answer 1

谢谢你们的帮助，只是拐弯抹角。顺便说一句，我找到了问题的答案。希望对其他人有帮助。

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">

音频select或将select所有带有class“allmusic”的音频。您也可以将其用作

const myAudio = document.querySelectorAll('audio');

我只是为 select 所有元素添加了一种不同的点击事件方式享受。

Web 音频 api 多个音频的立体声声像

Web audio api stereo panner for multiple audio

audio

html5-audio

web-audio-api

audiocontext

audio-panning