【W(wǎng)eb】1326- 深入淺出 Web Audio API

前言

• 2011被提出，同年草案被Google Chrome和Mozilla Firefox實現(xiàn)
• 在此之前Web音頻較為原始，無法應付較為復雜的應用場景，例如Web游戲或互動應用
• 旨在提供全套Web音頻解決方案，包含現(xiàn)代游戲音頻引擎和一些混錄、加工、過濾的能力，可實現(xiàn)部分數(shù)字音頻工作站(DAW)的功能

基本概念

音頻數(shù)字信號處理 Audio DSP

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

聲信號 Sound Signal

• 20~20,000Hz頻率震動(vibration)產(chǎn)生的聲波(sound wave)，通過模擬信號(analogue signal)或數(shù)字信號(digital signal)表示，可被麥克風(microphone)、樂器拾音器(pickup)等換能設備轉(zhuǎn)換后采樣(sample)，或直接被合成(synthesise)
• 震動的頻率(frequency)稱為音高(pitch)，振幅(amplitude)稱為音量(volume)
• 將采樣的連續(xù)取值(continuous-valued)模擬信號近似為離散值(discrete-valued)數(shù)字信號，從而實現(xiàn)數(shù)字化，常用方法脈沖編碼調(diào)制(pulse-code modulation,?PCM)
• 數(shù)字音頻的取樣率(sample rate)指的是每秒數(shù)字音頻采樣的個數(shù)，單位為Hz，通常使用48,000Hz或44,100Hz

時域 Time Domain

• 信號的時域波形表達信號隨著時間的變化而變化，示波器(oscilloscope)可以展示信號的時域波形。

頻域 Frequency Domain

• 通過數(shù)學運算進行時域和頻域的互相轉(zhuǎn)換，音頻領(lǐng)域常見的有傅立葉變換(Fourier transform)，快速傅立葉變換算法(FFT algorithm)

音頻上下文?AudioContext

• Web Audio API提供了**AudioContext作為音頻DSP操作的上下文空間，內(nèi)部實現(xiàn)了一套模塊化路由**(modular routing)
• 使用的時候，需要connect，用完可以disconnect
• 輸入向輸出方向“流動”
• suspend暫停，resume恢復，close關(guān)閉
• 安全：用戶必須提供user gesture，否則保持suspended狀態(tài)

音頻節(jié)點?AudioNode

• 音頻上下文中的基礎單元

• 常用節(jié)點

• ScriptProcessorNode：利用JavaScript直接生成、處理、分析音頻，deprecated but commonly used
• 分析器(AnalyserNode)
• 合并聲道(ChannelMergerNode)
• 分離聲道(ChannelSplitterNode)
• 音頻輸出(AudioDestinationNode)：默認輸出(AudioContext.destination)
• MediaStream(MediaStreamAudioDestinationNode)：WebRTC MediaStream
• 增益(GainNode)：音量增益db
• 延遲(DelayNode)：延遲輸出效果
• 卷積(ConvolverNode)：混響
• 立體聲均衡(StereoPannerNode)：立體聲效果
• 空間均衡(PannerNode)：3D
• 波形畸變器(WaveShaperNode)：扭曲效果
• 動態(tài)壓縮(DynamicsCompressorNode)：壓縮、側(cè)鏈
• 雙二階濾波器(BiquadFilterNode)：EQ均衡
• 振蕩器(OscillatorNode)：持續(xù)產(chǎn)生指定頻率周期的正弦波(sine)，方波(square)，鋸齒波(sawtooth)，三角波(triangle)和自定義周期波
• 音頻緩沖(AudioBufferSourceNode)：解碼后的PCM數(shù)據(jù)
• 媒體元素(MediaElementAudioSourceNode)：HTML5
• MediaStream(MediaStreamAudioSourceNode)：WebRTC MediaStream

• 音頻源

• 音效

• 音頻輸出

• 聲道處理

• 可視化

• 特殊

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

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

例：淡入淡出Mixer

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

例：Chime^[1]

旋律來自個人聽音扒譜，音樂版權(quán)歸原作者所有

例：Pitcher^[2]

幅度 Amplitude

• 方均根

自相關(guān) Auto Correlate

• 離散自相關(guān)

音高 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/

參考資料