「音频可视化」 波形频谱和频率直方图
1. 前言
项目中需要实现音频智能控制以及根据音乐转换色彩功能,WaveView 完全满足目前需求,完美实现需求,该库还有另外 WaveSurferView 和
FrequencyHistogramView 两个库,下面一一介绍,分享给大家。
2. 功能展示
下面这些波形、频率的计算和显示都是由纯 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 的值大小来绘制线条,因此没有什么复杂的逻辑;对于绘制这种前进式的动画,无需每次都绘制所有线条,只需往另外一块画布上不断的在后面绘制即可,然后再绘制回显示的画布并移动位置,就能实现不断前进的动画,并且性能有保障。
5. WaveView 动态显示波形
此功能源码:waveview.js,4kb 大小源码,录音时动态显示波形;外观为上面Gif图第一行,可通过参数配置绘制成不同的外观。
这个是这个库最原始的一款可视化波形,参考 MCVoiceWave 库编写的,简单用用还可以,就是代码里面相位计算不太懂,波形的显示难控制和优化,微调一下参数波形就乱套。
别说,这个波形还是很耐看的,相比其他可视化界面各有特色吧。
6. 使用
这些可视化波形、频谱要动起来就需要实时的输入pcm数据,输入源可以是麦克风实时录音数据块,也可以是音频文件解码的实时播放数据块。
虽然目前只用在了我的H5录音库里面当做实时的音频展示,但移植到别的语言还是很轻松的,因为他们的源码都没有用到浏览器特有的东西。
7. 源码
源码包含:
GitHub Recorder 开源库
FrequencyHistogramView 音频模块
frequency.histogram.view.js
lib.fft.js
WaveSurferView 音频模块
wavesurfer.view.js
WaveView 动态显示波形模块
waveview.js
获取源码方式:
https://github.com/xiangyuecn/Recorder
「音频可视化」 波形频谱和频率直方图相关推荐
- java音频频谱_H5录音音频可视化-实时波形频谱绘制、频率直方图
这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...
- 傅里叶变换音频可视化_H5录音音频可视化-实时波形频谱绘制、频率直方图
这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...
- python可视化的优势_「数据可视化」数据可视化的优势有哪些?
数据可视化的优势有哪些?大数据可视化的实际意义是协助人更强的分析数据,信息内容的品质挺大水平上取决于其表达形式.对大数字列举所构成的数据信息中所包括的实际意义开展剖析,使剖析結果数据可视化. 实际上大 ...
- 「数据可视化」 Superset:穷人的Power BI
Apache Superset(孵化中)是一个现代的.企业就绪的商业智能web应用程序 重要的 免责声明:Superset是由Apache孵化器赞助的Apache软件基金会(ASF)进行孵化的一项工作 ...
- 融云全球社交泛娱乐洞察,「音频社交」如何出海破圈
一切应用都将社交化.关注[融云全球互联网通信云]了解更多 融入社交能力,创造增长奇迹.激活用户在不同场景的社交需求,让各类应用焕发出了全新的生命力,也让"社交+X"成为出海最大的浪 ...
- 「音频党」你,还记得手抄歌词的年少时光吗?
初中开始,同学之间不知怎么就开始流行起抄歌词,于是书本角落,桌布上方,能留下痕迹的地方都会有密密麻麻的段落,这些马克笔或者原子笔下的歌词似乎不是感同身受,而是年少时为未来的一种渴望和信仰.遗憾是尚且年 ...
- 分分钟做出「条形图赛跑」- 手把手教程
3分钟 手把手教会你做出这种「条形图赛跑」(Bar chart race)视频 写过近2W收藏的回答,里面提了4种方法分析了各自的优缺点.你只要花三分钟读一下就能学会 https://www.zhih ...
- android pcm频谱_Android音频可视化
本文作者:熊鋆洋 (网易云音乐大前端团队) 前言 音频可视化,顾名思义就是将声音以视觉的方式呈现出来.如何将音频信号绘制出来?如何将声音的变化在视觉上清晰的表现出来,让视觉和听觉上的感受一致?这些在 ...
- 傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动
本篇教程探讨了HTML5如何实现音频可视化频谱跳动,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> HTML5音频可视化频谱跳动代码 * { ...
最新文章
- 在enable mmu之前可以使用mmu了
- 如何设置窗口立即刷新显示
- SAP UI5 应用的中文乱码问题
- (STL,set,priority_queue)丑数
- 拯救者linux无法正常关机,菜鸟求助。centos无法关机。请各位高手帮忙! - Linux论坛 - 51CTO技术论坛_中国领先的IT技术社区...
- JQuery --- 第三期 (jQuery事件相关)
- python-os库函数一些用法记录
- 那智机器人调试步骤总结
- php开源视频cms,迅睿PHP开源视频电影CMS系统
- chromecast 协议_如何设置新的Chromecast
- Pidgin 插件法解决Ubuntu11.10 QQ
- TrueLaunchBar 4.2
- Mind Manager 13 值得购买吗?一次糟糕的购物体验
- MMDet——基于Chamfer Distance评估点集
- c语言 release函数报错,91-100
- 计算机存储器——内存、外存详解
- PR控制以及使用PR控制用于单相离/并网逆变器
- 如何手绘表格_CAD中如何快速绘制表格?这个功能你有必要了解一下
- VR医疗培训创企Osso VR完成200万美元种子融资
- 天网论坛刷金币脚本2.0
热门文章
- 设计模式(二)(装饰者模式、工厂方法模式、抽象工厂模式)
- 如何快速查找自己B站账号注册时间
- Java基础学习必备(2)(继承、多态、修饰符、抽象类、接口)
- linux系统rc.local错误,Ubuntu 16.04服务器rc-local服务启动失败,可能是因为这个符号没写...
- SAP-MM发票校验容差详解
- 20. 查询表student——查询所有不姓刘学生的姓名、学号和性别
- 有关win7 设备管理器空白,没有声音的问题
- java arrays.setall_Java程序员的日常—— Arrays工具类的使用
- 安卓查看内存读写测试软件_为什么手机逐渐不支持内存卡了呢?
- 10万以下 阿拉伯转大写