# Web Audio API
Web Audio API 使用户可以在音频上下文(AudioContext)中进行音频操作,具有模块化路由的特点。在音频节点上操作进行基础的音频,它们连接在一起构成音频图。
既然是音频图那么就是由多个音频节点组成的。
音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。一般来说,这个链或网起始于一个或多个音频源。
这些节点的输出可以连接到其他节点的输入上,然后新节点可以对接收到的采样数据再进行其他的处理,再形成一个结果流。
一个简单而典型的 web audio 流程如下:
- 创建音频上下文
- 在音频上下文里创建源 — 例如
<audio>
, 振荡器,流 - 创建效果节点,例如混响、双二阶滤波器、平移、压缩
- 为音频选择一个目的地,例如你的系统扬声器
- 连接源到效果器,对目的地进行效果输出
# AudioContext
AudioContext
接口代表由音频模块构成的音频处理图。
音频上下文控制其所包含节点的创建和音频处理、解码。使用其他接口前你必需创建一个音频上下文,一切操作都在这个环境里进行。
# AudioNode
AudioNode
音频节点接口,是音频处理中的基本单元,类似DOM
节点。
例如音频源(<audio
>或<video>
),中间处理模块(例如:滤波器 BiquadFilterNode 或者音量控制器 GainNode),音频输出。
# 输入接口
OscillatorNode
振荡器节点,可以产生指定频率的波形
MediaElementAudioSourceNode
媒体元素音频源接口,代表来自 HTML 媒体元素<audio>``<video>
的音频源
MediaStreamAudioSourceNode
媒体流音频源接口,表示来自 MediaStream 的音频源,比如 WebRTC,本地麦克风。
AudioBuffer
代表内存中的一段音频数据。
AudioBufferSourceNode
表示由内存音频数据组成的音频源。
# 输出接口
AudioDestinationNode
音频输出接口,通常是你的扬声器。
MediaStreamAudioDestinationNode
媒体流输出接口,另一个远端的 RTCPeer。
注意,并不总是需要链接到输出节点,比如我们只是对音频做一些数据处理,而不需要进行播放的时候。
# 音效接口
BiquadFilterNode
低通滤波节点,可以表示不同种类的滤波器、调音器或图形均衡器。
ConvolverNode
卷积节点,对给定的 AudioBuffer 执行线性卷积,通常用于实现混响效果 。
DelayNode
延迟节点,使输入的数据延时输出。
DynamicsCompressorNode
动态压缩
GainNode
增益
StereoPannerNode
简单的立体声控制
WaveShaperNode
波形扭曲
PeriodicWave
周期波
# 分析接口
AnalyserNode
表示一个可以用于进行实时的时域和频域分析的节点
# 声道处理接口
ChannelSplitterNode
声道分离
ChannelMergerNode
声道合并
# 空间效果接口
AudioListener
代表人的位置和朝向
PannerNode
抽象出来的音频的空间位置信息
# 学习资料
MDN - Web Audio API (opens new window)
MDN - Web Audio API 的运用 (opens new window)
MDN - Web audio 空间化基础 (opens new window)
MDN - 基于 Web Audio API 实现音频可视化效果 (opens new window)
CSS-TRICKS - Introduction to Web Audio API (opens new window)
知乎 - 我的蓝猫被削了 - 实践!实现纯前端下的音频剪辑处理 (opens new window)
张鑫旭 - 纯前端实现 audio 音频剪裁剪切复制播放与上传 (opens new window)
哔哩哔哩 - 20 分钟通俗讲解乐理的底层结构 (opens new window)
傅立叶变换如何理解?美颜和变声都是什么原理?李永乐老师告诉你 (opens new window)
音乐也有科学道理吗?Do、Re、Mi...都是如何确定的?李永乐老师讲音律 (opens new window)
# 库
这里有一些处理 Web 音频的库:
- Pizzicato.js - Pizzicato 旨在通过 Web Audio API 简化您创建和操作声音的方式
- webaudiox.js - webaudiox.js 是一个助手,将让你轻松的使用 WebAudio API
- howler.js - 现代网络的 Javascript 音频库
- WAD - 使用 HTML5 的 Web Audio API 进行动态合成声音。这很像为了你耳朵的 jQuery
- Tone.js - 用于在浏览器中制作交互式音乐的 Web Audio 框架