深入淺出 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

歡迎關注公衆號 ELab 團隊 收貨大廠一手好文章~

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/QEmocEOrbifReeuAkmagIQ

前言