作者：QQ音樂技術團隊
前言
Web Audio API是web處理與合成音訊的高級javascript api。 Web Audio API草案規範由W3C audio working group定制， 旨在解決javascript在web平臺處理音訊的短板， 底層由c++引擎提供支援與優化。 Web Audio API提供了非常豐富的介面讓開發者在web平臺上實現對web音訊進行處理。 利用Web Audio API， web開發者能夠在web平臺實現音訊音效、音訊視覺化、3D音訊等音訊效果。
本篇文章首先介紹了Web Audio API相關概念、常用的幾個介面節點， 以便不熟悉Web Audio的開發人員有個瞭解。 後面主要分析了3個Web Audio API的應用案例， web音訊錄音與即時重播、web音訊剪切、web實現線上k歌， 通過應用案例加深對Web Audio API的瞭解。 讀者也可以根據案例開拓思維，
Web Audio API基本概念
audio context
audio context是Web Audio API處理web音訊的核心物件。 在整個web 音訊處理中， 所有處理連接過程都由audio context管理。 （如圖， audio context控制source節點的生成和destination節點的生成， 同時控制著source節點與destination節點之間的連接）
modular routing
模組路由是Web Audio API處理web音訊的工作方式， 這裡可以理解為web音訊處理的過程就像學CCNA的時候路由器的路由連接方式，
audio node
audio node是Web Audio API處理音訊時的音訊節點。 節點由audio context生成， 每個節點有自己的功能。
audio routing graph
音訊路由拓撲圖就是在audio context控制下， 許多個音訊節點相互連接， 從源到節點， 形成的有向圖。 每個拓撲圖代表了一種音訊處理的效果。
Web Audio API節點介紹
Web Audio API處理web音訊的過程：AudioContext產生實例節點， 音訊在每個節點中按次序連通。 一次成功音訊播放必須有源節點和目的節點， 即sourceNode ——> destinationNode。 音訊從源節點到目的節點的中間可以有許多中間節點， 這一點類似路由拓撲圖， 節點間必須暢通才能實現音訊的播放。 每個AudioContext物件可以一多個音訊源節點實例， 但是只能有一個目的節點實例。
AudioContext
AudioContext是Web Audio API的核心物件。 所有的audio 節點實例由AudioContext生成。
var audioContext = new AudioContext();不同流覽器廠商實現AudioContext有所差異， 可以加上對應首碼進行相容。
sourceNode
音訊源節點， 表示音訊在webAudio的一個輸出， 一個audio graph允許有多個音訊源輸出。 在webAudio中有三種類型的音訊源輸出：
MediaElementSource是指從HTML5標籤
StreamAudioSource是指從navigator.getUserMedia獲取的外部（如麥克風）stream音訊輸出
BufferSource是指通過xhr獲取伺服器音訊輸出
不同的音訊源輸出有不同的應用場景或處理方式， 如StreamAudioSource可以用來音訊錄音， BufferSource可以用來音訊剪輯等。
audio effects filters
這裡介紹幾個webAudio的音效處理節點。
1、DelayNode， 可以將音訊延時播放， 如果在音訊播放時， 一路正常到達destinationNode， 一路通過DelayNode到達destinationNode， 就可以產生回音混響的效果
——————————————> source ——>destinationNode ——>delayNode——>2、 gainNode， 在webAudio中， 可以通過gainNode來控制音量
3、BiquadFilterNode， 可以用於音訊濾波處理。 Web Audio API提供了高通濾波、低通濾波的介面， 利用這些介面也可以實現中通濾波。
audio destinations
weAudio經過處理後， 最後只有輸出到AudioDestinationNode才能播放， 從而實現一個完整的Audio graph。
audioNode.connect(audioContext.destination);Data analysis and visualisation
在webAudio實現視覺化可以利用analyser節點實現音訊視覺化。 analyser提供了傅立葉時域變換和頻域變換後的資料， 根據對應的資料實現視覺化的效果。
Splitting and merging audio channels
webAudio提供了的對聲道的處理節點， 包括聲道分離和聲道合併。 實際應用場景比如通過對聲道的分離， 經過一系列處理後再合併， 實現在歌曲中人聲的消除。
Audio spatialization
在webAudio中也可以實現3D音效， 對應的節點是PannerNode。 PannerNode可以設置音訊源的方位（上下、左右、遠近）從而在聽覺上產生空間的感覺。
Audio processing via JavaScript
Web Audio API提供了豐富的音訊處理介面為音效處理提供了許多方便， 但是這些介面也有局限性，
Web Audio API應用案例分析
web音訊錄音和即時重播
思路：首先創建一個stream源節點，通過navigator.getUserMedia獲取麥克風音訊stream，然後再連接到ScriptProcessorNode對外部聲音進行處理（資料存儲、轉換），最後連接到destination進行即時的播放。通過ScriptProcessorNode獲取的音訊資料可以流覽器播放並保存到本地。
————>獲取音訊資料存儲————>轉blob保存本地 navigator.getUserMedia ————>ScriptProcessorNode處理資料————>即時重播關於webAudio也可以通過W3C提供的一個新的音訊處理介面MediaRecorder
Api進行錄音，具體使用參考（developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API）
具體實現過程
1 、獲取麥克風
2 、使用MediaRecorder Api進行錄音
MediaRecorder可以讀取到navigator.getUserMedia輸入的音訊資料，並提供了介面進行資料存取。MediaRecorder讀取的資料進行轉碼後，才能通過window.URL.createObjectURL轉成blob:資源後保存本地。
3 、錄音過程採用ScriptProcessor實現音訊即時重播
在navigator.getUserMedia錄音過程中，將MediaStreamSource源連接到ScriptProcessor進行處理。ScriptProcessor獲取到音訊後即時播放。
4、 注意問題
延時：即時播放的時候會有些延時，造成的主要原因，一是ScriptProcessor處理輸出資料播放的時候需要一定時間，在性能比較好的機器上表現不明顯。二是不同硬體設備也會造成延時，這個表現會明星許多。
案例地址
(zhazhaxia.github.io/webaudio/public/recordsong.html)
（建議在PC新版本chrome or firefox體驗）
代碼
(github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/recordsong.js)
web實現音訊剪切
思路：音訊剪切的一般實現是先讀取整段音訊資料，再根據區間截取資料，保存，從而實現音訊的剪切。但是在web上無法直接讀取整段音訊，只能創建BufferSource源，用xhr獲取音訊，在音訊經過ScriptProcessorNode時，才能獲取到目標區間的音訊資料。因此，在web平臺實現音訊剪切需要等音訊播放到指定位置時，才能實現效果，體驗上會差點。
載入BufferSource ↓ ScriptProcessorNode音訊資料 ↓ 獲取剪切區間的音訊資料 ——→ 保存音訊資料audio/wav ↓ 連接destination播放音訊源必須是BufferSource，通過xhr讀取，因為BufferSource才能用AudioContext提供的start()介面進行指定位置播放。
具體實現過程
1、 xhr讀取音訊源
web音訊剪切採用的音訊源是BufferSource（BufferSource的源提供了start介面設置播放時間段），所以需要通過xhr獲取資源，並通過audioContext的decodeAudioData介面將xhr讀取的資源解碼為BufferSource能讀取的音訊buffer。
2 ，設置音訊源為buffer，並設置音訊剪切區間
BufferSource讀取從xhr獲取的音訊資料，並設置音訊剪切區間。
3 ，開始剪切音訊片段
音訊通過BufferSource的start介面播放，ScriptProcessor節點進行區間段的資源存取、保存（保存實現在案例3——web線上k歌——介紹）。
4 ，注意問題
利用WebAudioAPI剪切音訊時，通過BufferSource的start介面設置目標時間段後，需要從頭播放到目標區間才能開始剪切。WebAudioAPI無法讀取全域的音訊資料，這一點處理會比較麻煩些。
案例地址(zhazhaxia.github.io/webaudio/public/songclip.html)
代碼（github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/songclip.js）
web實現線上K歌
思路：在web平臺實現k歌應用，關鍵在於將人聲跟伴奏的音訊整合一起。首先需要兩個聲源，一個是伴奏，聲源類型ElementSource。一個是人聲，通過麥克風錄音獲取，聲源類型StreamSource。在K歌過程將聲音經過ScriptProcessorNode處理，整合，然後保存資料。最後將音訊連接到destination。保存的資料可以本機存放區和線上播放，從而實現在web平臺的線上k歌應用。
伴奏ElementSource 人聲錄音StreamSource ↓ ↓ 轉buffer 保存為blob資料並arraybuffer ↓ ↓ 合併音訊 ↓ ↓ 重放 保存本地合併音訊web實現線上K歌實際上是webAudio錄音與web音訊剪切的綜合實現。
具體實現過程
1 、通過MediaRecorder錄音並轉blob資源
MediaRecorder錄音後需要將音訊資料轉blob:資源，以便xhr獲取。
2 、通過xhr讀取錄音音訊、伴奏音訊，並轉音訊buffer
外部伴奏資源http:與錄音blob:資源通過xhr讀取，轉成BufferSource能夠獲取的來源資料。
3 、合併錄音、伴奏
將伴奏BufferSource跟錄音BufferSource連接到ScriptProcessor節點，進行音訊的合併。
4 、保存合併伴奏與錄音的k歌資料，轉audio/wav
合併的音訊即類似k歌後的音訊，然後將合併音訊進行轉碼audio/wav（wav檔比較大，但是不需要解碼，在web中處理比較簡單。類似mp3這種有損音訊演算法比較複雜，在此不演示。），然後保存到本地。
5 、注意問題
audioContext解碼blob:資料在chrome目前（56.0.2914.3）還不支援，firefox已提供介面解決。
線上k歌的歌曲伴奏也可以通過Web Audio API實現，主要原理的：人聲是有固定頻率範圍的，把一首歌曲讀取後，根據webAudio提供的介面，實現人聲頻段的過濾，保留下伴奏，從而實現web平臺下的伴奏人聲消除應用。
小編的話：根據發文規範，文章內不能出現連結。因此，
（）括弧內均為文章連結或下載位址，如有需求請行加上https首碼，或者可進入騰訊雲技術社區查看該文章，進行下載。
各位大大們，想看哪方面的技術性文章，盡請留言！
思路：首先創建一個stream源節點，通過navigator.getUserMedia獲取麥克風音訊stream，然後再連接到ScriptProcessorNode對外部聲音進行處理（資料存儲、轉換），最後連接到destination進行即時的播放。通過ScriptProcessorNode獲取的音訊資料可以流覽器播放並保存到本地。
————>獲取音訊資料存儲————>轉blob保存本地 navigator.getUserMedia ————>ScriptProcessorNode處理資料————>即時重播關於webAudio也可以通過W3C提供的一個新的音訊處理介面MediaRecorder
Api進行錄音，具體使用參考（developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API）
具體實現過程
1 、獲取麥克風
2 、使用MediaRecorder Api進行錄音
MediaRecorder可以讀取到navigator.getUserMedia輸入的音訊資料，並提供了介面進行資料存取。MediaRecorder讀取的資料進行轉碼後，才能通過window.URL.createObjectURL轉成blob:資源後保存本地。
3 、錄音過程採用ScriptProcessor實現音訊即時重播
在navigator.getUserMedia錄音過程中，將MediaStreamSource源連接到ScriptProcessor進行處理。ScriptProcessor獲取到音訊後即時播放。
4、 注意問題
延時：即時播放的時候會有些延時，造成的主要原因，一是ScriptProcessor處理輸出資料播放的時候需要一定時間，在性能比較好的機器上表現不明顯。二是不同硬體設備也會造成延時，這個表現會明星許多。
案例地址
(zhazhaxia.github.io/webaudio/public/recordsong.html)
（建議在PC新版本chrome or firefox體驗）
代碼
(github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/recordsong.js)
web實現音訊剪切
思路：音訊剪切的一般實現是先讀取整段音訊資料，再根據區間截取資料，保存，從而實現音訊的剪切。但是在web上無法直接讀取整段音訊，只能創建BufferSource源，用xhr獲取音訊，在音訊經過ScriptProcessorNode時，才能獲取到目標區間的音訊資料。因此，在web平臺實現音訊剪切需要等音訊播放到指定位置時，才能實現效果，體驗上會差點。
載入BufferSource ↓ ScriptProcessorNode音訊資料 ↓ 獲取剪切區間的音訊資料 ——→ 保存音訊資料audio/wav ↓ 連接destination播放音訊源必須是BufferSource，通過xhr讀取，因為BufferSource才能用AudioContext提供的start()介面進行指定位置播放。
具體實現過程
1、 xhr讀取音訊源
web音訊剪切採用的音訊源是BufferSource（BufferSource的源提供了start介面設置播放時間段），所以需要通過xhr獲取資源，並通過audioContext的decodeAudioData介面將xhr讀取的資源解碼為BufferSource能讀取的音訊buffer。
2 ，設置音訊源為buffer，並設置音訊剪切區間
BufferSource讀取從xhr獲取的音訊資料，並設置音訊剪切區間。
3 ，開始剪切音訊片段
音訊通過BufferSource的start介面播放，ScriptProcessor節點進行區間段的資源存取、保存（保存實現在案例3——web線上k歌——介紹）。
4 ，注意問題
利用WebAudioAPI剪切音訊時，通過BufferSource的start介面設置目標時間段後，需要從頭播放到目標區間才能開始剪切。WebAudioAPI無法讀取全域的音訊資料，這一點處理會比較麻煩些。
案例地址(zhazhaxia.github.io/webaudio/public/songclip.html)
代碼（github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/songclip.js）
web實現線上K歌
思路：在web平臺實現k歌應用，關鍵在於將人聲跟伴奏的音訊整合一起。首先需要兩個聲源，一個是伴奏，聲源類型ElementSource。一個是人聲，通過麥克風錄音獲取，聲源類型StreamSource。在K歌過程將聲音經過ScriptProcessorNode處理，整合，然後保存資料。最後將音訊連接到destination。保存的資料可以本機存放區和線上播放，從而實現在web平臺的線上k歌應用。
伴奏ElementSource 人聲錄音StreamSource ↓ ↓ 轉buffer 保存為blob資料並arraybuffer ↓ ↓ 合併音訊 ↓ ↓ 重放 保存本地合併音訊web實現線上K歌實際上是webAudio錄音與web音訊剪切的綜合實現。
具體實現過程
1 、通過MediaRecorder錄音並轉blob資源
MediaRecorder錄音後需要將音訊資料轉blob:資源，以便xhr獲取。
2 、通過xhr讀取錄音音訊、伴奏音訊，並轉音訊buffer
外部伴奏資源http:與錄音blob:資源通過xhr讀取，轉成BufferSource能夠獲取的來源資料。
3 、合併錄音、伴奏
將伴奏BufferSource跟錄音BufferSource連接到ScriptProcessor節點，進行音訊的合併。
4 、保存合併伴奏與錄音的k歌資料，轉audio/wav
合併的音訊即類似k歌後的音訊，然後將合併音訊進行轉碼audio/wav（wav檔比較大，但是不需要解碼，在web中處理比較簡單。類似mp3這種有損音訊演算法比較複雜，在此不演示。），然後保存到本地。
5 、注意問題
audioContext解碼blob:資料在chrome目前（56.0.2914.3）還不支援，firefox已提供介面解決。
線上k歌的歌曲伴奏也可以通過Web Audio API實現，主要原理的：人聲是有固定頻率範圍的，把一首歌曲讀取後，根據webAudio提供的介面，實現人聲頻段的過濾，保留下伴奏，從而實現web平臺下的伴奏人聲消除應用。
小編的話：根據發文規範，文章內不能出現連結。因此，
（）括弧內均為文章連結或下載位址，如有需求請行加上https首碼，或者可進入騰訊雲技術社區查看該文章，進行下載。
各位大大們，想看哪方面的技術性文章，盡請留言！