這段時間給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錄音庫里面當做實時的音頻展示，但移植到別的語言還是很輕松的，因為他們的源碼都沒有用到瀏覽器特有的東西。
相關源碼請到GitHub中查閱：https://github.com/xiangyuecn/Recorder
完.