Постепенно Изменение Web Audio API Panner

Question

Я пытаюсь использовать простой ввод диапазона HTML для управления панорамированием моего Web Audio API аудио, но я могу получить только 3 «позицию» для моего аудио выхода:
-Center
-100% влево
-100% справа.

Я хотел бы иметь что-то между ними делает позиции, как 20% слева и 80% вправо и так далее ...

код, который я использую:

//Creating the node 
var pannerNode = context.createPanner(); 
//Getting the value from the HTML input and using it on the position X value 
document.getElementById('panInput').addEventListener('change', function() { 
    pannerNode.setPosition(this.value, 0, 0); 
}); 

И он относится к этому входу на мой HTML файл:

<input id="panInput" type="range" min="-1" max="1" step="0.001" value="0"/> 

кто-нибудь знает, что я делаю неправильно?

Answer 1

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

How to create very basic left/right equal power panning with createPanner();

Answer 2

Я действительно нашел простой поворот влево/вправо, чтобы быть сложным с помощью 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; 
}); 

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

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

Answer 3

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

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

< ввода ID = "panControl" Тип = "Диапазон" мин = - шаг "1" макс = "1" = "0,001 "value =" 0 "/>