Постепенно меняйте Panner API веб-аудио

Вам не нужно использовать два паннера - Паннер стерео. Этот старый ответ является отличным ответом на этот вопрос:

Как создать очень простой левый/правый одинаковое панорамирование с помощью createPanner();

На самом деле я обнаружил, что простое панорамирование влево/вправо довольно сложно с API веб-аудио. Он действительно настроен для объемного/пространственного звука, и я, честно говоря, не очень хорошо в этом разбираюсь.

Способ, которым я обычно делаю панорамирование, выглядит следующим образом:

var panLeft = context.createGain();
var panRight = context.createGain();
var merger = context.createMerger(2);

source.connect(panLeft);
source.connect(panRight);
panLeft.connect(merger, 0, 0);
panRight.connect(merger, 0, 1);
merger.connect(context.destination);

document.getElementById('panInput').addEventListener('change', function () {
  var val = this.value;
  panLeft.gain.value = ( val * -0.5 ) + 0.5;
  panRight.gain.value = ( val * 0.5 ) + 0.5;
});

По сути, вы отправляете сигнал на два узла усиления, которые собираетесь использовать в качестве левого и правого каналов. Затем вы берете значение из своего элемента диапазона и используете его для установки усиления на каждом из узлов.

Это своего рода ленивая версия, хотя. В серьезных аудиоприложениях панорамирование обычно требует немного больше математики, чтобы убедиться, что общий уровень не изменился, но, надеюсь, этого достаточно для начала.

Я совершенно уверен, что есть лучший и более простой способ сделать это, но на данный момент он определенно работает для меня.
Если у кого-то еще есть лучший/более чистый способ сделать это, пожалуйста, поделитесь им здесь!
Спасибо Кевину Эннису за подсказку!

Файл JavaScript

//Create a splitter to "separete" the stereo audio data to two channels.
var splitter = context.createChannelSplitter(2);

//Connect your source to the splitter (usually, you will do it with the last audio node before context destination)
audioSource.connect(splitter);

//Create two gain nodes (one for each side of the stereo image)
var panLeft = context.createGain();
var panRight = context.createGain();

//Connect the splitter channels to the Gain Nodes that we've just created
splitter.connect(panRight,0);
splitter.connect(panLeft,1);

//Getting the input data from a "range" input from HTML (the code used on this range will be shown right on the end of this code)
var panPosition = document.getElementById("dispPanPositionLiveInput");
document.getElementById('panControl').addEventListener('change', function () {
  var val = this.value;
  panPosition.value = val;
  panLeft.gain.value = ( val * -0.5 ) + 0.5;
  panRight.gain.value = ( val * 0.5 ) + 0.5;
});

//Create a merger node, to get both signals back together
var merger = context.createChannelMerger(2);

//Connect both channels to the Merger
panLeft.connect(merger, 0, 0);
panRight.connect(merger, 0, 1);

//Connect the Merger Node to the final audio destination (your speakers)
merger.connect(context.destination);

HTML-файл

‹ input id="panControl" type="range" min="-1" max="1" step="0,001" value="0"/>