移动端实现HTML5录音踩坑指南(系统播放音量变小、一些机型录音断断续续 MediaRecorder和AudioWorklet)

H5录音见坑填坑 在2022-06-19那天,Recorder H5录音开源库(https://github.com/xiangyuecn/Recorder)群里有用户反馈手机上录音有bug,前后反馈过来几段测试过程完整录像;分析后初步发现在他那个手机上表现确实是断断续续的,从而音质非常差;此版本的Recorder采用的浏览器AudioContext.createScriptProcessorAudioWorklet 接口对getUserMedia返回的音频流进行音频采集,在线测试地址:https://xiangyuecn.gitee.io/recorder/。
但用另外一个录音库 collab-project/videojs-record 录制的却没有这个问题,当时初步分析了下一,发现collab-project在手机上使用的是MediaStreamRecorder来录制webm格式音频,底层使用的是浏览器的MediaRecorder接口对getUserMedia返回的音频流进行音频采集。
移动端实现HTML5录音踩坑指南(系统播放音量变小、一些机型录音断断续续 MediaRecorder和AudioWorklet)
文章图片

采用MediaRecorder采集音频 已经知道了浏览器的MediaRecorder接口录制出来的音频不会有ScriptProcessorAudioWorklet 接口录制出来的那种断断续续现象;并且后面两个除了在移动端外,在PC端录制出来的音频也会有爆音的现象,只不过要间隔比较久才偶尔出现,对音质影响不明显,这些问题MediaRecorder统统没有!
因此很有必要使用MediaRecorder来进行录音,来获得更好的音质;ScriptProcessorAudioWorklet 靠边站。
音频格式:WebM和PCM
【移动端实现HTML5录音踩坑指南(系统播放音量变小、一些机型录音断断续续 MediaRecorder和AudioWorklet)】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/inde...。
学习一下Matroska文档,就很容易提取出WebM中包含的音频轨道数据了,PCM编码的WebM中的音频轨道中的数据一般为32位浮点数pcm数据。
我写了一段解析和提取WebM音频的代码,代码注释里面详细介绍了WebM格式分解过程,源代码在这里 (可以直接测试运行)。
录音的兼容性 MediaRecorder只支持在Chrome/Safari里对getUserMedia返回的音频流录制成audio/webm; codecs=pcm格式,其他浏览器FireFox不支持此编码的录制,需要降级使用 ScriptProcessorAudioWorklet 来对getUserMedia音频流的采集录制。
好在这些功能在Recorder H5录音开源库都是支持的,升级加一个MediaRecorder支持也用不了多少代码,不管是MediaRecorder还是ScriptProcessorAudioWorklet,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/
【完】

    推荐阅读