項目中需要實現音頻智能控制以及根據音樂轉換色彩功能，
WaveView
完全滿足目前需求，完美實現需求，該庫還有另外
WaveSurferView
和
FrequencyHistogramView 兩個庫，下面一一介紹，分享給大家。
下面這些波形、頻率的計算和顯示都是由純 js 代碼編寫的，並未用到瀏覽器專有特性，因此可以方便的移植到其他語言實現，比如移植到 Android、iOS 原生實現。
![]()
3.
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)
。
按照你想要的樣子繪製完成後，通過實時數據驅動，一個可視化頻率直方圖就完工了。
4.
WaveSurferView 音頻可視化波形顯示
此功能源碼：wavesurfer.view.js，7kb 大小源碼，音頻可視化波形顯示；外觀爲上面 Gif 圖第二行，可通過參數配置繪製成不同的外觀。
外觀和名稱來源於
wavesurfer.js
，這個波形的繪製直接簡單的使用 16 位 PCM 的採樣數值大小來進行線條的繪製，同一段音頻繪製出的波形和 Audition 內顯示的波形外觀上幾乎沒有差異。
由於是直接簡單的用 PCM 的值大小來繪製線條，因此沒有什麼複雜的邏輯；對於繪製這種前進式的動畫，無需每次都繪製所有線條，只需往另外一塊畫布上不斷的在後面繪製即可，然後再繪製回顯示的畫布並移動位置，就能實現不斷前進的動畫，並且性能有保障。
此功能源碼：
waveview.js
，
4kb
大小源碼，錄音時動態顯示波形；外觀爲上面Gif圖第一行，可通過參數配置繪製成不同的外觀。
這個是這個庫最原始的一款可視化波形，參考
MCVoiceWave
庫編寫的，簡單用用還可以，就是代碼裏面相位計算不太懂，波形的顯示難控制和優化，微調一下參數波形就亂套。
別說，這個波形還是很耐看的，相比其他可視化界面各有特色吧。
這些可視化波形、頻譜要動起來就需要實時的輸入pcm數據，輸入源可以是麥克風實時錄音數據塊，也可以是音頻文件解碼的實時播放數據塊。
雖然目前只用在了我的H5錄音庫裏面當做實時的音頻展示，但移植到別的語言還是很輕鬆的，因爲他們的源碼都沒有用到瀏覽器特有的東西。
![]()
源碼包含：
-
-
FrequencyHistogramView 音頻模塊
-
frequency.histogram.view.js
-
-
WaveView 動態顯示波形模塊
https://github.com/xiangyuecn/Recorder
本文分享自微信公衆號 - Creator星球遊戲開發社區（creator-star）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。
