什么是 Web Audio API
作为一个大龄程序员来说，对于网页的认知大部分是停留在HTML/CSS/Javascript中，我们会很自豪的认为网页就是用来显示内容和调用服务器API的一个UI组件。
但是历史总是在不停的教育我们，不学习就会倒退，倒退就会不知者无畏。Web Audio API 就足够对我们进行打脸。
在这之前，网页可以对音频进行处理的方式还仅仅是
在Web Auido API的设计目标中是结合游戏音频处理系统以及桌面音频应用程序的需求进行设计与开发。也就是说，使用Web Audio API我们几乎可以完成一个专业的音频处理软件（比如Cubase / Logic ）的构建，而这一切都是构建在浏览器技术之上。
从API的设计上，可以做到：
- 实现高精度的音频计算。主要应用于DAW（音序器），软件乐器等场景。
- 音频混响器。音乐混缩的必要能力。
- 3D音频。在游戏和音乐制作中都需要。
- 与
Web Audio API 的设计哲学
简单来说，所谓的音频处理其实就是标准的IO函数。从某个地方获取一个音频流(Input)，经过实时计算处理后发送去某个地方(Destination)，而这个处理也就是Effect（从习惯上来讲，我更愿意称其为Filter函数）。
经过了复杂的Input / Destination 编排之后，就可以得到一个路由表（Routing Graph）。这个路由表定义了音频如何在不同的Filter函数中进行穿梭。这整个过程的定义也就是Audio Context。
AudioContext 类承载了音频流的流转方式。
一个最简单的Audio Context例子可以是：
- 定义音频流来源于一个audio标签。
- 将音频流链接到一个音量放大器。
- 将音量放大器链接到标准音频输出接口（电脑音箱）。
这样我们就得到了一个实时音量增益的音频处理流。这这个基础之上，我们还可以在#2之后，再接入一个混响效果器，加入一点点回声效果，让声音稍微的圆润一些。其链接拓扑结构就成为了：
上面的介绍目的是为了表达我们要用这个可插拔的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 的应用**
---------------------
[查乐谱 - 学琴新姿势](https://link.zhihu.com/?target=https%3A//www.chayuepu.com)是一个新兴的电子乐谱平台，同时也在尝试使用Web Audio API 进行MIR领域的产品开发。
1. **节拍器应用**
[查乐谱 - 小声节拍器www.chayuepu.com](https://link.zhihu.com/?target=https%3A//www.chayuepu.com/app/beat)
这个应用利用了Web Audio API 实时的创建音频，同时也利用了Analyzer节点进行频谱计算。
使用了Web Audio API的优点：
在传统的网页开发中，对于类似于节拍器这种应用的开发通常会依赖与
**2\. 调音器应用**
[查乐谱 - 小声调音器www.chayuepu.com](https://link.zhihu.com/?target=https%3A//www.chayuepu.com/app/tuner)
这款调音器这是一个更为经典的音频处理场景。
1. 从麦克风获取实时音频流。
2. 对音频流进行实时音高识别（Pitch Detection），在处理过程中直接获取到了音频流的FFT频域信息，利用简单的计算规则计算得出。
3. 对实时音频进行频谱绘制（利用Analyzer接口）。
Comments