Web audio api stereo panner for multiple audio

Question

I have added the feature to control panning of sounds but I cannot get all sound into a single buffer channel. Now I found a project on github https://mdn.github.io/webaudio-examples/stereo-panner-node/ . The main problem int this github project is though it works on almost all devices it only play a single sound. I tried to modify it using queryselectorall for it to work on all noises throughout my website but no luck.

      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;
    
  }

The above code is my modified code. It pans all audio but it works only for a limited number of devices and especially not on phone. No sound comes from audio when I add the modified code on some devices. Help me add multiple sounds into a single buffer channel so I can add panning function to control all sounds through a single slider/seeker.

Your help would be appreciated.

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

Селектор аудио выберет все аудио с классом «allmusic». Вы также можете использовать его как

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

Я просто добавил другой способ выбора всех элементов для событий щелчка. Наслаждайтесь.