Web-Audio-API-的介绍与应用

什么是 Web Audio API

作为一个大龄程序员来说，对于网页的认知大部分是停留在 HTML/CSS/Javascript 中，我们会很自豪的认为网页就是用来显示内容和调用服务器 API 的一个 UI 组件。

但是历史总是在不停的教育我们，不学习就会倒退，倒退就会不知者无畏。Web Audio API 就足够对我们进行打脸。

在这之前，网页可以对音频进行处理的方式还仅仅是 <audio> 标签，但是其能力十分的有限，对于更高级的音频操作完全的无能为力。为了增强浏览器的音频处理能力，W3C 着手开始了 Web Audio API Specification 的工作。

在 Web Auido API 的设计目标中是结合游戏音频处理系统以及桌面音频应用程序的需求进行设计与开发。也就是说，使用 Web Audio API 我们几乎可以完成一个专业的音频处理软件（比如 Cubase / Logic）的构建，而这一切都是构建在浏览器技术之上。

从 API 的设计上，可以做到：

• 实现高精度的音频计算。主要应用于 DAW（音序器），软件乐器等场景。
• 音频混响器。音乐混缩的必要能力。
• 3D 音频。在游戏和音乐制作中都需要。
• 与 <audio> / WebRTC 的集成。

Web Audio API 的设计哲学

简单来说，所谓的音频处理其实就是标准的 IO 函数。从某个地方获取一个音频流 (Input)，经过实时计算处理后发送去某个地方 (Destination)，而这个处理也就是 Effect（从习惯上来讲，我更愿意称其为 Filter 函数）。

经过了复杂的 Input / Destination 编排之后，就可以得到一个路由表（Routing Graph）。这个路由表定义了音频如何在不同的 Filter 函数中进行穿梭。这整个过程的定义也就是 Audio Context。

AudioContext 类承载了音频流的流转方式。

一个最简单的 Audio Context 例子可以是：

1. 定义音频流来源于一个 audio 标签。
2. 将音频流链接到一个音量放大器。
3. 将音量放大器链接到标准音频输出接口（电脑音箱）。

这样我们就得到了一个实时音量增益的音频处理流。这这个基础之上，我们还可以在 #2 之后，再接入一个混响效果器，加入一点点回声效果，让声音稍微的圆润一些。其链接拓扑结构就成为了：

<audio> 标签 —> 音量增益器 —-> 混响器 —-> 电脑音箱。

上面的介绍目的是为了表达我们要用这个可插拔的 Filter 函数的思路来理解整个 Web Audio API 的设计将会变得非常的轻松。

在 Web Audio API 中，一个个不同的 Filter 函数设计为一个个不同的 AudioNode 类，所有的 AuidoNode 子类都继承自 AudioNode 类。而 AudioNode 有两个核心函数 `connect() 和 `disconnect()`。

也就是这两个函数将不同的 AudioNode 子类进行流程编排而得到了一个处理图（Processing Graph）。

我们在试图理解整个 Web Audio API 的设计理念中最重要的就是理解一个音频处理系统本质就是一个编排出来的有向图过程以及音频处理就是从输入转为输出的过程这两点。

Web Audio API 思维导图

笔者对常用的 Web Audio API 进行了归类，方便初学 Web Audio API 的同学进行整理。

Web Audio API 的应用

查乐谱 – 学琴新姿势是一个新兴的电子乐谱平台，同时也在尝试使用 Web Audio API 进行 MIR 领域的产品开发。

1. 节拍器应用

查乐谱 – 小声节拍器​www.chayuepu.com

这个应用利用了 Web Audio API 实时的创建音频，同时也利用了 Analyzer 节点进行频谱计算。

使用了 Web Audio API 的优点：

在传统的网页开发中，对于类似于节拍器这种应用的开发通常会依赖与 <audio> 标签通过变成的方式进行播放与暂停工作。但是这种控制在延时上表现会很糟糕，无法应用在节拍器这种专业领域上。

2. 调音器应用

查乐谱 – 小声调音器​www.chayuepu.com

这款调音器这是一个更为经典的音频处理场景。

1. 从麦克风获取实时音频流。
2. 对音频流进行实时音高识别（Pitch Detection），在处理过程中直接获取到了音频流的 FFT 频域信息，利用简单的计算规则计算得出。
3. 对实时音频进行频谱绘制（利用 Analyzer 接口）。