ITPub博客

首页 > 应用开发 > Java > 视频直播app源码H5录音音频可视化-实时波形频谱绘制、频率直方图

视频直播app源码H5录音音频可视化-实时波形频谱绘制、频率直方图

原创 Java 作者:zhibo系统开发 时间:2020-08-08 16:58:28 0 删除 编辑

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 / MaxDBDrawMaxHeight是你最大绘制高度(画布高度), 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录音库里面当做实时的音频展示,但移植到别的语言还是很轻松的,因为他们的源码都没有用到浏览器特有的东西。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69978258/viewspace-2710239/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-07-02

  • 博文量
    65
  • 访问量
    28002