HTML5 多媒體應用現在還沒被大部分挖掘出來，像普通的頁遊只能簡簡單單的做一些 2D 渲染，主要差距還是在效能上。H5 天生是動態語言，需要經過解析、編譯。而且 JS 還是一個弱型別語言，雖然有 JIT 的幫助，但是解析引擎本身就有一個天花板，你無法、或者直接點，不能讓 JS 達到原生的效率。但隨著技術的發展，瀏覽器傾向於給 Web 開發者直接提供更底層的 API 使用，而最新推出的 WASM 的技術則更是直接解決了如何讓 Web 在擁有原生效能的前提下，不用大量造高效能運算的輪子。
在這樣的一個發展前提下，HTML5 的效能會逐漸的被釋放，這也會加快 HTML5 多媒體時代的到來，比如，高效能頁遊引擎、Web 音視訊播放器、圖形計算、分散式計算引擎等等。
雖然，看起來前景很廣，不過，該交的學費，該走的彎路你還是要走的。本篇不打算往大而全走，這裡想應題，介紹一下 HTML5 中音訊處理的板塊。
在 Web 中，你能夠直接操作底層的音訊 API 是，AudioContext。如果你還考慮相容性的話，可以加上 webkitAudioContext。
let AudioContext = window.AudioContext || window.webkitAudioContext;
複製程式碼它實際上和 MediaSource Extension 一樣，是將輸入資料直接和播放裝置連線在一起。audioContext 連線的是 AudioBuffer 和音訊播放器。中間可以和一些 Node 連線，這些 Node 是用來對流進行處理的。
常用的 Node 有：
- GainNode: 淡入淡出音量處理
- BiquadFilterNode: 濾波節點
- DelayNode: 建立回聲
- PannerNode: 空間環繞音效
- analyserNode: 頻譜分析
- offlineContext : 快速音視訊處理
下面是直接解碼一個 Buffer 為音訊處理格式流：
context.decodeAudioData(buffer,audioBuffer=>{
// audioBuffer 物件
});
複製程式碼這意味著，我們可以直接拿到音訊流裡面的具體資料，而剩下的就是我們的想象空間了。這裡為了方便大家理解，順帶介紹一點關於聲音的基本理論。
聲學基礎
一般人可以感覺到20 Hz~20kHz，強度為 -5dB~130dB 的聲音訊號。成年人為 30~16000Hz 之間，老年人為 50~10000Hz 之間。人是通過耳朵進行感受音波的，那為什麼會稱為波呢？最直觀的可以看我們耳朵是怎麼反應聲音的。當聲音經過外耳傳入中耳時，鐙骨的運動引起耳蝸內流體壓強的變化，從而引起行波沿基底膜的傳播。
耳蝸就像一個頻譜分析儀，將複雜的訊號分解成為各種頻率分量。頻譜分析會比較專業一點，簡單說就是 聲波 通過 快速 FFT 變化，由空域變為頻率，這樣讓音訊分析多了一個維度分析。
其中，在音訊中有一個非常通用並且流行的單位，分貝。分貝最初使用是在電信行業，是為了量化長導線傳輸電報和電話訊號時的功率損失而開發出來的。這個單位實際上並不是實際帶物理單位的量，它原始含義其實就是 兩個數值的對數比率，這兩個數值分別是測量值和參考值（也稱為基準值）。如公式：
而我們經常會看到某些描述單位，比如，>120dB 屬於不舒服聲域範圍。或者形如下圖：
聲壓是描述聲波最基本的物理量，是媒質中的壓力與靜壓的差值。單位為 Pa。（你可以理解為大氣壓的波動值）。前面說了分貝是參考值，那他參考的是啥呢？
其實是20μPa，這個值表示人耳在1000Hz處的平均可聽閾值，或者是人耳在1000Hz處可被感知的平均最小聲壓波動值。
最後再給大家普及一個，我大學以來賊 TM 想不通的東西，經常會在很多濾波器裡面看到 -3dB。那時候一直想不明白是為什麼這個這麼重要，後來偶然間看到
-3dB對應的幅值比為0.707，即為：。如果是按功率比來計算，則功率比為1/2，也就是原來功率的一半，因此，-3dB稱為“半功率點”。 在 高通、低通、帶通和帶阻濾波器的截止頻率是-3dB點。這表示的也是功率衰減一般時，對應的濾波截止頻率。
(奶奶個腿。。。)
關於聲學這塊，還有很多很多內容，比如粉紅噪聲，高斯噪聲等等。幾百頁的教材都寫不完，我這裡就不在這贅述了。
這裡我們回到 HTML5 的工程技術中來，簡單介紹一下，音訊 H5 能有哪些具體的工程例子。
HTML5 音訊應用
首先第一個想到的是 keyboard Piano，通過鍵盤控制，來手動播放 piano 對應的聲音，比如 C1，C2,C3 等。
更專業一點的用來進行音訊分析，測試你的音色好聽與否。通常來說，你在唱歌的時候，泛音越多，越集中，代表你的歌聲越渾厚好聽。
當然，HTML5 在 WASM 的加持下，還可以做更多更有趣的事情。