逐渐改变 Web Audio API Panner答案

【问题标题】：Gradually Change Web Audio API Panner逐渐改变 Web Audio API Panner
【发布时间】：2023-03-13 08:39:01
【问题描述】：

我正在尝试使用简单的 HTML 范围输入来控制 Web 音频 API 音频的平移，但我的音频输出只能获得 3 个“位置”：
-中心
-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"/>

有谁知道我做错了什么？

【问题讨论】：

标签： javascript web-audio-api audio-panning

【解决方案1】：

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

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

【讨论】：

哇。感谢您发布此信息。平移是 Web Audio 规范中的一个部分，这对我来说有点难以理解。 @oliverdrummond，你真的应该接受这个答案而不是我的。它的方式，方式更清洁。
不错！这个我也试试！谢谢@cwilso！
刚刚试了！这很棒！只需将输入值从 -45 和 45 更改为 -90 和 90，这创建了一个“更大”的立体图像。非常感谢！

【解决方案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 元素中获取值并使用它来设置每个节点的增益。

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

【讨论】：

感谢@Kevin Ennis 的回答！它可以工作（有一些小的调整）。我将在这里发布最终代码！

【解决方案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 文件

【讨论】：