移动端实现HTML5 mp3录音踩坑指南：系统播放音量变小、一些机型录音断断续续之 MediaRecorder和AudioWorklet的终极对决

高坚果兄弟

已于 2022-08-14 08:15:48 修改

阅读量2k

点赞数 1

分类专栏： H5 文章标签：网页录音 html录音 h5录音 mp3 wav

于 2022-08-14 08:13:55 首次发布

本文链接：https://blog.youkuaiyun.com/xiangyuecn/article/details/126327992

版权

H5 专栏收录该内容

16 篇文章

订阅专栏

文章目录

H5录音见坑填坑
采用MediaRecorder采集音频
- 音频格式：WebM和PCM
- 从WebM封装容器中提取PCM数据
录音的兼容性
困扰已久的H5录音时系统播放音量变小的问题

H5录音见坑填坑

在2022-06-19那天，Recorder H5录音开源库（https://github.com/xiangyuecn/Recorder）群里有用户反馈手机上录音有bug，前后反馈过来几段测试过程完整录像；分析后初步发现在他那个手机上表现确实是断断续续的，从而音质非常差；此版本的Recorder采用的浏览器AudioContext.createScriptProcessor 或 AudioWorklet 接口对getUserMedia返回的音频流进行音频采集，在线测试地址：https://xiangyuecn.gitee.io/recorder/。

但用另外一个录音库 collab-project/videojs-record 录制的却没有这个问题，当时初步分析了下一，发现collab-project在手机上使用的是MediaStreamRecorder来录制webm格式音频，底层使用的是浏览器的MediaRecorder接口对getUserMedia返回的音频流进行音频采集。

更新后的Recorder录音在线测试页

采用MediaRecorder采集音频

已经知道了浏览器的MediaRecorder接口录制出来的音频不会有ScriptProcessor 或 AudioWorklet 接口录制出来的那种断断续续现象；并且后面两个除了在移动端外，在PC端录制出来的音频也会有爆音的现象，只不过要间隔比较久才偶尔出现，对音质影响不明显，这些问题MediaRecorder统统没有！

因此很有必要使用MediaRecorder来进行录音，来获得更好的音质；ScriptProcessor 和 AudioWorklet 靠边站。

音频格式：WebM和PCM

MediaRecorder一般录制出来的是WebM格式的音视频文件，可通过MediaRecorder.isTypeSupported方法判断支持的格式：

[ //胡乱拼接一些类型 不同浏览器支持的不同
	'audio/webm; codecs=opus' //都支持的格式
	,'audio/webm; codecs=pcm' //Chrome/Safari支持
	,'audio/pcm'
	,'audio/webm; codecs=wav'
	,'audio/wav'
	,'audio/webm; codecs=ogg'
	,'audio/ogg' //FireFox支持
].forEach(v=>console.log( MediaRecorder.isTypeSupported(v) +" : "+ v ))

可以看到MediaRecorder对opus编码的WebM格式支持的最好；pcm编码的WebM在Chrome/Safari里得到了支持；wav、ogg不做参考。

Recorder只想得到浏览器采集到的PCM音频数据（易于转换成其他格式，比如mp3、wav），或者能简单的解码得到PCM也行，opus编码的WebM对我们需要实现的录音功能帮助不大；好在还有pcm编码的WebM支持，简单的从WebM容器中提取出PCM即可，目前能支持在Chrome/Safari浏览器上运行就能解决绝大部分用户终端的适配。

从WebM封装容器中提取PCM数据

MediaRecorder录制了audio/webm; codecs=pcm数据后，会根据设定的时长间隔，将音频片段通过回调传给js；好在WebM容器格式简单，很好的做到实时的提取PCM数据。

WebM格式（.webm、.weba）和常见的 .mkv 视频格式都使用的：Matroska开源多媒体容器标准；Matroska封装格式官方文档：https://www.matroska.org/index.html。

学习一下Matroska文档，就很容易提取出WebM中包含的音频轨道数据了，PCM编码的WebM中的音频轨道中的数据一般为32位浮点数pcm数据。

我写了一段解析和提取WebM音频的代码，代码注释里面详细介绍了WebM格式分解过程，源代码在这里（可以直接测试运行）。

录音的兼容性

MediaRecorder只支持在Chrome/Safari里对getUserMedia返回的音频流录制成audio/webm; codecs=pcm格式，其他浏览器FireFox不支持此编码的录制，需要降级使用 ScriptProcessor 或 AudioWorklet 来对getUserMedia音频流的采集录制。

好在这些功能在Recorder H5录音开源库都是支持的，升级加一个MediaRecorder支持也用不了多少代码，不管是MediaRecorder还是ScriptProcessor 或 AudioWorklet，Recorder统统实时的返回16位PCM数据；有了PCM数据后：实时转码、实时上传、语音识别、音频可视化等等功能均可实现。

所有已正常支持getUserMedia的浏览器均能录音，录音音质根据浏览器支持情况自动优先采用最佳音频采集方案；支持的包括但不限于：Chrome、Firefox、Safari、iOS 14.3+、Android WebView、腾讯Android X5内核(QQ、微信、小程序WebView)、大部分2021年后更新的Android手机自带浏览器。

困扰已久的H5录音时系统播放音量变小的问题

从Recorder开源之初就发现了这个问题，手机上只要打开了录音，同时播放音频的时候，系统声音会非常的小，甚至跑到了听筒播放，但有时又正常毫无规律，几年一直束手无策，根本没有文档有这方面的描述或文章参考。

在本次Recorder升级支持MediaRecorder的时候，由于需要getUserMedia参数里面设置audio的采样率sampleRate，顺手就把noiseSuppression降噪、echoCancellation回声消除都默认设成了false，没想到测试的时候再也没有系统播放声音变小的现象。

降噪、回声消除这两个参数很早以前就在测试页面中提供了设置选项，不过之前默认是未配置状态，以前也经常设为false进行测试，竟然没有发现这些参数能解决系统音量变小。

最后经过反复测试，只有noiseSuppression+echoCancellation同时生效时，打开录音后再播放音频，系统音量一定会变小，很惨的是getUserMedia只要你没有配置这两个参数，默认就是同时开启的；只要你给这两参数任意一个设为false，或者都设为false，就不会影响手机系统音量。

目前Recorder已默认禁用了noiseSuppression和echoCancellation，使用原声录制（高音甜、中音准、低音沉，总之一句话就是通透 — 陈永仁（梁朝伟饰））。

Recorder H5录音开源库：https://github.com/xiangyuecn/Recorder

Recorder H5在线测试页：https://xiangyuecn.gitee.io/recorder/
【完】