本文恩主要介绍了详解HTML5 录音的踩坑之旅,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线)
说实话,一开始都没接触过 HTML5 的 Audio API,而且要基于在我们接手前的代码中进行优化。当然其中也踩了不少坑,这次也会围绕这几个坑来说说感受(会省略一些基本对象的初始化和获取,因为这些内容不是这次的重点,有兴趣的同学可以自行查找 MDN 上的文档):
- 调用 Audio API 的兼容性写法
- 获取录音声音的大小(应该是频率)
- 暂停录音的兼容性写法
- 获取当前录音时间
录音前的准备
开始录音前,要先获取当前设备是否支持 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