前端实现在浏览器网页中录音
前端Q
共 4269字,需浏览 9分钟
·
2020-12-20 21:01
一、整体实现的思想
二、具体细节和函数
/*获取浏览器的录音权限,contraint是需要获取权限的列表*/
const constraints = { audio: true };
//返回的是Promise对象,因为需要等到用户确定授予权限的时候,我们才会处理下面的步骤,navigator是浏览器对象,我们就是通过navigator获取录音权限,成功回调的话就会获取到一个stream,然后将这个stream放入到我们下面创建的录音实例里面去
navigator.mediaDevices.getUserMedia(constraints)
创建录音实例
//通过该方法创建录音实例
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);
};
音频数据的获取
上面按钮处理来自用户的交互,只负责启动或停止录音。音频的数据还是从 MediaRecorder 实例上通过监听其相应的事件来完成的。
当录音开始时,会触发其 MediaRecorder.ondataavailable 事件,从该事件回调的入参为 BlobEvent,从它身上取到 event.data 便是我们需要的音频数据。因为数据是一段一段产生的,所以需要暂存到一个数组中。
const chunks = [];
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
录音的结束和音频的播放,通过监听 MediaRecorder.onstop 事件,将收集好的音频数据创建成Blob 对象,然后 通过 URL.createObjectURL 创建成 html 中
mediaRecorder.onstop = e => {
var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
chunks = [];
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
};
三、详细完整代码
<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>实现在网页上录音title>
head>
<body>
<div class="app">
<button class="record-btn">recordbutton>
<audio controls class="audio-player" >
audio>
<button class="record-btn1">recordbutton>
<audio controls class="audio-player1" >
audio>
div>
<script>
if (navigator.mediaDevices.getUserMedia) {
const constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(
stream => {
console.log("授权成功!");
const recordBtn = document.querySelector(".record-btn");
const mediaRecorder = new MediaRecorder(stream);
var chunks = [];
recordBtn.onclick = () => {
if (mediaRecorder.state === "recording") {
mediaRecorder.stop();
console.log(chunks)
mediaRecorder.onstop = e => {
var blob= new Blob(chunks, { type: "audio/ogg; codecs=opus" });
chunks = [];
var audioURL = window.URL.createObjectURL(blob);
const audioSrc = document.querySelector(".audio-player");
audioSrc.src = audioURL;
};
recordBtn.textContent = "record";
console.log("录音结束");
} else {
mediaRecorder.start();
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
};
console.log(chunks)
console.log("录音中...");
recordBtn.textContent = "stop";
}
console.log("录音器状态:", mediaRecorder.state);
};
},
() => {
console.error("授权失败!");
}
);
} else {
console.error("浏览器不支持 getUserMedia");
}
if (navigator.mediaDevices.getUserMedia) {
const constraints1 = { audio: true };
navigator.mediaDevices.getUserMedia(constraints1).then(
stream1 => {
console.log("授权成功!");
const recordBtn1 = document.querySelector(".record-btn1");
const mediaRecorder1 = new MediaRecorder(stream1);
var chunks1 = [];
recordBtn1.onclick = () => {
if (mediaRecorder1.state === "recording") {
mediaRecorder1.stop();
//console.log(chunks)
mediaRecorder1.onstop = e => {
var blob1 = new Blob(chunks1, { type: "audio/ogg; codecs=opus" });
chunks1 = [];
var audioURL1 = window.URL.createObjectURL(blob1);
const audioSrc1 = document.querySelector(".audio-player1");
audioSrc1.src = audioURL1;
};
recordBtn1.textContent = "record";
console.log("录音结束");
} else {
mediaRecorder1.start();
mediaRecorder1.ondataavailable = function(e) {
chunks1.push(e.data);
};
//console.log(chunks)
console.log("录音中...");
recordBtn1.textContent = "stop";
}
console.log("录音器状态:", mediaRecorder1.state);
};
},
() => {
console.error("授权失败!");
}
);
} else {
console.error("浏览器不支持 getUserMedia");
}
script>
body>
html>
(这个代码可以直接复制粘贴使用,查看效果,然后再一步步的学习细节)
MediaRecorder 实例上有个 state 状态,可用来判断录音器当前的活动状态,总共有三种值:
inactive:处于休息状态,要么是没开始,要么是开始后已经停止。
recording:录音中
paused:已经开始,但被暂停了,不是停止也没有被恢复。
欢迎加我微信(winty230),拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
评论