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

我实际上发现简单的左/右平移对于Web Audio 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;
});

基本上，您将信号发送到两个增益节点，您将用作左右声道。然后从range元素中获取值，并使用它来设置每个节点的增益。

这是一种懒惰的版本。在严肃的音频应用程序中，平移通常需要更多的数学运算来确保整体水平没有变化 - 但希望这足以让你开始。

Answer 3

我很确定有一种更好更简单的方法可以做到这一点但是，现在，它绝对适用于我。
如果其他人有更好/更清洁的方式，请在这里分享！
感谢Kevin Ennis给我这个提示！

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文件

＆LT; input id =“panControl”type =“range”min =“ - 1”max =“1”step =“0.001”value =“0”/＆gt;

逐步更改Web Audio API Panner

3 个答案: