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

文章目录

  • 一、网页中的音频数据源
  • 二、FFT:时域转频域
  • 三、信号的特征分析
  • 四、信号的识别提取
  • 附录

音频数字信号处理 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转换成摩斯码并播放,录制得到上文中使用的摩尔斯电码音频;内置电码翻译功能,可以实时录制音频并解析出电码,本文所总结的内容即为其音频识别成电码所使用的原理。

【完】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/54783.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

telegram设置中文

浏览器打开 https://t.me/setlanguage/classic-zh-cn,只要安装了tg,会自动打开tg,提示切换至中文

谷歌浏览器chrome 语言设置为英文

1.打开Chrome浏览器主界面,看到右上角的【三个点】一样的标志,鼠标左键单击,选择【设置】 2.打开【设置】之后,下拉到最底部看到【高级】两个字,我们鼠标点击一下打开它 3.打开【高级设置】之后我们继续往下拉&#xf…

Chrome浏览器 F12控制台中文改成英文

当Chrome浏览器 F12控制台是中文,怎么设置成英文? 第一步:点击控制台右上角的设置图标 第二步:“语言”选项从浏览器界面语言设置成英文 第三步:重新加载DevTools,控制台变成英文了

谷歌浏览器设置中文教程

谷歌浏览器是由谷歌公司推出的一款网页浏览器,稳定性强,运行速度快,唯一不足的应该就是它不是中文的,那要如何给谷歌浏览器设置中文?下面就一起来看看具体的设置方法吧。 谷歌浏览器怎么设置中文? 1、进入浏…

【爬虫】爬取百度图片加载不出来

图片加载不出来?(防盗链) 在img标签禁用referer 博客 https://blog.csdn.net/fRF0lw4/article/details/80105574 防盗链解决方案 https://www.cnblogs.com/lydiawork/p/7838153.html 防盗链原理

chatgpt赋能python:Python爬虫网页超链接的SEO实践指南

Python爬虫网页超链接的SEO实践指南 随着互联网的普及,新的网站层出不穷,各种搜索引擎如Google、百度也不断更新搜索算法,以提供更优质的搜索结果。在这个过程中,SEO技术成为网站推广优化的重要手段之一。Python爬虫作为一种常用…

ChatGPT和GPT-4胜出基于四个方面

作为一项人工智能技术,ChatGPT正在以飞快的速度向前发展,其强大的学习能力甚至可以用超乎想象来形容。 最近,OpenAI公司又带着最新的GPT-4开始“大杀四方”了~OpenAI推出GPT-4文本生成AI系统。 那么作为目前NLP领域最前沿的研究成果之一&…

为什么当时那么多大佬不投资阿里?雷军:马云把项目说得太大,像个骗子!

现在我们也可以看出来互联网行业的发展可以说是很热门了,并且还很多发展的潜力。那么也就向我们表明了多年以前马云关于互联网的判断是正确的。不管是现在马云的电子商务还是移动支付等等一系列的互联网产品都充分地向我们证明了阿里巴巴的发展方向是正确的。 然而我…

马云、马化腾各自性格决定投资方式,你更看好谁?

作者:大宝 编辑:竹一 图片:网络 官网:iterduo.com “未来世界即将迎来‘OMO’(Online-Merge-Offline线上与线下融合)的时代,而中国的发展速度相当惊人,将有望在全球范围内首先实现OM…

马云、马化腾要合作了?阿里传出新消息,或将支持微信支付

马云与马化腾,阿里与腾讯 马云和马化腾是国内互联网界影响力最大的两位知名人物,他们分别是阿里巴巴和腾讯的创始人,在某种意义上改变了无数国人的日常生活。虽然平时大家都喜欢把马云和马化腾并称为“二马”,对他们的各种事迹也…

支付宝要融资上市,马云大赚,不过他承诺捐了

作者|科科 出品|网易科技《态℃》栏目组 七夕节临近下班时间,蚂蚁集团来了个突然袭击,公开了备受瞩目的招股书。这是蚂蚁首次全面披露业务大盘、营收情况等核心数据及未来规划。 营收方面,蚂蚁在2017年-2019年&#xf…

马云不再是蚂蚁集团实控人

2023年1月8日,阿里巴巴集团控股有限公司发布《自愿公告》。 阿里巴巴的非并表关联方蚂蚁集团 2023 年 1 月 7 日宣布,蚂蚁集团的两个主要股东(合计持有蚂蚁集团超过 50% 的股权和投票权)的投票结构将会发生变化。在各方经济利益不…

搞定马云马化腾争执的IT界大佬---吴鹰

链接:搞定马云马化腾争执的IT界大佬,因为一两亿的事情报警了! (baidu.com) 因为这个没完成的一两亿对赌业绩,互相打官司无果后,中嘉博创直接报警说对方涉嫌挪用公司资金。至于吴鹰为啥没调停这个事,不太好…

市值登顶亚洲后,马云对话全球投资者:与未来相比阿里还是个baby

“过去影响世界的很多是欧美公司,我们希望阿里成为真正的世界前十大公司,可以作为中国公司的代表去影响世界。”6月9日,阿里巴巴投资者日大会,阿里巴巴集团董事局主席马云对全球超过350位顶级投资机构的投资人和分析师分享了他的思…

忽悠马云10亿,还阿里4500亿:做对事赢一场,跟对人赢一生!

那个忽悠马云10个亿,被阿里同事指着鼻子让他滚蛋的人,后来怎么样了? 后来,他成为阿里巴巴集团首席技术官,而且被公认为,近10年来,中国最好的首席技术官。 他叫王坚,被称为“阿里云之…

雷军、马云、马化腾控股的公司

雷军、马云、马化腾控股的公司 前言 今天看我以前写的《行业分析常用到的21个网站》的时候,点开了一个网站——CBNData。 这是第一财经的网站,第一财经已经成为阿里系的一部分。阿里欲将其打造为具有全球影响力的新型数字化财经媒体与信息服务集团&…

传闻将与马云合作,涨了7倍的正大企业国际,还能跟风吗?

1月30日周一,港股正大企业国际逆势大涨68.35%,1月31日正大企业国际继续飙升,最高点涨超275%,收盘时涨幅达251.88%,成为2023年第一只翻倍的股票。今日早盘继续近40个点,还在持续发酵中。 消息面上&#xff…

我为什么投资马云

《创业邦》_口述/F&H投资管理有限公司董事长、天使投资人吴炯 _采访整理/刘岩 _摄影/袁建敏  编者按:马云的创业伙伴、季琦的大学同学兼汉庭联合创始人、聚美优品和聚光科技的天使投资人等光环似乎遮掩了吴炯在甲骨文、雅虎的职业生涯亮点。技术出身的吴炯谦虚…

IDC大模型技术评估出炉,百度文心大模型3.5斩获7个满分、三个第一

近日,IT市场研究和咨询公司IDC发布《AI大模型技术能力评估报告,2023》,对各家大模型进行了综合测评。报告显示,百度文心大模型3.5拿下12项指标的7个满分,取得综合评分第一、算法模型第一、行业覆盖第一,三个…

【观察】三个绝对第一领跑全行业,解读百度文心大模型3.5的“统治力”

“百模大战”之际,各家的大模型能力究竟几何,无疑是最令外界关注的。 日前,IDC最新发布的《AI大模型技术能力评估报告,2023》对此给出了参考,这是IDC首次提出AI大模型技术能力评估框架,包括百度、阿里、腾讯…