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

发布于 2024-10-19 05:05:23 字数 164 浏览 3 评论 0原文

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

像这样的东西：

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

原文

I know the html5 audio stuff is all very new, but is there a way to change the left/right balance on a sound?

Something like this:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠意 2024-10-26 05:05:23

这可以使用 Audio Web API 实现。

元素是一个非常基本的工具，仅允许您播放/暂停播放和更改音量。如果您需要更复杂的操作，则需要使用音频 Web API

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

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

步骤 1 - 加载音频源

首先，让我们创建一个元素，以便加载声音。如果您通过 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：Web Audio API
有关如何创建带有音量和立体声控制的“音箱”的教程：使用网络音频 API。
或者您可以在这里看到一个工作演示：DEMO。

其他示例

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

This is possible using Audio Web API

The <audio> element is a very basic tool that allows you only the play/pause the playback and change the volume. If you need more complex operations you will need to use Audio Web API

The way Audio Web API works is by building a graph/chain of nodes linked together. On one side you have your audio source - which can be an audio file or some audio waves generated by you. On the other side, you have your audio destination (audio sink) which will be your computer speakers/headphones. In the middle, you can put as many nodes as you want for manipulating the audio. For example, you can use the GainNode to control the audio volume or you can use the SterioPannerNode to control the left and right balance.

The API is very complex, but to just control the Left/Right balance is very simple:

Step 1 - Load audio source

First, let's create an <audio> element so we can load the sound. You don't have to use the <audio> element if you load your audio via XHR request, or if you generate the sound at runtime.

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

Step 2 - Audio Context

Let's create an AudioContext and load the audio from the element to the context object

// 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);

Step 3 Stereo Node

Let's create a StereoPannerNode which will control the balance

// 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

Final Step

Connect all the nodes to a single graph/chain. With the input node (audio source) and the output node (speaker/ headphones). You can add more nodes in the middle for other audio manipulations, like volume, filtering etc.

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

Additional reading

Full API: Web Audio API
Tutorial on how to create a "boombox" with volume and stereo controls: Using Web Audio API.
Or you see a working demo here: DEMO.

Additional example

This answer uses the StereoPannerNode which controls the balance in a single AudioNode. But if you want to split your audio and manipulate each channel (left/right) separately, you will need to ChannelSplitterNode and ChannelMergerNode. You can find a full example on how to use them here: https://stackoverflow.com/a/63272648/2658683

回复收藏 0 原文