详解HTML5 录音遇到的坑

本文恩主要介绍了详解HTML5 录音的踩坑之旅，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）

说实话，一开始都没接触过 HTML5 的 Audio API，而且要基于在我们接手前的代码中进行优化。当然其中也踩了不少坑，这次也会围绕这几个坑来说说感受（会省略一些基本对象的初始化和获取，因为这些内容不是这次的重点，有兴趣的同学可以自行查找 MDN 上的文档）：

1. 调用 Audio API 的兼容性写法
2. 获取录音声音的大小（应该是频率）
3. 暂停录音的兼容性写法
4. 获取当前录音时间

 

录音前的准备

开始录音前，要先获取当前设备是否支持 Audio API。早期的方法 navigator.getUserMedia 已经被 navigator.mediaDevices.getUserMedia 所代替。正常来说现在大部分的现代浏览器都已经支持 navigator.mediaDevices.getUserMedia 的用法了，当然 MDN 上也给出了兼容性的写法

const promisifiedOldGUM = function(constraints) {
 // First get ahold of getUserMedia, if present
 const getUserMedia =
 navigator.getUserMedia ||
 navigator.webkitGetUserM