如何使用JavaScript实现页面中录音功能

　　介绍

这篇文章主要介绍了如何使用JavaScript实现页面中录音功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

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

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,& lt; meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　,& lt; title> audio  record</title> 　　& lt;/head> 　　& lt; body> 　　,& lt; div 类=癮pp"比; 　　& lt;才能button 类=皉ecord-btn"祝辞record 　　& lt;才能audio  controls 类=癮udio-player"祝辞& lt;/audio> 　　,& lt;/div> 　　,& lt; script  src=https://www.yisu.com/zixun/薄?recorder.js "> 　　身体 　　

<强>获取录音权限

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

var  promise =, navigator.mediaDevices.getUserMedia(约束);

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

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

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

if  (navigator.mediaDevices.getUserMedia), { 　　,const  constraints =,{,音频:true }; 　　,navigator.mediaDevices.getUserMedia(约束)(=,stream 祝辞,{ 　　console.log才能(“授权成功!“); 　　}, 　　,()=祝辞,{ 　　console.error才能(“授权失败!“); 　　,} 　　,); 　　},{else  　　,console.error(“浏览器不支持,getUserMedia"); 　　}

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

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

如何使用JavaScript实现页面中录音功能

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

<强>创建录音实例

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

var  mediaRecorder =, new  MediaRecorder(流);

<>强启动录音

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

const  recordBtn =, document.querySelector (“.record-btn"); 　　const  mediaRecorder =, new  MediaRecorder(流); 　　recordBtn.onclick =,(),=祝辞,{ 　　,mediaRecorder.start (); 　　,console.log(“录音中…“); 　　};

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

<李>

活动:处于休息状态,要么是没开始,要么是开始后已经停止。

<李>

记录:录音中

<李>

停了下来:已经开始,但被暂停了,不是停止也没有被恢复。

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

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); 　　};

<强>音频数据的获取

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

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

const  chunks =, []; 　　时间=mediaRecorder.ondataavailable 函数(e), { 　　,chunks.push (e.data); 　　};

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

,录音机。js

如何使用JavaScript实现页面中录音功能

如何使用JavaScript实现页面中录音功能