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

目录

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

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

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

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

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

一、网页中的音频数据源

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

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

不同音频格式有不同的压缩编码方法，为了得到文件内的音频数据，我们需要解码音频文件，得到音频的采样数据（PCM）才好进行下一步处理；.wav格式的文件解码简单，它是一般是由wav头+pcm数据组合而成的，直接去掉wav头即完成解码，其他文件可通过AudioContext的decodeAudioData方法直接解码成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的实现有很多开源代码可以参考，或者直接使用浏览器提供的AudioContext的createAnalyser接口来进行频域数据变换；Recorder库中的提供了2个FFT实现可以使用：extensions/lib.fft.js、dsp.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转换成摩斯码并播放，录制得到上文中使用的摩尔斯电码音频；内置电码翻译功能，可以实时录制音频并解析出电码，本文所总结的内容即为其音频识别成电码所使用的原理。

【完】