深入浅出 Web Audio API

• 2011被提出，同年草案被Google Chrome和Mozilla Firefox实现

• 在此之前Web音频较为原始，无法应付较为复杂的应用场景，例如Web游戏或互动应用

• 旨在提供全套Web音频解决方案，包含现代游戏音频引擎和一些混录、加工、过滤的能力，可实现部分数字音频工作站(DAW)的功能

基本概念

音频数字信号处理 Audio DSP

• 包含 振荡器 (oscillator)， 滤波器 (filter)， 合成器 (synthesiser)等功能

声信号 Sound Signal

• 20~20,000Hz频率 震动 (vibration)产生的 声波 (sound wave)，通过 模拟信号 (analogue signal)或 数字信号 (digital signal)表示，可被 麦克风 (microphone)、乐器 拾音器 (pickup)等换能设备转换后 采样 (sample)，或直接被 合成 (synthesise)

• 震动的 频率 (frequency)称为 音高 (pitch)， 振幅 (amplitude)称为 音量 (volume)

• 将采样的 连续取值 (continuous-valued)模拟信号近似为 离散值 (discrete-valued)数字信号，从而实现数字化，常用方法 脉冲编码调制 (pulse-code modulation,  PCM )

• 数字音频的 取样率 (sample rate)指的是每秒数字音频采样的个数，单位为Hz，通常使用48,000Hz或44,100Hz

时域 Time Domain

• 信号的时域波形表达信号随着时间的变化而变化， 示波器 (oscilloscope)可以展示信号的时域波形。

频域 Frequency Domain

• 通过数学运算进行时域和频域的互相转换，音频领域常见的有 傅立叶变换 (Fourier transform)， 快速傅立叶变换算法 (FFT algorithm)

音频上下文 AudioContext

• Web Audio API提供了** AudioContext 作为音频DSP操作的上下文空间，内部实现了一套 模块化路由**(modular routing)
• 使用的时候，需要 connect ，用完可以 disconnect

• 输入向输出方向“流动”

• suspend
  resume
  close
  

• 安全：用户必须提供user gesture，否则保持 suspended 状态

音频节点 AudioNode

• 音频上下文中的基础单元

• 常用节点

• ScriptProcessorNode ：利用JavaScript直接生成、处理、分析音频，deprecated but commonly used
• 分析器( AnalyserNode )
• 合并声道( ChannelMergerNode )
• 分离声道( ChannelSplitterNode )
• 音频输出( AudioDestinationNode )：默认输出( AudioContext.destination )
• MediaStream( MediaStreamAudioDestinationNode )：WebRTC MediaStream
• 增益( GainNode )：音量增益db
• 延迟( DelayNode )：延迟输出效果
• 卷积( ConvolverNode )：混响
• 立体声均衡( StereoPannerNode )：立体声效果
• 空间均衡( PannerNode )：3D
• 波形畸变器( WaveShaperNode )：扭曲效果
• 动态压缩( DynamicsCompressorNode )：压缩、侧链
• 双二阶滤波器( BiquadFilterNode )：EQ均衡
• 振荡器( OscillatorNode )：持续产生指定频率周期的正弦波(sine)，方波(square)，锯齿波(sawtooth)，三角波(triangle)和自定义周期波
• 音频缓冲( AudioBufferSourceNode )：解码后的PCM数据
• 媒体元素( MediaElementAudioSourceNode )：HTML5
• MediaStream( MediaStreamAudioSourceNode )：WebRTC MediaStream

• 音频源

• 音效

• 音频输出

• 声道处理

• 可视化

• 特殊

例：使用振荡器，增益和自定义周期波，分析

具体地址可以查看 CodePen：http://codepen.io/jamesliu96/pen/oNGgWOb

例：淡入淡出Mixer

具体地址可以查看 CodePen：http://codepen.io/jamesliu96/pen/jOYedQR

例： Chime ^[1]

旋律来自个人听音扒谱，音乐版权归原作者所有

例： Pitcher ^[2]

幅度 Amplitude

• 方均根

自相关 Auto Correlate

• 离散自相关

音高 Pitch

基于十二平均律，标准音高为440Hz

p = #MIDI
f = 频率
当 f = 440：p = 69
A440 = 440Hz = #69

Web Audio API - Web APIs | MDN ^[3]

Web Audio API - Web API 接口参考 | MDN ^[4]

http://tonejs.github.io/

参考资料

- END -