JavaScript实现页面中录音功能的方法


Posted in Javascript onJune 04, 2019

前言

页面中实现录音需要使用浏览器提供的 Media​Recorder API,所以前提是需要浏览器支持 MediaStream Recording 相关的功能。

以下代码默认工作在 Chrome 环境中。

准备页面

首先准备一个页面,其中内容很简单,一个录音按钮,一个用于播放的 <audio> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>audio record</title>
</head>
<body>
 <div class="app">
  <button class="record-btn">record</button>
  <audio controls class="audio-player"></audio>
 </div>
 <script src="./recorder.js"></script>
</body>
</html>

获取录音权限

因为录音需要使用设备的话筒,所以第一步应该是向用户索要录音的权限。这是通过 Media​Devices​.get​User​Media()
来完成的,其用法为:

var promise = navigator.mediaDevices.getUserMedia(constraints);

其中 constraints 为需要获取的权限列表,这里只需要指定音频 audio 即可。

其返回是个 Promise,因为用户何时进行授权是不确定的。通过在 Promise 的回调中进行授权成功或失败的处理。

在使用前需要判断浏览器是否已经支持相应的 API,此时得到如下的代码:

if (navigator.mediaDevices.getUserMedia) {
 const constraints = { audio: true };
 navigator.mediaDevices.getUserMedia(constraints).then(
 stream => {
  console.log("授权成功!");
 },
 () => {
  console.error("授权失败!");
 }
 );
} else {
 console.error("浏览器不支持 getUserMedia");
}

其中成功回调里得到的入参 stream 为 MediaStream 对象。

此时运行后可看到浏览器展示出了让用户授权使用麦克风的提示。

JavaScript实现页面中录音功能的方法

向用户索要麦克风使用权限

创建录音实例

将上一步获取到的 MediaStream 传入 Media​Recorder 的构造器创建一个录音器的实例。

var mediaRecorder = new MediaRecorder(stream);

启动录音

通过监听页面中录音按钮的点击来启动录音。

const recordBtn = document.querySelector(".record-btn");
const mediaRecorder = new MediaRecorder(stream);
recordBtn.onclick = () => {
 mediaRecorder.start();
 console.log("录音中...");
};

MediaRecorder 实例上有个 state 状态,可用来判断录音器当前的活动状态,总共有三种值:

  • inactive:处于休息状态,要么是没开始,要么是开始后已经停止。
  • recording:录音中
  • paused:已经开始,但被暂停了,不是停止也没有被恢复。

所以通过这个状态,我们可以实现再次点击按钮时,结束录音。

recordBtn.onclick = () => {
 if (mediaRecorder.state === "recording") {
  mediaRecorder.stop();
  recordBtn.textContent = "record";
  console.log("录音结束");
 } else {
  mediaRecorder.start();
  console.log("录音中...");
  recordBtn.textContent = "stop";
 }
 console.log("录音器状态:", mediaRecorder.state);
};

音频数据的获取

上面按钮处理来自用户的交互,只负责启动或停止录音。音频的数据还是从 Media​Recorder 实例上通过监听其相应的事件来完成的。

当录音开始时,会触发其 MediaRecorder.ondataavailable 事件,从该事件回调的入参为 BlobEvent,从它身上取到 event.data 便是我们需要的音频数据。因为数据是一段一段产生的,所以需要暂存到一个数组中。

const chunks = [];
mediaRecorder.ondataavailable = function(e) {
 chunks.push(e.data);
};

目前为止完成的代码应该是这样的:

 recorder.js

JavaScript实现页面中录音功能的方法

录音状态的查看

录音结束及音频的播放

通过监听 MediaRecorder.onstop 事件,将收集好的音频数据创建成Blob 对象,然后 通过 URL.createObjectURL 创建成 HTML 中 <audio> 标签可使用的资源链接。

mediaRecorder.onstop = e => {
 var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
 chunks = [];
 var audioURL = window.URL.createObjectURL(blob);
 audio.src = audioURL;
};

其中,在使用完收到到的音频数据后,将 chunks 置空方便下次录音时使用。

目前为止完成的代码应该是这样的:

 recorder.js

运行

完成上面步骤后,实现了一个简单的录音功能,可通过此地址在线体验。完整的代码可在仓库 wayou/audio-recorder 中获取到。

相关资源

  • Media​Recorder
  • MediaRecorder.onstop
  • URL.createObjectURL

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 #Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 #Javascript
js回文数的4种判断方法示例
Jun 04 #Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 #Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 #Javascript
JavaScript之数组扁平化详解
Jun 03 #Javascript
JavaScript从原型到原型链深入理解
Jun 03 #Javascript
You might like
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
限制复选框的最大可选数
2006/07/01 Javascript
用jscript实现列出安装的软件列表
2007/06/18 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
Python实现图片转字符画的示例
2017/08/22 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python整数对象实现原理详解
2019/07/01 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
最常使用的求职信
2014/05/25 职场文书
银行求职自荐书
2014/06/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
停电放假通知
2015/04/14 职场文书
调任通知
2015/04/21 职场文书
酒店开业主持词
2015/07/02 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL