移动端HTML5录音实现指南：系统播放音量变小，部分机型录音断断续续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返回的音频流进行音频采集。使用MediaRecorder采集音频已经知道，浏览器的MediaRecorder接口录制的音频不会有ScriptProcessor或者AudioWorklet接口录制的断断续续的现象；而后两段在PC端录制的音频将不仅仅在移动端。有爆音现象，但只是间隔时间长了偶尔出现，对音质的影响并不明显。MediaRecorder完全没有这些问题！因此，需要使用MediaRecorder进行录音，以获得更好的音质；ScriptProcessor和AudioWorklet站在一边。音频格式：WebM和PCMMediaRecorder一般都是录制WebM格式的音视频文件，支持的格式可以通过MediaRecorder.isTypeSupported方法判断：codecs=opus'//所有支持的格式,'audio/webm;codecs=pcm'//Chrome/Safari支持,'audio/pcm','audio/webm;codecs=wav','音频/wav','音频/webm;codecs=ogg','audio/ogg'//FireFoxsupports].forEach(v=>console.log(MediaRecorder.isTypeSupported(v)+":"+v))可以看到MediaRecorder编码的WebM格式opus最好的支持；Chrome/Safari支持pcm编码的WebM；wav和ogg不作为参考。Recorder只想获取浏览器采集的PCM音频数据（方便转换成其他格式，如mp3、wav），或者简单解码得到PCM。opus编码的WebM对我们需要实现的录音功能帮助不大；还有pcm编码的WebM支持，只需从WebM容器中提取PCM，目前运行在Chrome/Safari浏览器上即可解决大部分用户终端的适配。从WebM容器MediaRecorder中提取PCM数据记录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只支持将getUserMedia返回的音频流录制到audio/webm中；codecs=pcm格式在Chrome/Safari，其他浏览器FireFox不支持录制这段代码，需要降级使用ScriptProcessor或者AudioWorklet使用getUserMedia音频流采集录制。好在RecorderH5录音开源库支持这些功能。升级和添加MediaRecorder支持不需要太多代码。无论是MediaRecorder、ScriptProcessor还是AudioWorklet，Recorder都实时返回16位PCM数据；拥有PCM数据后：实时转码、实时上传、语音识别、音频可视化等功能都可以实现。所有已经正常支持getUserMedia的浏览器都可以录音，录音音质会根据浏览器支持自动优先选择最佳的音频采集方案；支持包括但不限于：Chrome、Firefox、Safari、iOS14.3+、AndroidWebView、腾讯AndroidX5内核（QQ、微信、小程序WebView），2021年以后更新的大部分安卓手机都有自己的浏览器。期待已久的H5录制时系统播放音量变低的问题，从Recorder开源之初就被发现了。只要在手机上打开录音，同时播放音频，系统声音就会很低，甚至跑到听筒上播放，但有时它是正常的和不规则的。无奈好几年了，也没有文档有这方面的说明或者文章参考。本次升级Recorder支持MediaRecorder时，由于需要在getUserMedia参数中设置音频采样率sampleRate，所以noiseSuppression降噪和echoCancellation回声消除都默认设置为false。没想到测试的时候没有系统播放声音。收缩现象。降噪和回声消除这两个参数早就在测试页面上提供了设置选项，但是之前默认是没有配置的，之前测试的时候经常设置为false，但是没有发现这些参数可以解决系统音量。.最后经过反复测试，只有在noiseSuppression+echoCancellation同时生效的情况下，打开录音再播放音频，系统音量肯定会降低。不幸的是，只要不配置这两个参数，getUserMedia默认是同时开启的；只要你给这两个参数中的任何一个设置为false，或者都设置为false，手机系统的音量是不会受到影响的。目前Recorder默认关闭了noiseSuppression和echoCancellation，使用原声录音（高音甜美，中音中音，低音浑厚，总之就是通透---陈永仁（梁朝伟饰））。RecorderH5录音开源库：https://github.com/xiangyuecn/RecorderRecorderH5在线测试页面：https://xiangyuecn.gitee.io/recorder/【完】
