Web Audio API

基线广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用 2021 年 4 月.

Web Audio API 提供了一个功能强大且用途广泛的系统，用于控制 Web 上的音频，允许开发人员选择音频源、向音频添加效果、创建音频可视化、应用空间效果（例如声像定位）等等。

Web 音频概念和用法

Web Audio API 涉及在**音频上下文**内处理音频操作，并且旨在允许**模块化路由**。基本音频操作使用**音频节点**执行，这些节点链接在一起形成**音频路由图**。即使在一个上下文中，也支持多种具有不同通道布局类型的源。这种模块化设计提供了灵活地创建具有动态效果的复杂音频功能。

音频节点通过其输入和输出链接到链和简单的网络中。它们通常从一个或多个源开始。源在非常小的时隙（通常每秒数万个）提供声音强度（样本）数组。这些可以是数学计算的（例如 OscillatorNode），也可以是来自声音/视频文件（如 AudioBufferSourceNode 和 MediaElementAudioSourceNode）和音频流（MediaStreamAudioSourceNode）的录音。事实上，声音文件只是声音强度本身的录音，这些录音来自麦克风或电子乐器，并混合成一个复杂的波形。

这些节点的输出可以链接到其他节点的输入，这些节点将这些声音样本流混合或修改成不同的流。一种常见的修改是将样本乘以一个值以使其更响亮或更安静（如 GainNode 中的情况）。一旦声音经过充分处理以达到预期效果，它就可以链接到目的地的输入（BaseAudioContext.destination），该目的地将声音发送到扬声器或耳机。只有当用户应该听到音频时，才需要此最后的连接。

Web 音频的简单典型工作流程如下所示

创建音频上下文
在上下文中，创建源——例如 <audio>、振荡器、流
创建效果节点，例如混响、双二次滤波器、声像定位器、压缩器
选择音频的最终目的地，例如您的系统扬声器
将源连接到效果，并将效果连接到目的地。

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrows between them pointing from left to right, indicating the flow of audio information.

时间由高精度和低延迟控制，允许开发人员编写能够准确响应事件并能够针对特定样本的代码，即使在高采样率下也是如此。因此，鼓机和音序器等应用程序触手可及。

Web Audio API 还允许我们控制音频的空间化方式。使用基于源-监听器模型的系统，它允许控制声像定位模型并处理由移动源（或移动监听器）引起的距离衰减。

注意：您可以在我们的文章 Web Audio API 背后的基本概念中更详细地了解 Web Audio API 的理论。

Web Audio API 目标受众

对于不熟悉音频或音乐术语的人来说，Web Audio API 似乎令人生畏，并且由于它包含大量功能，因此如果您是开发人员，入门可能会很困难。

它可用于将音频合并到您的网站或应用程序中，例如提供 futurelibrary.no 之类的氛围，或表单上的听觉反馈。但是，它也可以用于创建高级交互式乐器。考虑到这一点，它适合开发人员和音乐家。

对于熟悉编程但需要了解一些 API 术语和结构的初学者，我们有一个简单的入门教程。

还有一个 Web Audio API 背后的基本概念文章，帮助您了解数字音频的工作原理，尤其是在 API 领域。这还包括对 API 所构建的一些概念的良好介绍。

学习编码就像玩纸牌——你学习规则，然后玩，然后你回去再学习规则，然后你再玩。因此，如果一些理论在第一个教程和文章之后不太合适，还有一个高级教程，它扩展了第一个教程以帮助您练习所学内容，并应用一些更高级的技术来构建步进音序器。

我们还提供了其他教程和全面的参考材料，涵盖了 API 的所有功能。请参阅此页面上的侧边栏了解更多信息。

如果您更熟悉音乐方面的内容，熟悉音乐理论概念，想要开始构建乐器，那么您可以继续使用高级教程和其他教程作为指南开始构建（上面链接的教程涵盖了调度音符、创建定制振荡器和包络，以及 LFO 等）。

如果您不熟悉编程基础知识，您可能需要先查阅一些 JavaScript 初学者教程，然后再返回此处——请参阅我们的 JavaScript 初学者学习模块，这是一个很好的起点。

Web Audio API 接口

Web Audio API 有许多接口和关联事件，我们已将其分为九个功能类别。

通用音频图定义

在 Web Audio API 用法中塑造音频图的通用容器和定义。

AudioContext: AudioContext 接口表示由音频模块构建的音频处理图，这些模块链接在一起，每个模块由一个 AudioNode 表示。音频上下文控制其包含的节点的创建以及音频处理或解码的执行。在执行任何其他操作之前，您需要创建一个 AudioContext，因为所有操作都发生在上下文中。
AudioNode: AudioNode 接口表示音频处理模块，例如音频源（例如 HTML <audio> 或 <video> 元素）、音频目的地、中间处理模块（例如 BiquadFilterNode 之类的滤波器，或 GainNode 之类的音量控制）。
AudioParam: AudioParam 接口表示音频相关参数，例如 AudioNode 的参数之一。可以将其设置为特定值或值的变化，并且可以安排在特定时间并遵循特定模式发生。
AudioParamMap: 为一组 AudioParam 接口提供类似映射的接口，这意味着它提供方法 forEach()、get()、has()、keys() 和 values()，以及 size 属性。
BaseAudioContext: BaseAudioContext 接口充当在线和离线音频处理图的基本定义，分别由 AudioContext 和 OfflineAudioContext 表示。您不会直接使用 BaseAudioContext——您将通过这两个继承接口之一使用其功能。
The ended 事件: 当媒体播放结束时触发 ended 事件。

定义音频源

定义 Web Audio API 中使用的音频源的接口。

AudioScheduledSourceNode: AudioScheduledSourceNode 是几种音频源节点接口的父接口。它是一个AudioNode。
OscillatorNode: OscillatorNode 接口表示周期性波形，例如正弦波或三角波。它是一个AudioNode音频处理模块，用于创建给定频率的波形。
AudioBuffer: AudioBuffer 接口表示驻留在内存中的简短音频资产，可以使用 BaseAudioContext.decodeAudioData 方法从音频文件创建，或者使用原始数据使用 BaseAudioContext.createBuffer 创建。解码成这种形式后，音频就可以放入 AudioBufferSourceNode 中。
AudioBufferSourceNode: AudioBufferSourceNode 接口表示一个音频源，该音频源由存储在 AudioBuffer 中的内存中音频数据组成。它是一个充当音频源的 AudioNode。
MediaElementAudioSourceNode: MediaElementAudioSourceNode 接口表示一个音频源，该音频源由 HTML <audio> 或 <video> 元素组成。它是一个充当音频源的 AudioNode。
MediaStreamAudioSourceNode: MediaStreamAudioSourceNode 接口表示一个音频源，该音频源由 MediaStream（例如网络摄像头、麦克风或从远程计算机发送的流）组成。如果流上存在多个音频轨道，则使用其 id 在字典序（字母顺序）上排在最前面的轨道。它是一个充当音频源的 AudioNode。
MediaStreamTrackAudioSourceNode: 类型为 MediaStreamTrackAudioSourceNode 的节点表示一个音频源，其数据来自 MediaStreamTrack。使用 createMediaStreamTrackSource() 方法创建节点时，您指定要使用的轨道。这提供了比 MediaStreamAudioSourceNode 更多的控制。

定义音频效果滤波器

用于定义要应用于音频源的效果的接口。

BiquadFilterNode: BiquadFilterNode 接口表示一个简单的低阶滤波器。它是一个AudioNode，可以表示不同类型的滤波器、音调控制设备或图形均衡器。BiquadFilterNode 始终只有一个输入和一个输出。
ConvolverNode: ConvolverNode 接口是一个AudioNode，它对给定的 AudioBuffer 执行线性卷积，通常用于实现混响效果。
DelayNode: DelayNode 接口表示一个延迟线；一个AudioNode音频处理模块，它会导致输入数据到达与其传播到输出之间存在延迟。
DynamicsCompressorNode: DynamicsCompressorNode 接口提供压缩效果，该效果降低信号最响亮部分的音量，以帮助防止在同时播放和复用多个声音时可能发生的削波和失真。
GainNode: GainNode 接口表示音量变化。它是一个AudioNode音频处理模块，在输入数据传播到输出之前，它会对输入数据应用给定的增益。
WaveShaperNode: WaveShaperNode 接口表示非线性失真器。它是一个AudioNode，它使用曲线对信号应用波形整形失真。除了明显的失真效果外，它还常用于为信号添加温暖的感觉。
PeriodicWave: 描述可用于塑造 OscillatorNode 输出的周期性波形。
IIRFilterNode: 实现一个通用的无限脉冲响应 (IIR) 滤波器；这种类型的滤波器也可用于实现音调控制设备和图形均衡器。

定义音频目标

处理完音频后，这些接口定义了音频输出的位置。

AudioDestinationNode: AudioDestinationNode 接口表示给定上下文中音频源的最终目标——通常是设备的扬声器。
MediaStreamAudioDestinationNode: MediaStreamAudioDestinationNode 接口表示一个音频目标，该音频目标由一个具有单个 AudioMediaStreamTrack 的 WebRTC MediaStream 组成，它可以以类似于从 getUserMedia() 获得的 MediaStream 的方式使用。它是一个充当音频目标的 AudioNode。

数据分析和可视化

如果要从音频中提取时间、频率和其他数据，则需要 AnalyserNode。

AnalyserNode: AnalyserNode 接口表示一个能够提供实时频率和时域分析信息的节点，用于数据分析和可视化。

拆分和合并音频通道

要拆分和合并音频通道，您将使用这些接口。

ChannelSplitterNode: ChannelSplitterNode 接口将音频源的不同通道分离成一组单声道输出。
ChannelMergerNode: ChannelMergerNode 接口将不同的单声道输入重新组合成一个输出。每个输入都将用于填充输出的一个通道。

音频空间化

这些接口允许您为音频源添加音频空间化声像定位效果。

AudioListener: AudioListener 接口表示用于音频空间化的音频场景中唯一聆听者的位置和方向。
PannerNode: PannerNode 接口表示音频源信号在 3D 空间中的位置和行为，允许您创建复杂的声像定位效果。
StereoPannerNode: StereoPannerNode 接口表示一个简单的立体声声像定位节点，可用于将音频流向左或向右声像定位。

JavaScript 中的音频处理

使用音频工作线程，您可以定义用 JavaScript 或 WebAssembly 编写的自定义音频节点。音频工作线程实现了 Worklet 接口，它是 Worker 接口的轻量级版本。

AudioWorklet: AudioWorklet 接口可通过 AudioContext 对象的 audioWorklet 获取，并允许您向音频工作线程添加模块以在主线程之外执行。
AudioWorkletNode: AudioWorkletNode 接口表示一个嵌入到音频图中并可以向相应的 AudioWorkletProcessor 传递消息的 AudioNode。
AudioWorkletProcessor: AudioWorkletProcessor 接口表示在 AudioWorkletGlobalScope 中运行的音频处理代码，该代码直接生成、处理或分析音频，并且可以向相应的 AudioWorkletNode 传递消息。
AudioWorkletGlobalScope: AudioWorkletGlobalScope 接口是 WorkletGlobalScope 派生的对象，表示运行音频处理脚本的工作线程上下文；它旨在允许使用工作线程中的 JavaScript 直接生成、处理和分析音频数据，而不是在主线程上。

已弃用：脚本处理器节点

在定义音频工作线程之前，Web Audio API 使用 ScriptProcessorNode 进行基于 JavaScript 的音频处理。由于代码在主线程中运行，因此性能较差。出于历史原因保留了 ScriptProcessorNode，但已标记为已弃用。

ScriptProcessorNode 已弃用: ScriptProcessorNode 接口允许使用 JavaScript 生成、处理或分析音频。它是一个AudioNode音频处理模块，它链接到两个缓冲区，一个包含当前输入，一个包含输出。每次输入缓冲区包含新数据时，都会向对象发送一个实现 AudioProcessingEvent 接口的事件，并且事件处理程序在用数据填充输出缓冲区后终止。
audioprocess (event) 已弃用: 当 Web Audio API ScriptProcessorNode 的输入缓冲区准备就绪以进行处理时，将触发 audioprocess 事件。
AudioProcessingEvent 已弃用: AudioProcessingEvent 表示当 ScriptProcessorNode 输入缓冲区准备就绪以进行处理时发生的事件。

离线/后台音频处理

可以使用以下方法在后台快速处理/渲染音频图——将其渲染到 AudioBuffer 而不是设备的扬声器。

OfflineAudioContext: OfflineAudioContext 接口是一个AudioContext 接口，表示由链接在一起的 AudioNode 构建的音频处理图。与标准 AudioContext 相比，OfflineAudioContext 不会真正渲染音频，而是尽可能快地在缓冲区中生成音频。
complete (event): 当 OfflineAudioContext 的渲染终止时，将触发 complete 事件。
OfflineAudioCompletionEvent: OfflineAudioCompletionEvent 表示当 OfflineAudioContext 的处理终止时发生的事件。complete 事件使用此接口。

指南和教程

高级技巧：创建和排序音频

在本教程中，我们将介绍声音创建和修改，以及计时和调度。我们将介绍样本加载、包络、滤波器、波表和频率调制。如果您熟悉这些术语并希望了解其在 Web Audio API 中的应用，那么您来对地方了。

使用 AudioWorklet 进行后台音频处理

本文介绍了如何在 Web Audio 应用程序中创建音频工作线程处理器并使用它。

Web Audio API 背后的基本概念

本文解释了 Web Audio API 功能背后的部分音频理论，以帮助您在设计应用程序如何路由音频时做出明智的决策。如果您还不是音频工程师，它将为您提供足够的背景知识，以便您理解 Web Audio API 的工作原理。

使用 ConstantSourceNode 控制多个参数

本文演示了如何使用 ConstantSourceNode 将多个参数链接在一起，以便它们共享相同的值，可以通过设置 ConstantSourceNode.offset 参数的值来更改该值。

示例和教程：简单的合成器键盘

本文介绍了一个可以使用鼠标演奏的视频键盘的代码和演示。该键盘允许您在标准波形和一个自定义波形之间切换，并且您可以使用键盘下方的音量滑块控制主增益。此示例使用了以下 Web API 接口：AudioContext、OscillatorNode、PeriodicWave 和 GainNode。

分析 Web Audio 用法的工具

在处理 Web Audio API 代码时，您可能会发现需要使用工具来分析您创建的节点图或以其他方式调试您的工作。本文讨论了可帮助您执行此操作的工具。

使用 IIR 滤波器

Web Audio API 的IIRFilterNode 接口是一个AudioNode处理器，它实现了通用无限脉冲响应（IIR）滤波器；这种类型的滤波器可用于实现音调控制设备和图形均衡器，并且可以指定滤波器响应参数，以便根据需要进行调整。本文探讨了如何实现一个滤波器并在一个简单的示例中使用它。

使用 Web Audio API

让我们看看如何开始使用Web Audio API。我们将简要介绍一些概念，然后研究一个简单的收音机示例，该示例允许我们加载音频轨道、播放和暂停它，并更改其音量和立体声声像。

使用 Web Audio API 进行可视化

Web Audio API 最有趣的特性之一是能够从音频源中提取频率、波形和其他数据，然后可以使用这些数据创建可视化效果。本文解释了如何做到这一点，并提供了一些基本用例。

Web Audio API 最佳实践

在编写创意代码时，没有严格的正确或错误的方法。只要您考虑安全性、性能和可访问性，就可以适应自己的风格。在本文中，我们将分享一些最佳实践——关于使用 Web Audio API 的指南、技巧和窍门。

Web 音频空间化基础

Web Audio API 除了拥有种类繁多的声音处理（和其他）选项之外，还包括允许您模拟监听者围绕声源移动时声音差异的功能，例如在 3D 游戏中围绕声源移动时进行声像平移。该功能的正式术语是空间化，本文将介绍如何实现此类系统的基础知识。

示例

您可以在 GitHub 上的webaudio-example 仓库中找到许多示例。

规范

规范
Web Audio API # AudioContext

Tones：一个使用 Web Audio API 播放特定音调/音符的简单库。
Tone.js：一个用于在浏览器中创建交互式音乐的框架。
howler.js：一个 JS 音频库，默认使用Web Audio API，并回退到HTML 音频，并提供其他有用功能。
Mooog：jQuery 样式的 AudioNode 链式调用、混音器样式的发送/返回等等。
XSound：用于合成器、效果、可视化、录音等的 Web Audio API 库。
OpenLang：一个使用 Web Audio API 将来自不同来源的视频和音频录制并组合到单个文件中的 HTML 视频语言实验室 Web 应用程序（GitHub 上的源代码）
Pts.js：简化 Web 音频可视化（指南）