项目中需要实现音频智能控制以及根据音乐转换色彩功能，
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源创计划”，欢迎正在阅读的你也加入，一起分享。
