深入浅出 Web Audio API

568次阅读 | 发布于2年以前

前言

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：https://codepen.io/jamesliu96/pen/oNGgWOb

例：淡入淡出Mixer

具体地址可以查看 CodePen：https://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]

https://tonejs.github.io/

参考资料

[1]Chime: https://jamesliu.info/chime/

[2]Pitcher: https://jamesliu.info/pitcher/

[3]Web Audio API - Web APIs | MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

[4]Web Audio API - Web API 接口参考 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

前言