H5錄音音頻可視化-實時波形頻譜繪製、頻率直方圖

這段時間給GitHub Recorder開源庫添加了兩個新的音頻可視化功能，比之前單一的動態波形顯示豐富了好多（下圖後兩行是否是比第一行看起來豐滿些）；趁熱打鐵寫了一個音頻可視化相關擴展測試代碼，下面這張就是測試Gif截圖，看起來還算過得去，測試地址

上面這些波形、頻率的計算和顯示都是由純js代碼編寫的，並未用到瀏覽器專有特性，所以能夠方便的移植到其餘語言實現，好比移植到Android、IOS原生實現。

FrequencyHistogramView音頻可視化頻率直方圖顯示

此功能源碼：frequency.histogram.view.js + lib.fft.js 12kb大小源碼，音頻可視化頻率直方圖顯示；外觀爲上面Gif圖最後一行，可經過參數配置繪製成不一樣的外觀。

此擴展核心算法參考Java開源庫jmp123的代碼編寫的，jmp123版本0.3；直方圖我特地優化主要顯示0-5khz語音部分，其餘高頻顯示區域較小，不適合用來展現音樂頻譜。

要得到PCM頻率信息，須要將PCM由時域轉換成頻域，這裏就用到了FFT算法快速傅里葉變換，裏面水很深我就沒有深刻研究了，這裏直接用的jmp123裏面的FFT實現，純js代碼實現100行不到。咱們只管使用就ok了，假設有44100hz採樣率的16位PCM數據，取1024個採樣數據通過FFT變換後，會輸出512個頻率信息點，每一個點之間的頻率間隔爲44100/2/512=43hz，0hz是第1個點，1khz是第1000/43個點，以此類推，最高能識別到22050hz，有了這些頻率點信息就能繪製不一樣頻率下的音量幅度了，或者得到須要的頻率分信號。

經過FFT得到了頻率信息，咱們就能夠繪製直方圖了，將全部頻率點按照咱們須要繪製的直方圖柱子數量平均劃分紅頻段（jmp123裏面採用的非線性劃分，沒看懂是什麼原理，就採用更多人使用的線性劃分），每一個頻段內取最大值並轉換成音量，音量計算公式：dB=20*Math.log10(maxValue)，而後計算實際的繪製高度：DrawMaxHeight * dB / MaxDB，DrawMaxHeight是你最大繪製高度（畫布高度），MaxDB爲最大音量等於20*Math.log10(0x7FFF)。

按照你想要的樣子繪製完成後，經過實時數據驅動，一個可視化頻率直方圖就完工了。

WaveSurferView音頻可視化波形顯示

此功能源碼：wavesurfer.view.js，7kb大小源碼，音頻可視化波形顯示；外觀爲上面Gif圖第二行，可經過參數配置繪製成不一樣的外觀。

外觀和名稱來源於wavesurfer.js，這個波形的繪製直接簡單的使用16位PCM的採樣數值大小來進行線條的繪製，同一段音頻繪製出的波形和Audition內顯示的波形外觀上幾乎沒有差別。

因爲是直接簡單的用PCM的值大小來繪製線條，所以沒有什麼複雜的邏輯；對於繪製這種前進式的動畫，無需每次都繪製全部線條，只需往另一塊畫布上不斷的在後面繪製便可，而後再繪製回顯示的畫布並移動位置，就能實現不斷前進的動畫，而且性能有保障。

WaveView動態顯示波形

此功能源碼：waveview.js，4kb大小源碼，錄音時動態顯示波形；外觀爲上面Gif圖第一行，可經過參數配置繪製成不一樣的外觀。

這個是這個庫最原始的一款可視化波形，參考MCVoiceWave庫編寫的，簡單用用還能夠，就是代碼裏面相位計算不太懂，波形的顯示難控制和優化，微調一下參數波形就亂套。

別說，這個波形仍是很耐看的，相比其餘可視化界面各有特點吧。

使用

這些可視化波形、頻譜要動起來就須要實時的輸入pcm數據，輸入源能夠是麥克風實時錄音數據塊，也能夠是音頻文件解碼的實時播放數據塊。

雖然目前只用在了個人H5錄音庫裏面當作實時的音頻展現，但移植到別的語言仍是很輕鬆的，由於他們的源碼都沒有用到瀏覽器特有的東西。

測試地址：https://xiangyuecn.github.io/Recorder/assets/工具-代碼運行和靜態分發Runtime.html?jsname=test.extensions.visualization

相關源碼請到GitHub中查閱：https://github.com/xiangyuecn/Recorder

完.