跳到主要內容
黯羽輕揚每天積累一點點

Web Audio API 解析

免費2015-08-06#HTML#JS#音频数据分析#音频可视化#过滤特定频率#混响#音频空间化#处理声道#扭曲#合成音效#同时播放多个音频#多个音频交叉播放#音频淡入淡出

aduio 標籤不夠強大，因此提供了 Web Audio API 來增強音頻控制，支持音頻數據分析、數據可視化、過濾特定頻率、混響、音頻空間化、處理聲道、扭曲、合成音效等等強大功能

寫在前面

本文內容整理自 AudioContext - Web API 接口 | MDN，可能已經過時，請注意時間（2015-06-24）

一。Web Audio API 各個節點的關係

[caption id="attachment_694" align="alignnone" width="300"]Web Audio API 各個節點間的關係 Web Audio API 各個節點間的關係[/caption]

二。Web Audio API 的作用

1. 用 audio 標籤也能實現的功能

  • 同時播放多個音頻

  • 多個音頻交叉播放（在上同時播放的基礎上加以控制）

  • 調節音量（調節增益值）

  • 淡入淡出（同上）

2. 特色功能

  • 獲取音頻時間、頻率、實現數據可視化（播放錄音：http://mdn.github.io/voice-change-o-matic/）

  • 過濾特定頻率（濾波器，低通濾波器、高通濾波器、帶通濾波器、低架濾波器、高架濾波器、峰值濾波器、陷波濾波器、全通濾波器，低通濾波器保證低頻率的頻寬，同時丟棄高頻譜段的聲波。）

  • 混響效果（回音）

  • 音頻空間化

  • 訪問音頻流中的各個聲道並單獨處理

  • 立體聲效果

  • 非線性扭曲效果

  • 生成音效（模擬電子琴：http://cool.techbrood.com/fiddle/5644）

三。Web Audio API 簡介

AudioContext

Properties

  • AudioContext.currentTime

描述：返回 double 秒，AudioContext 一創建就從 0 開始走

作用：用於音頻重放，比如 source.start(time); 中的 time 參數

  • AudioContext.destination

描述：返回 AudioDestinationNode 類型對象，表示 AudioContext 中的所有節點的最終節點，一般是音頻輸出設備，比如揚聲器

作用：只有把一系列節點連接到 AudioContext.destination 才會發出聲音

  • AudioContext.listener

描述：返回 AudioListener 對象

作用：【實現 3D 音頻空間化（3D audio spatialization）】

  • AudioContext.mozAudioChannelType

描述：非標準，兼容性差，不建議使用

作用：

  • AudioContext.sampleRate

描述：返回浮點數，表示採樣率

作用：同一個 AudioContext 中的所有節點採樣率相同，所以不支持採樣率轉換

Methods

  • AudioContext.close()

描述：關閉 AudioContext，強制釋放所有音頻資源

作用：關閉後無法創建節點，但可以解碼音頻、創建 buffer

備註：https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/close

  • AudioContext.createAnalyser()

描述：返回 AnalyserNode 對象

作用：【獲取音頻時間、頻率、實現數據可視化（頻譜圖？）】

  • AudioContext.createBiquadFilter()

描述：返回 BiquadFilterNode 對象

作用：二階濾波器，可以配置為常見類型的濾波器

  • AudioContext.createBuffer()

描述：返回空的 AudioBuffer 對象

作用：用來存放音頻數據並通過 AudioBufferSourceNode 對象播放

  • AudioContext.createBufferSource()

描述：返回 AudioBufferSourceNode 對象

作用：用來播放 AudioBuffer 中的音頻數據

  • AudioContext.createChannelMerger()

描述：返回 ChannelMergerNode 對象

作用：配合 AudioContext.createChannelSplitter() 來操作聲道，把多個音頻流的聲道結整合到單一音頻流

  • AudioContext.createChannelSplitter()

描述：返回 ChannelSplitterNode 對象

作用：用來【訪問音頻流中的各個聲道並單獨處理】，一般配合 AudioContext.createChannelMerger() 使用

  • AudioContext.createConvolver()

描述：返回 ConvolverNode 對象

作用：用來【給音頻添加混響效果】

  • AudioContext.createDelay()

描述：返回 DelayNode 對象

作用：設置延遲，默認參數是 0 秒

  • AudioContext.createDynamicsCompressor()

描述：返回 DynamicsCompressorNode 對象

作用：用於壓縮音頻信號

  • AudioContext.createGain()

描述：返回 GainNode 對象

作用：用來【控制整體音量】

  • AudioContext.createJavaScriptNode()

描述：已廢棄

作用：

  • AudioContext.createMediaElementSource()

描述：返回新的 MediaElementAudioSourceNode 對象

作用：從頁面現有的 audio 或 video 元素獲取數據

  • AudioContext.createMediaStreamDestination()

描述：返回與 WebRTC MediaStream 關聯的 MediaStreamAudioDestinationNode 對象

作用：表示音頻流，可以存放為本地文件或者發送給其他計算機

備註：Web RTC 是網絡實時通信，能實現瀏覽器間共享 audio/video 數據，現有原生 API 支持，不依賴於第三方插件，詳情：https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC

  • AudioContext.createMediaStreamSource()

描述：返回新的 MediaStreamAudioSourceNode 對象

作用：需要一個 MediaStream 對象參數，比如 navigator.getUserMedia 實例

  • AudioContext.createOscillator()

描述：返回 OscillatorNode 對象

作用：表示周期波，主要用來【生成恆定的音調（恆音？）】

  • AudioContext.createPanner()

描述：返回 PannerNode 對象

作用：把輸入的音頻流空間化到三維空間

  • AudioContext.createPeriodicWave()

描述：創建 PeriodicWave（周期波）

作用：用來定義周期波形，形成 OscillatorNode 的輸出

  • AudioContext.createScriptProcessor()

描述：返回 ScriptProcessorNode 對象

作用：直接處理音頻

  • AudioContext.createStereoPanner()

描述：返回 StereoPannerNode 對象

作用：實現【立體聲效果】，把輸入的音頻流用等冪平移算法定位到立體圖像

  • AudioContext.createWaveShaper()

描述：返回 WaveShaperNode 對象

作用：實現【非線性扭曲效果】

  • AudioContext.createWaveTable()

描述：已廢棄

作用：

  • AudioContext.decodeAudioData()

描述：異步解碼 ArrayBuffer 中的音頻文件數據

作用：ArrayBuffer 一般是 XMLHttpRequest 返回的 response（發送時把 responseType 屬性設置為 arraybuffer 返回 arraybuffer 型響應）

備註：取返回值是 xhr.response 而不是 xhr.responseText

  • AnalyserNode

描述：分析節點

作用：提供實時頻率和時域分析信息，只取數據，不改變輸入

備註：時域分析是信號相關的術語，在時域內對信號進行濾波、放大、統計特徵計算、相關性分析等處理，統稱為信號的時域分析。

  • AudioBuffer

描述：音頻緩存區

作用：可以通過 AudioContext.decodeAudioData() 或者 AudioContext.createBuffer() 創建，放進緩存區後可以通過 AudioBufferSourceNode 播放

  • AudioBufferSourceNode

描述：音頻緩存源節點

作用：把 AudioBuffer 中的數據轉換為音頻信號

備註：一個 AudioBufferSourceNode 只能播放一次，AudioBufferSourceNode.start() 也只能調用一次。AudioBufferSourceNode 不能復用（多次播放需要創建多個 AudioBufferSourceNode），但 AudioBuffer 可以復用

  • AudioChannelManager

描述：非標準，目前只有 FF 支持，不建議使用

作用：

  • AudioDestinationNode

描述：音頻目標（輸出）節點

作用：表示 AudioContext 中所有節點的終點，一般是設備的揚聲器

備註：輸入的聲道數量有限制，超過 maxChannelCount 會引發異常，應該是 6

  • AudioListener

描述：音頻傾聽者，表示人的位置和方向

作用：用於音頻空間化，AudioContext 中所有 PannerNode 被空間化為 AudioListener 後都存放在 AudioContext.listener 屬性裡

  • AudioNode

描述：音頻節點

作用：最高層抽象接口，繼承關係查看圖片 rel.png

  • AudioParam

描述：音頻參數

作用：表示一個與音頻相關的參數，一般是 AudioNode 的參數，比如 GainNode.gain

  • AudioProcessingEvent

描述：已過時，由 Audio Workers 代替

作用：

  • BiquadFilterNode

描述：雙二次濾波器

作用：簡單的低階濾波器，可以用 AudioContext.createBiquadFilter() 創建

  • ChannelMergerNode

作用：聲道合成器節點

描述：配合 ChannelSplitterNode 使用，把不同的單聲道輸入整合成單一輸出

備註：多用來單獨處理每一個聲道，比如實現聲道混合

  • ChannelSplitterNode

描述：聲道分離器節點

作用：配合 ChannelMergerNode 使用，把音頻源的各個聲道分離成一組單聲道輸出

備註：同上

  • ConvolverNode

描述：卷積器節點

作用：實現線性卷積，常用來實現混響效果

備註：卷積混響能增強音頻的空間感（廳堂感？），是一種複雜算法，可能存在比較大的開銷

  • DelayNode

描述：延遲節點

作用：設置輸入到輸出的延遲

  • DynamicsCompressorNode

描述：動態壓縮器節點

作用：實現壓縮效果，防止削波失真，通過 AudioContext.createDynamicsCompressor 創建

備註：【常用於音樂製作和遊戲音頻】

  • GainNode

描述：增益節點

作用：用來調節音量，不會改變聲道數

  • MediaStreamAudioDestinationNode

描述：媒體流音頻目標（輸出）節點

作用：表示包含單音頻流媒體音軌（AudioMediaStreamTrack）WebRTC MediaStream 的音頻目標，可以通過 Navigator.getUserMedia 創建

  • MediaStreamAudioSourceNode

描述：媒體流音頻源節點

作用：表示包含 WebRTC MediaStream (比如網絡攝影機和麥克風) 的音頻源，是一個類似於音頻源的 AudioNode

  • NotifyAudioAvailableEvent

描述：非標準，兼容性差，不建議使用

作用：

  • OfflineAudioCompletionEvent

描述：離線音頻完成事件

作用：OfflineAudioContext 處理結束時觸發

  • OfflineAudioContext

描述：離線音頻環境

作用：表示把所有 AudioNode 聯繫在一起的音頻處理圖

備註：OfflineAudioContext 不渲染設備硬件，只是盡快完成處理並輸出到 AudioBuffer

  • OscillatorNode

描述：振盪器節點

作用：表示周期波形，比如正弦波，創建一個給定頻率的正弦波，音調恆定

  • PannerNode

描述：聲像節點

作用：表示空間中音頻信號源的位置和行為

備註：用右手笛卡爾坐標系描述位置，用速度向量和方向錐表示運動，Pan 表示聲像，Phase 表示相位，聲像是指樂器在聲場中的發聲位置點。簡單的說，就是聲音的方位，是靠左還是靠右。

  • ParentNode

描述：父節點

作用：特殊的 Node，可以有孩子

備註：ParentNode 是抽象 DOM 節點，無法創建，Element、Document 和 DocumentFragment 對象都實現了它

  • PeriodicWave

描述：周期波

作用：定義周期性波形，可以用於形成 OscillatorNode 的輸出

  • ScriptProcessorNode

描述：腳本處理器節點

作用：實現用 js 生成處理分析音頻，包含 2 個 Buffer：InputBuffer 和 OutputBuffer

  • StereoPannerNode

描述：立體聲聲像節點

作用：把音頻流向左或者向右平移，用低代價等階算法把音頻流放進立體聲圖

  • WaveShaperNode

描述：波形控制器節點

作用：非線性畸變放大器，除了實現明顯的放大效果外還經常用來給信號添加一種暖調

評論

暫無評論，快來發表你的看法吧

提交評論