在javascript中播放音频时更改左/右平衡

Question

我知道 html5 音频的东西都很新，但是有没有办法改变声音的左/右平衡？

像这样的东西：

var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();

Answer 1

这可以使用 Audio Web API

该<audio>元素是一个非常基本的工具，它只允许您播放/暂停播放和更改音量。如果您需要更复杂的操作，您将需要使用Audio Web API

Audio Web API 的工作方式是构建链接在一起的节点图/链。一方面，您有自己的音频源——可以是音频文件或由您生成的一些音频波。另一方面，您有您的音频目的地（音频接收器），这将是您的计算机扬声器/耳机。在中间，您可以放置​​任意数量的节点来操作音频。例如，您可以使用GainNode来控制音量或使用SterioPannerNode来控制左右平衡。

API 非常复杂，但仅控制左右平衡非常简单：

步骤 1 - 加载音频源

首先，让我们创建一个<audio>元素，以便我们可以加载声音。你不必须使用<audio>，如果你通过XHR请求加载音频元素，或者如果你在运行时生成的声音。

<audio src="myCoolTrack.mp3"></audio>

第 2 步 - 音频上下文

让我们创建一个AudioContext并将音频从元素加载到上下文对象

// for legacy browsers
const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioContext = new AudioContext();

// get the audio element
const audioElement = document.querySelector('audio');

// pass it into the audio context
const track = audioContext.createMediaElementSource(audioElement);

步骤 3 立体节点

让我们创建一个StereoPannerNode将控制平衡的

// default pan set to 0 - center
const stereoNode = new StereoPannerNode(audioContext, { pan: 0 });

// change the value of the balance by updating the pan value
stereoNode.pan.value = -1; // left
stereoNode.pan.value = 0; // center
stereoNode.pan.value = 1; // right

最后一步

将所有节点连接到单个图/链。带有输入节点（音频源）和输出节点（扬声器/耳机）。您可以在中间添加更多节点以进行其他音频操作，例如音量、过滤等。

track.connect(stereoNode).connect(audioContext.destination);

补充阅读

• 完整 API：网络音频 API
• 关于如何使用音量和立体声控件创建“boombox”的教程：使用 Web 音频 API。
• 或者您在这里看到一个工作演示：DEMO。

附加示例

此答案使用StereoPannerNode控制单个AudioNode. 但是，如果您想拆分音频并分别操作每个通道（左/右），则需要ChannelSplitterNode和ChannelMergerNode。您可以在此处找到有关如何使用它们的完整示例：https : //stackoverflow.com/a/63272648/2658683

Answer 2

截至 2021 年，可以使用Web Audio API实现这一点。请参阅此答案以获取更多信息。

原答案：

目前，不支持此操作。

您可以检查 w3c 规范以获取支持的属性和方法。请注意，浏览器通常提供更多/更少或不同的东西。但在这种情况下：没有浏览器支持音频平衡更改。

http://dev.w3.org/html5/spec/Overview.html#audio