这段时间给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,有了这些频率点信息就能绘制不同频率下的音量幅度了,或者获得需要的频率分信号。

通过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录音库里面当做实时的音频展示,但移植到别的语言还是很轻松的,因为他们的源码都没有用到浏览器特有的东西。

测试地址:https://xiangyuecn.github.io/Recorder/assets/工具-代码运行和静态分发Runtime.html?jsname=test.extensions.visualization

相关源码请到GitHub中查阅:https://github.com/xiangyuecn/Recorder

完.

H5录音音频可视化-实时波形频谱绘制、频率直方图的更多相关文章

  1. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  2. [C#] NAudio 库的各种常用使用方式: 播放 录制 转码 音频可视化

    概述 在 NAudio 中, 常用类型有 WaveIn, WaveOut, WaveStream, WaveFileWriter, WaveFileReader 以及接口: IWaveProvider ...

  3. 优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码

    Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能. 另外IOS的Hybrid App也完成 ...

  4. [C#] 使用 NAudio 实现音频可视化

    预览: 捕捉声卡输出: 实现音频可视化, 第一步就是获得音频采样, 这里我们选择使用计算机正在播放的音频作为采样源进行处理: NAudio 中, 可以借助 WasapiLoopbackCapture ...

  5. h5 录音

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  6. 使用WindowsAPI获取录音音频的方法

    这篇文章主要介绍了使用WindowsAPI获取录音音频的方法,非常实用的功能,需要的朋友可以参考下 本文实例介绍了使用winmm.h进行音频流的获取的方法,具体步骤如下: 一.首先需要包含以下引用对象 ...

  7. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  8. 用webAudio和canvas实现音频可视化

    前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化. 大致流程是对音源进行解析,解析得到的数据是个频谱数 ...

  9. iOS 界面 之 EALayout 无需反复编译,可视化实时界面,告别Storyboard AutoLayout Xib等等烦人的工具

    http://blog.csdn.net/fatherhui iOS开发,EALayout 无需反复编译,可视化实时界面,告别Storyboard AutoLayout Xib等等烦人的工具 EALa ...

随机推荐

  1. Total Commander 显示文件包含文件名扩展

    在默认的 Total Commander 是分开文件名和文件扩展,如果想要让文件名同时显示扩展,可以通过设置合并文件名和扩展两列 点击配置,在选项的制表修改显示 How to configure To ...

  2. jquery核心基础

    jquery对对象的操作:   检查对象类型: 老式的javascript使用typeOf()操作符,但他是不符合逻辑的,在某些情况下,typeOf()返回的不是一个正确的值,或者返回一个出乎意料的值 ...

  3. Javascript 防扒站,防止镜像网站

    自己没日没夜敲出来的站,稍微漂亮一点,被人看上了就难逃一扒,扒站是难免的,但不能让他轻轻松松就扒了: 前些天有个朋友做的官网被某不法网站镜像,严重影响到 SEO,当时的解决方法是通过屏蔽目标 IP 来 ...

  4. 2018-2-13-wpf-GifBitmapDecoder-解析-gif-格式

    title author date CreateTime categories wpf GifBitmapDecoder 解析 gif 格式 lindexi 2018-2-13 17:23:3 +08 ...

  5. 基于python的二分搜索和例题

    二分搜索 二分概念 二分搜索是一种在有序数组中查找某一特定元素的搜索算法. 搜索过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜索过程结束: 如果某一特定元素大于或者小于中间元素,则在数 ...

  6. mybatis 的 dao 接口跟 xml 文件里面的 sql 是如何建立关系的?一步步解析

    序言 在开始正文之前,首先解释Dao接口和XML文件里的SQL是如何一一对应的? 一句话讲完就是:mybatis 会先解析这些xml 文件,通过 xml 文件里面的命名空间 (namespace)跟d ...

  7. 百度DMA+小度App的蓝牙语音解决方案技术难点解析

    前记   你平时在商场看到的语音助手,看起来非常的简单,其实,这个小小语音助手的背后,是一个非常的复杂的技术支撑.从前端到后端的技术依次是:前端语音降噪技术,高效的音频编解码技术,蓝牙双模技术,DMA ...

  8. SpringCloud + Consul服务注册中心 + gateway网关

    1  启动Consul 2  创建springcloud-consul项目及三个子模块 2.1 数据模块consul-producer 2.2 数据消费模块consul-consumer 2.3 ga ...

  9. java连接elasticsearch:查询、添加数据

    导入jar包 <!-- https://mvnrepository.com/artifact/org.elasticsearch.client/transport --> <depe ...

  10. 分布式事务框架-seata初识

    一.事务与分布式事务 事务,在数据库中指的是操作数据库的最小单位,往大了看,事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消. 那为什么会有分布式事务呢 ...