深入浅出 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：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

本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/QEmocEOrbifReeuAkmagIQ