傅里叶变换音频可视化_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