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 的加持下，還可以做更多更有趣的事情。