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