Web 音频 API 背后的基本概念

Web 音频 API 涉及在 音频上下文 中处理音频操作，并且旨在允许模块化路由。每个 音频节点 执行基本的音频操作，并与一个或多个其他音频节点链接以形成 音频路由图。支持多种具有不同通道布局的源，即使在单个上下文中也是如此。这种模块化设计提供了创建具有动态效果的复杂音频功能的灵活性。

音频节点通过其输入和输出链接，形成一条链，从一个或多个源开始，经过一个或多个节点，然后最终到达目的地（尽管如果你只想可视化一些音频数据，则不必提供目的地）。Web 音频的简单典型工作流程如下所示

1. 创建音频上下文。
2. 在上下文中创建音频源（例如 <audio>、振荡器或流）。
3. 创建音频效果（例如混响、双二次滤波器、声场定位器或压缩器节点）。
4. 选择音频的最终目的地（例如用户的电脑扬声器）。
5. 将源节点连接到零个或多个效果节点，然后连接到所选目的地。

每个输入或输出都由一个或多个音频通道组成，这些通道共同表示特定的音频布局。支持任何离散的通道结构，包括单声道、立体声、四声道、5.1等等。

您可以通过多种方式获取音频

• 声音可以通过音频节点（例如振荡器）在 JavaScript 中直接生成。
• 它可以从原始 PCM 数据（例如 .WAV 文件或 decodeAudioData() 支持的其他格式）创建。
• 它可以从 HTML 媒体元素（例如 <video> 或 <audio>）生成。
• 它可以从 WebRTC MediaStream（例如网络摄像头或麦克风）获取。

处理音频信号时，会发生采样。采样是将 连续信号 转换为 离散信号。换句话说，连续的声波（例如现场演奏的乐队）被转换为一系列数字样本（离散时间信号），允许计算机以不同的块处理音频。

您可以在维基百科页面 采样（信号处理） 上找到更多信息。

AudioBuffer 使用三个参数定义

• 通道数（单声道为 1，立体声为 2 等），
• 其长度，即缓冲区中样本帧数，
• 以及采样率，每秒播放的样本帧数。

样本是一个 32 位浮点数，表示特定通道（如果为立体声，则为左右）中音频流在每个特定时间点的值。帧或样本帧是在特定时间点播放的所有通道的所有值的集合：同时播放的所有通道的所有样本（立体声为两个，5.1 为六个等）。

采样率是这些样本（或帧，因为所有样本都同时播放）在一秒钟内播放的数量，以赫兹 (Hz) 为单位。采样率越高，音质越好。

让我们看一下一个单声道和一个立体声音频缓冲区，每个缓冲区时长 1 秒，速率为 44100Hz

• 单声道缓冲区将有 44,100 个样本和 44,100 个帧。length 属性将为 44,100。
• 立体声缓冲区将有 88,200 个样本，但仍然有 44,100 个帧。length 属性仍然为 44100，因为它等于帧数。

当缓冲区播放时，你将首先听到最左边的样本帧，然后是紧挨着它的一个，然后是下一个，依此类推，直到缓冲区的末尾。在立体声的情况下，你将同时听到两个通道。样本帧非常方便，因为它们独立于通道数，并以理想的方式表示时间，以便进行精确的音频操作。

以下是一些简单的示例

const context = new AudioContext();
const buffer = new AudioBuffer(context, {
  numberOfChannels: 2,
  length: 22050,
  sampleRate: 44100,
});

如果你使用上面的调用，你将得到一个具有两个通道的立体声缓冲区，当在以 44100 Hz 运行的 AudioContext 上回放时（非常常见，大多数正常的声卡都以这种速率运行），将持续 0.5 秒：22,050 帧 / 44,100 Hz = 0.5 秒。

const context = new AudioContext();
const buffer = new AudioBuffer(context, {
  numberOfChannels: 1,
  length: 22050,
  sampleRate: 22050,
});

如果你使用此调用，你将获得一个单声道缓冲区（单通道缓冲区），当在以 44,100 Hz 运行的 AudioContext 上回放时，将自动重新采样到 44,100 Hz（因此产生 44,100 帧），并持续 1.0 秒：44,100 帧 / 44,100 Hz = 1 秒。

Web 音频 API 使用平面缓冲区格式。左右声道存储如下

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)

这种结构在音频处理中很常见，使得可以轻松地独立处理每个声道。

另一种方法是使用交错缓冲区格式。

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)

这种格式普遍用于存储和回放音频，而无需进行大量处理，例如：.WAV 文件或解码后的 MP3 流。

由于 Web Audio API 旨在用于处理音频，因此它仅公开平面缓冲区。它使用平面格式，但在将音频发送到声卡进行回放时将其转换为交错格式。反之，当 API 解码 MP3 时，它从交错格式开始，并将其转换为平面格式以进行处理。

每个音频缓冲区可能包含不同数量的声道。大多数现代音频设备使用基本的单声道（仅一个声道）和立体声（左右声道）设置。一些更复杂的设备支持环绕声设置（如四声道和5.1 声道），由于其较高的声道数，可以带来更丰富的聆听体验。我们通常使用下表中详细说明的标准缩写来表示声道

当输入和输出的声道数不匹配时，必须进行上混或下混。以下规则由将AudioNode.channelInterpretation属性设置为speakers或discrete来控制。

通常，我们会获取一段时间内的输出以生成音频可视化，通常读取其增益或频率数据。然后，使用图形工具，我们将获得的数据转换为可视化表示形式，例如图表。Web Audio API 提供了一个AnalyserNode，它不会改变通过它的音频信号。此外，它输出音频数据，允许我们通过诸如<canvas>之类的技术来处理它。

您可以使用以下方法获取数据

AnalyserNode.getFloatFrequencyData()

将当前频率数据复制到传入的Float32Array数组中。

AnalyserNode.getByteFrequencyData()

将当前频率数据复制到传入的Uint8Array（无符号字节数组）中。

AnalyserNode.getFloatTimeDomainData()

将当前波形或时域数据复制到传入的Float32Array数组中。

AnalyserNode.getByteTimeDomainData()

将当前波形或时域数据复制到传入的Uint8Array（无符号字节数组）中。

音频空间化允许我们模拟音频信号在物理空间中某个点的定位和行为，模拟听众听到该音频的情况。在 Web Audio API 中，空间化由PannerNode和AudioListener处理。

声场处理器使用右手笛卡尔坐标来描述音频源的位置（作为向量）及其方向（作为 3D 方向锥）。例如，对于全向声源，锥体可以非常大。

类似地，Web Audio API 使用右手笛卡尔坐标来描述监听器：其位置（作为向量）及其方向（作为两个方向向量，向上和向前）。这些向量定义了监听器头部顶部的方向和监听器鼻子指向的方向。这些向量相互垂直。

在音频术语中，扇入描述了ChannelMergerNode如何获取一系列单声道输入源并输出单个多声道信号的过程。

扇出描述了相反的过程，即ChannelSplitterNode如何获取多声道输入源并输出多个单声道输出信号的过程。