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 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音頻的過程：AudioContext産生執行個體節點，音頻在每個節點中按次序連通。一次成功音頻播放必須有源節點和目的節點，即sourceNode ——> destinationNode。音頻從源節點到目的節點的中間可以有許多中間節點，這一點類似路由拓撲圖，節點間必須暢通才能實作音頻的播放。每個AudioContext對象可以一多個音頻源節點執行個體，但是隻能有一個目的節點執行個體。AudioContext的中間節點執行個體可以對音頻進行處理，如音頻可視化、音效處理。
AudioContext
AudioContext是Web Audio API的核心對象。所有的audio 節點執行個體由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，就可以産生回音混響的效果
2 gainNode，在webAudio中，可以通過gainNode來控制音量
3 BiquadFilterNode，可以用于音頻濾波處理。Web Audio API提供了高通濾波、低通濾波的接口，利用這些接口也可以實作中通濾波。
audio destinations
weAudio經過處理後，最後隻有輸出到AudioDestinationNode才能播放，進而實作一個完整的Audio graph。
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提供了豐富的音頻處理接口為音效處理提供了許多友善，但是這些接口也有局限性，開發人員無法定制自己需要的效果，是以，webAudio提供了ScriptProcessorNode節點。ScriptProcessorNode可以擷取到音頻原始處理資料，然後開發人員根據對應音頻音效算法對這些音頻資料進行處理，進而實作定制音頻音效效果。
web音頻錄音和實時回放
思路：首先建立一個stream源節點，通過navigator.getUserMedia擷取麥克風音頻stream，然後再連接配接到ScriptProcessorNode對外部聲音進行處理（資料存儲、轉換），最後連接配接到destination進行實時的播放。通過ScriptProcessorNode擷取的音頻資料可以浏覽器播放并儲存到本地。
關于webAudio也可以通過W3C提供的一個新的音頻處理接口MediaRecorder Api進行錄音，具體使用參考https://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處理輸出資料播放的時候需要一定時間，在性能比較好的機器上表現不明顯。二是不同硬體裝置也會造成延時，這個表現會明星許多。
案例位址
http://zhazhaxia.github.io/webaudio/public/recordsong.html
（建議在PC新版本chrome or firefox體驗）
代碼
https://github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/recordsong.js
web實作音頻剪切
思路：音頻剪切的一般實作是先讀取整段音頻資料，再根據區間截取資料，儲存，進而實作音頻的剪切。但是在web上無法直接讀取整段音頻，隻能建立BufferSource源，用xhr擷取音頻，在音頻經過ScriptProcessorNode時，才能擷取到目标區間的音頻資料。是以，在web平台實作音頻剪切需要等音頻播放到指定位置時，才能實作效果，體驗上會差點。
音頻源必須是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歌——介紹）。
利用WebAudioAPI剪切音頻時，通過BufferSource的start接口設定目标時間段後，需要從頭播放到目标區間才能開始剪切。WebAudioAPI無法讀取全局的音頻資料，這一點處理會比較麻煩些。
案例位址http://zhazhaxia.github.io/webaudio/public/songclip.html
代碼https://github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/songclip.js
web實作線上K歌
思路：在web平台實作k歌應用，關鍵在于将人聲跟伴奏的音頻整合一起。首先需要兩個聲源，一個是伴奏，聲源類型ElementSource。一個是人聲，通過麥克風錄音擷取，聲源類型StreamSource。在K歌過程将聲音經過ScriptProcessorNode處理，整合，然後儲存資料。最後将音頻連接配接到destination。儲存的資料可以本地存儲和線上播放，進而實作在web平台的線上k歌應用。
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平台下的伴奏人聲消除應用。
線上k歌http://zhazhaxia.github.io/webaudio/public/kge.html（firefox下體驗）
伴奏消聲http://zhazhaxia.github.io/public/
代碼https://github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/kge.js
以上所有代碼位址：https://github.com/zhazhaxia/webAudioApi-testing/tree/master/public
限于字數限制，部分代碼轉為圖檔格式，原文前往閱讀https://github.com/zhazhaxia/webAudioApi-testing/blob/master/public/README.md
參考
MDN
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API
W3C
https://www.w3.org/TR/webaudio/
others
http://chimera.labs.oreilly.com/books/1234000001552/ch02.html
http://webaudiodemos.appspot.com/MIDIDrums/index.html
https://guitar-tuner.appspot.com/
http://webaudiodemos.appspot.com/
http://codepen.io/edball/pen/WQjMEN/
https://modernweb.com/2014/03/31/creating-sound-with-the-web-audio-api-and-oscillators/