欢迎光临
我的个人博客网站

前端实现在浏览器网页中录音


一、整体实现的思想

  1. 页面中实现录音需要使用浏览器提供的MediaRecorder API,所以要实现页面录音就需要浏览器支持MediaStream Recording相关的功能,即浏览器能够获取浏览器的录音权限。
  2. 页面内容,需要一个记录录音开始和结束的按钮,以及一个用于播放录音的标签<audio>
  3. 然后设计具体的实现细节:首先我们进入页面需要判断浏览器是否支持该API,如果支持的话,然后再获取浏览器的录音权限,获取权限之后,我们的页面上分别由录音按钮和播放音频的标签audio,然后我们就需要设计逻辑,在点击录音按钮的时候就开始记录音频(实现这一步的前提是我们需要创建录音实例),然后实现启动录音和结束录音,录音结束之后,我们就把获取的录音实例放在audio中,当我们点击播放的时候就可以实现将录音播放出来。

二、具体细节和函数

  1. 索要录音的权限

  2. 创建录音实例
  3. 启动录音
  4. 音频数据的获取
  5. 录音的结束和音频的播放

三、详细完整代码

<!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>实现在网页上录音</title>
</head>
<body>
<div class=”app”>
<button class=”record-btn”>record</button>
<audio controls class=”audio-player” >
</audio>
<button class=”record-btn1″>record</button>
<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>

(这个代码可以直接复制粘贴使用,查看效果,然后再一步步的学习细节)

赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端实现在浏览器网页中录音
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏