首页 > 其他分享 >网页js版音频数字信号处理:H5录音+特定频率信号的特征分析和识别提取

网页js版音频数字信号处理:H5录音+特定频率信号的特征分析和识别提取

时间:2023-02-27 14:57:01浏览次数:58  
标签:网页 信号 电码 音频 频域 js 频率 H5 特征分析

目录

音频数字信号处理 Audio DSP (Digital Signal Processing) 是一个复杂又专业的话题,本文介绍的是如何从音频中实时分析和识别出特定频率信号的一种方法,对应的代码为可运行在浏览器中的html5网页版(可移植);可用于识别环境中特定频率的声音、或噪声、乐器弹奏的音调。

在线测试:FFT频域分析ECharts频谱曲线图

900Hz频率的摩尔斯电码声音频谱曲线,为本文的主要分析对象,请见文末生成LOVE对应的电码音频文件,然后把文件拖入上面的这个在线测试页面,即可得到此图:

吉他6根空弦音频谱曲线:

一、网页中的音频数据源

H5网页中获取音频数据的方法至少有三种:

  1. 通过网络请求下载得到音频文件二进制内容(xhrfetch
  2. 通过input[type=file]选择文件,在用FileReader读取获得二进制内容
  3. 通过浏览器的getUserMedia接口访问设备的麦克风,录制得到音频二进制内容

不同音频格式有不同的压缩编码方法,为了得到文件内的音频数据,我们需要解码音频文件,得到音频的采样数据(PCM)才好进行下一步处理;.wav格式的文件解码简单,它是一般是由wav头+pcm数据组合而成的,直接去掉wav头即完成解码,其他文件可通过AudioContextdecodeAudioData方法直接解码成32位pcm再转成16位pcm。

得益于现代浏览器的WebRTC功能加持,网页也能实现丰富的音视频交互,可以实现网页录音,实时采集环境中的声音得到pcm数据,GitHub Recorder是一个功能丰富的H5网页录音开源库,可以方便的进行实时处理录音数据。

二、FFT:时域转频域

我们得到音频的采样数据(PCM)后,可以将此数据按值的大小直接绘制出来,即可得到一个声音的波形,此波形为音频的时域波形:横坐标是时间,纵坐标是采样值的大小,比如在Audition中显示如下图所示(生成此音频文件请见文末)。

在时域波形上,我们能直观的知道在某个时间点是否有声音,和声音的大小,但不知道这个声音是否是我们需要的信号,还是其他杂音;数字信号分析的重头戏出场了:FFT,快速傅里叶变换。

通过FFT可以将单个时域波形分解成N个不同频率的波形,即时域信号变换成频域信号,N取决于fftSize的大小,比如fftSize=1024,将得到512个频率分量;在Audition中可以非常直观的感受到频域信号的强度分布,如下图所示,900Hz的信号非常亮(生成此音频文件请见文末)。

H5 js版的FFT的实现有很多开源代码可以参考,或者直接使用浏览器提供的AudioContextcreateAnalyser接口来进行频域数据变换;Recorder库中的提供了2个FFT实现可以使用:extensions/lib.fft.jsdsp.lib.fft_exact.js,到上文中的在线测试中可以看到这两文件。

js版的FFT变换操作也比较简单,Audition中用到的这个音频文件,在网页中通过变换后得到的频域数据,叠加绘制到一起即得到了文章开头的第一张摩尔斯电码声音频谱曲线图,信号非常明显。

三、信号的特征分析

以文章开头的“900Hz频率的摩尔斯电码声音频谱曲线图”为例,我们通过频谱分析,可以直观的看到信号最强的频率波峰,能量非常集中,频率值分散在900Hz附近,也就是说这段音频中信号的主要频率为900Hz左右,和实际生成此摩尔斯电码所使用的900Hz频率一致。

分析得到了主要频率,我们只关注这个主要频率的波形曲线,也能直观的看出和摩尔斯电码规律一致的特征:持续时间短的是滴(.),持续时间长的是嗒(-),嗒的长度是滴的3倍,滴嗒之间间隔1个滴的长度,字符之间间隔3个滴的长度(单词之间间隔7个滴以上的长度)。

四、信号的识别提取

分析出信号的特征后,就有办法通过编写代码来进行信号的识别和提取,依旧是以上图为例,我们来提取出里面包含的摩尔斯电码。

(1)过滤掉其他能量低的值,中只保留能量集中的几个频率

(2)程序代码中对这几个频率进行综合分析判断,每个波峰取和前面频率相差不大的频率当做有效波峰(这样可有效排除掉杂波干扰),得到一条曲线

(3)根据曲线中的值的大小,较小的值全部当做0,高的保留,最终转换得到断断续续的矩形波,有波峰的地方即为有信号,得到每个波峰的持续时间,即可识别出滴(.)嗒(-),即为摩尔斯电码

Q: 为啥不用PCM的音量大小来直接判断信号?

A: 最后的矩形波看起来和时域的波形包络没有多大区别,这是因为录制的样本中没有比较大的背景杂音干扰;在没有杂音干扰的情况下,直接用PCM的采样值(或音量)来提取信号也是可行的;但在有比较大的干扰的情况下(末尾那段杂音),时域就很难区分出是否是正确的信号,频域中分离出来的波形更能反映出原本的信号。

如果是要根据声音的频率来判断是什么信号,那就必须转到频域来识别处理,比如乐器的音调,时域是完全无法识别出是哪个调的。

附录

  • Recorder用于html5录音:https://github.com/xiangyuecn/Recorder,网页中实时录制获得音频数据。
  • 趣味摩尔斯电码:小程序,微信版和字节抖音版,将文本LOVE转换成摩斯码并播放,录制得到上文中使用的摩尔斯电码音频;内置电码翻译功能,可以实时录制音频并解析出电码,本文所总结的内容即为其音频识别成电码所使用的原理。

【完】

标签:网页,信号,电码,音频,频域,js,频率,H5,特征分析
From: https://www.cnblogs.com/xiangyuecn/p/17159638.html

相关文章

  • 发现流程任务的提交时间不对,@JsonFormat时间格式及时区问题
    今天遇到一个奇怪的问题,发现流程任务的提交时间不对,如下图 看代码,这个FlowTaskDto其实很多地方都用到了,比如flowRecord等,但这个myProcessNew用到就有问题,而flowRecord用到......
  • app直播源码,利用原生JS实现回到顶部以及吸顶效果
    app直播源码,利用原生JS实现回到顶部以及吸顶效果  <style>    .box1{      width:1200px;      height:800px;      ......
  • js实战-添加指定行以及review知识
    资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战),本人才疏学浅,记录笔记以供日后回顾视频链接reviewcss与js相关知识1.CSS1)CSS的角色:页面显示的美观风格......
  • 将后端的application/json的格式数据类型转换成前端需要的类型格式
    前提:后端返回的数据内容但是红框的数据对于前端来说是不正确的数据所以我感觉前端处理这个数据本身这个操作都很傻X但是我尝试进行转换代码如下:得到的数据:点击查......
  • Java应用【三】使用Jackson库进行JSON序列化和反序列化
    如果您觉得本博客的内容对您有所帮助或启发,请关注我的博客,以便第一时间获取最新技术文章和教程。同时,也欢迎您在评论区留言,分享想法和建议。谢谢支持!相关阅读:​​Java应用【......
  • JS入门随笔
    1.DOM简单实例1.通过onclick="changeImage()"调用changeImage()方法2.通过element=document.getElementById('myimage')获取id="myimage"控件的值3.element.src.match("......
  • CH58x嘀嗒定时器(SysTick)
    一、 SysTick是一个定时器,只是它放在了NVIC中,主要的目的是为了给操作系统提供一个硬件上的中断(号称滴答中断)。只要不把它在SysTick控制及状态寄存器中的使能位清除,就永不......
  • 【uglify-js】js压缩
    uglify-jsUglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集,是前端开发打包的最常用工具之一。打包后的js,没有注释内容,没有空格且合并到一行,简化了函数参数......
  • vue3 门户网站搭建4-mockjs
    在后端接口没做好之前,为了更好的模拟接口返回,引入mockjs。它可以拦截ajax请求,生成伪数据。 1、安装:npmimokjs-D、npmi vite-plugin-mock-D2、在vite.confi......
  • 在ASP.NET WEBFORM项目中使用MVC4中的BundleConfig捆绑压缩JS和CSS
    1.在Web.config中配置<runtime><assemblyBindingxmlns="urn:schemas-microsoft-com:asm.v1"><dependentAssembly><assemblyIde......