JavaScript实现页面记录功能的方法

时间：2021-08-23 来源：互联网编辑：宝哥软件园浏览：次

前言

页面录制需要浏览器提供的Media Recorder API，所以前提是浏览器支持与MediaStream Recording相关的功能。

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

准备页面

首先，准备一个内容简单的页面，一个录音按钮和一个音频标签进行播放。

！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/audiv script src=' http 3360。/recorder.js'/script/body/html获取录制权限

因为录音需要使用设备的麦克风，所以第一步应该是询问用户录音许可。这是通过媒体设备完成的。获取用户媒体()，其用法是：

var promise=navigator . mediadevices . getuser media(约束条件)；其中，约束是需要获取的权限列表，这里只需要指定音频audio。

它的返回是一个承诺，因为它不确定用户何时授权。授权的成败在Promise的回调中处理。

在使用之前，需要判断浏览器是否支持相应的API。此时，您会得到以下代码：

if(navigator . mediadevices . getuser media){ const constraints={ audio : true }；navigator . media devices . getuser media(约束)。然后(stream={console.log('授权成功！');}，()={console.error('授权失败！');} );} else {console.error('浏览器不支持GetUserMedia ')；}在成功回调中获得的输入流是MediaStream对象。

此时，运行后，可以看到浏览器显示提示用户授权使用麦克风。

请求用户允许使用麦克风

创建录制实例

将上一步获得的媒体流传递到媒体录制器的构造函数中，创建一个录制器实例。

var media recorder=new media recorder(流)；开始录制

通过单击监视器页面上的录制按钮开始录制。

const recordBtn=document . queryselector('。record-BTN ')；const media recorder=new media recorder(流)；recordbtn . onclick=()={ media recorder . start()；Console.log('录制.');};MediaRecorder实例上有一个状态，可以用来判断记录器当前的活动状态。总共有三个值：

非活动：处于静止状态，要么没有启动，要么启动后就停止了。录制：在录制中暂停：已开始，但暂停，未停止或继续。因此，通过这种状态，我们可以在再次点击按钮时完成录制。

recordBtn . onclick=()={ if(media recorder . state==' recording '){ media recorder . stop()；recordBtn . text content=' record '；Console.log('录制结束')；} else { media recorder . start()；Console.log('录制.');recordBtn.textContent=' stop} console.log('记录器状态：'，media recorder . state)；};音频数据采集

上面的按钮处理用户的交互，只负责开始或停止录制。通过监视相应的事件，仍然可以从媒体录制器实例中完成音频数据。

当录制开始时，它将触发其MediaRecorder.ondataavailable事件。这个事件的回调参数是BlobEvent，事件. data就是我们需要的音频数据。因为数据是逐段生成的，所以需要临时存储在数组中。

const chunks=[]；media recorder . ondata available=function(e){ chunks . push(e . data)；};到目前为止完成的代码应该如下所示：

记录器. js

录制状态视图

音频录制和播放结束

通过收听MediaRecorder.onstop事件，收集到的音频数据被创建到一个Blob对象中，然后通过URL.createObjectURL创建一个可以被HTML中的音频标签使用的资源链接。

media recorder . onstop=e={ var Blob=new Blob(chunks，{ type : ' audio/ogg；编解码器=opus ' })；组块=[]；var audioURL=window。URL . CreateObjectURl(blob)；audio.src=audioURL};其中，在使用接收到的音频数据之后，便于使用组块进行下一次记录。

到目前为止完成的代码应该如下所示：

记录器. js

奔跑

完成上述步骤后，实现了一个简单的录音功能，可以通过这个地址在线体验。完整的代码可以在仓库wayou/录音机中获得。