快餐:如何获取语音文件?

前情提要


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

在年前的项目中遇到了语音识别这个功能,坦白讲作为一个前端,之前从未和麦克风打过交道,个人觉得还是很有意思的,这次就简单讲讲如何使用 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 文件就非常简单了,这里给大家提供一个方法,当然可以自己去找三方库进行下载

结语


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

相关推荐
shimh_凉茶8 分钟前
webpack+vue2打包分析视图插件 webpack-bundle-analyzer
前端·webpack·node.js
P***25399 分钟前
JavaScript部署
开发语言·前端·javascript
一只小阿乐20 分钟前
react 状态管理mobx中的行为模式
前端·javascript·react.js·mobx·vue开发·react开发
l***O52022 分钟前
前端路由历史监听,React与Vue实现
前端·vue.js·react.js
超级战斗鸡24 分钟前
React 性能优化教程:useMemo 和 useCallback 的正确使用方式
前端·react.js·性能优化
bemyrunningdog24 分钟前
创建 React 项目指南:Vite 与 Create React App 详
前端·react.js·前端框架
大雷神34 分钟前
DevUI 实战教程:从零构建电商后台管理系统(完整版)
前端·javascript·华为·angular.js
come1123435 分钟前
现代前端技术栈关系详解 (PHP 开发者特供版)
开发语言·前端·php
合作小小程序员小小店40 分钟前
web网页开发,在线%图书管理%系统,基于Idea,html,css,jQuery,java,ssm,mysql。
java·前端·后端·mysql·jdk·intellij-idea
E***q5391 小时前
JavaScript数据挖掘开发
开发语言·javascript·数据挖掘