前情提要

各位好！好久不见，年前一直在项目中卷生卷死，年后的空闲时间反而让人无所适从。想到自己已经好久没有更新博客了，趁此机会正好更新一下。

在年前的项目中遇到了语音识别这个功能，坦白讲作为一个前端，之前从未和麦克风打过交道，个人觉得还是很有意思的，这次就简单讲讲如何使用 Web Audio API。

Web Audio API 的定义这里我就不赘述了，可以去 MDN 上看：MDN

获取音频流数据

首先，我们需要判断当前浏览器是否支持麦克风，可以通过 navigator.mediaDevices.getUserMedia 是否存在进行判断：

如果存在这个方法，说明当前环境就是支持麦克风的，我们可以调用该方法来打开麦克风，获取语音流数据。

这里的参数是获取音频不获取视频的意思，如果需要获取视频的话将 video 为 true。

之后这个方法会反应一个 Promise，它的值就是语音流数据，我们可以通过 MediaRecorder 来监听这个语音流。

之后我们就可以通过 onstart、onstop 来监听这个语音流状态变化，同时可以通过 start 和 stop 进行语音流打开和关闭。

这里强调一下 dataavailable 事件，我们主要就是通过这个事件监听来获取语音流数据的。当我们调用 requestData 方法时，将传递自记录开始或事件最后一次发生以来捕获的所有媒体数据。当我们调用 stop 方法时，将传递自记录开始或 dataavailable 事件最后一次发生以来已捕获的所有媒体数据。

下载音视频文件

我们在 dataavailable 事件中获取到就是 Blob 格式数据，那么下载 Blob 文件就非常简单了，这里给大家提供一个方法，当然可以自己去找三方库进行下载

结语

好了，这样简单的语音流操作就讲完了，希望能对你有帮助！关于采样率、单双声道的问题我们下期再说。如果你有任何问题欢迎在评论区告诉我。