Web Audio API
Baseline 广泛可用 *
Web Audio API 为在 Web 上控制音频提供了一个强大且多功能的系统，它允许开发者选择音频源、添加音频效果、创建音频可视化、应用空间效果（如声像）等等。
Web 音频概念和用法
Web Audio API 涉及在**音频上下文**中处理音频操作，并且被设计为允许**模块化路由**。基本的音频操作由**音频节点**执行，这些节点链接在一起形成**音频路由图**。即使在单个上下文中，也支持多种来源（具有不同类型的通道布局）。这种模块化设计提供了创建具有动态效果的复杂音频功能的灵活性。
音频节点通过其输入和输出链接成链和简单的网络。它们通常从一个或多个源开始。源在非常小的时间片内提供声音强度数组（采样），通常每秒数万个。这些可以通过数学计算（例如 OscillatorNode），或者它们可以是来自声音/视频文件（如 AudioBufferSourceNode 和 MediaElementAudioSourceNode）的录音以及音频流（MediaStreamAudioSourceNode）。实际上，声音文件本身只是声音强度的录音，这些声音强度来自麦克风或电子乐器，然后混合成一个单一的复杂波。
这些节点的输出可以链接到其他节点的输入，这些节点将这些声音样本流混合或修改成不同的流。一个常见的修改是将样本乘以一个值，使其声音更大或更小（例如 GainNode）。一旦声音经过充分处理以达到预期效果，就可以将其链接到目标（BaseAudioContext.destination）的输入，后者将声音发送到扬声器或耳机。只有当用户应该听到音频时，才需要此最后的连接。
一个简单、典型的 Web 音频工作流程如下所示
- 创建音频上下文
- 在上下文中，创建源 — 例如
<audio>、振荡器、流 - 创建效果节点，例如混响、双二阶滤波器、声像器、压缩器
- 选择音频的最终目的地，例如您的系统扬声器
- 将源连接到效果，并将效果连接到目的地。
计时以高精度和低延迟控制，允许开发者编写能够准确响应事件并能够瞄准特定样本的代码，即使在高速采样率下也是如此。因此，鼓机和音序器等应用程序都触手可及。
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— 您将通过这两个继承接口之一使用其功能。 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的 WebRTCMediaStream组成，其使用方式类似于从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接口表示嵌入在音频图中的AudioNode，并且可以向相应的AudioWorkletProcessor传递消息。 AudioWorkletProcessor-
AudioWorkletProcessor接口表示在AudioWorkletGlobalScope中运行的音频处理代码，它直接生成、处理或分析音频，并且可以向相应的AudioWorkletNode传递消息。 AudioWorkletGlobalScope-
AudioWorkletGlobalScope接口是一个派生自WorkletGlobalScope的对象，表示运行音频处理脚本的工作线程上下文；它旨在允许在工作线程而不是主线程中直接使用 JavaScript 生成、处理和分析音频数据。
已废弃：脚本处理器节点
在定义音频工作线程之前，Web Audio API 使用 ScriptProcessorNode 进行基于 JavaScript 的音频处理。由于代码在主线程中运行，因此它们的性能不佳。ScriptProcessorNode 因历史原因保留，但已标记为废弃。
ScriptProcessorNode已废弃-
**
ScriptProcessorNode** 接口允许使用 JavaScript 生成、处理或分析音频。它是一个AudioNode音频处理模块，它链接到两个缓冲区，一个包含当前输入，一个包含输出。每当输入缓冲区包含新数据时，就会向对象发送一个实现AudioProcessingEvent接口的事件，并且当它用数据填充输出缓冲区时，事件处理程序会终止。 audioprocess(事件) 已废弃-
当 Web Audio API
ScriptProcessorNode的输入缓冲区准备好处理时，会触发audioprocess事件。 AudioProcessingEvent已废弃-
AudioProcessingEvent表示当ScriptProcessorNode输入缓冲区准备好处理时发生的事件。
离线/后台音频处理
可以使用以下方法在后台非常快速地处理/渲染音频图——将其渲染到 AudioBuffer 而不是设备的扬声器。
OfflineAudioContext-
**
OfflineAudioContext** 接口是一个AudioContext接口，表示一个由相互链接的AudioNode构建的音频处理图。与标准AudioContext不同，OfflineAudioContext并不真正渲染音频，而是**尽可能快地**在缓冲区中生成音频。 complete(事件)-
当
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。- 使用 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-examples 仓库 中找到许多示例。
规范
| 规范 |
|---|
| Web Audio API # AudioContext |
浏览器兼容性
加载中…
另见
教程/指南
库
- Tone.js：一个用于在浏览器中创建交互式音乐的框架。
- howler.js：一个 JavaScript 音频库，默认使用 Web Audio API，并回退到 HTML 音频，同时提供其他有用的功能。
- Mooog：jQuery 风格的 AudioNodes 链式调用、混音器风格的发送/返回等。
- XSound：用于合成器、效果、可视化、录音等的 Web Audio API 库。
- OpenLang：HTML 视频语言实验室 Web 应用程序，使用 Web Audio API 录制并将来自不同来源的视频和音频组合成一个文件（GitHub 上的源代码）
- Pts.js：简化 Web 音频可视化（指南）