在html5网页中录音解决方案

缘起

因公司业务需要在网页录音功能，因为h5的api兼容限制不得想出一些解决方案，以下是总结。

首发

https://shudong.wang/10585.html

demo测试地址

https://wsdo.github.io/recording/

项目地址

https://github.com/wsdo/recording

Q&A

后续继续完善，有这个需求的朋友可以继续讨论

调查

• 百度语音识别

感觉百度够强大，肯定有完美的解决方案，最终发现在移动端网页打开百度语音直接跳转让下载app（说明不支持）

• 谷歌语音识别

在不支持的机型上面不显示语音识别按钮

兼容性

h5录音主要使用AudioContext 和 getUserMedia 兼容性还是很差的，尤其是在移动端。

AudioContext

getUserMedia

真机测试结果： （测试部分，旁边同事的手机和公司的测试机，和自己的手机）

可以使用的：（最新版本，常用）
pc safari 支持
ios Safari 支持
安卓
小米5 微信里面可以使用
小米5 Chrome 最新版可以使用
小米5 uc可以使用

不可以使用的
ios Chrome 到这出了问题 webkitAudioContext.createScriptProcessor
ios 微信里面不支持
小米5 自带浏览器不可以
华为自带浏览器不可以

解决方案

考虑到手机端微信里面使用场景比较多

• 针对微信专门写一套解决方案，借用微信的jssdk 的api，这样可以解决大部分在微信里面使用的场景
• 兼容的手机：正常使用
• 不兼容的手机：提示 推荐浏览器

操作过程

先了解一下简介和历史吧

简介