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>元素，以便我们加载声音。如果通过xhr请求加载音频，或者在运行时生成声音，则不必使用<audio>元素。

<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：Web Audio API
有关如何使用音量和立体声控件创建“ boombox”的教程：Using Web Audio API。
或者您在这里看到有效的演示：DEMO。

其他示例

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

Answer 2

目前，这不受支持。

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

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

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

2 个答案: