4

我正在尝试使用简单的 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"/>

有谁知道我做错了什么？

4

3 回答 3

4

您不需要使用两个声像器 - 声像器是立体声的。这个旧答案是这个问题的一个很好的答案：

如何使用 createPanner() 创建非常基本的左/右等功率平移；

于 2013-09-06T16:16:46.047 回答
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;
});

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

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

于 2013-09-04T04:22:12.993 回答
0

我很确定有一种更好、更简单的方法可以做到这一点，但就目前而言，它肯定对我有用。
如果其他人有更好/更清洁的方法，请在这里分享！
感谢 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 文件

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

于 2013-09-07T20:28:01.613 回答