# 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 框架