实现思路
首先写一个立即调用函数，通过调用window.navigator.mediaDevices.getUserMedia获取用户同意权限，获取之后返回权限数据 创建MediaRecorder返回给他，做一个记录操作数据
HTML
<div id="startRecord">点我录音</div>
<div id="topRecord">结束录音</div>1.获取用户权限
//页面加载完毕后调用
const stream = await (async function () {
if (window.navigator.mediaDevices.getUserMedia) {
return await window.navigator.mediaDevices
.getUserMedia({ audio: true })
.then((mediaStream) => {
//以拥有录音权限 返回出去
return mediaStream;
})
.catch((err) => {
console.log("拒绝", err);
});
} else {
console.error("浏览器不支持 getUserMedia");
}
})();2.获取事件按钮
const recordBtn = document.querySelector("#startRecord");//点击开始
const topRecord = document.querySelector("#topRecord"); // 点击结束
const mediaStream = new MediaRecorder(stream); // 注册实例化3开始录音
recordBtn.onclick = function () {
mediaStream.start();
console.log("录音中...");
console.log(mediaStream.state);
};4.结束录音
topRecord.onclick = function () {
if (mediaStream.state === "recording") {
mediaStream.stop();
console.log("录音结束");
console.log(mediaStream.state);
}
};5.结束后调 mediaStream.ondataavailable 获取数据流生成wav文件
mediaStream.ondataavailable = function (value) {
mediaStream.onstop = function () {//点击stop结束后
let blob = new Blob([value.data], { type: "audio/ogg; codecs=opus" });
console.log("blob: ", blob);
var audioURL = URL.createObjectURL(blob);
let a = document.createElement("a"); // 创建一个a标签
a.href = audioURL;
a.download = Date.now() + ".wav"; //下载文件
a.click(); // 创建点击事件
};
};最后附上全部源码
<!DOCTYPE html>
<html>
<body>
<div>
<button id="startRecord">点我录音</button>
<button id="topRecord">点我结束录音</button>
</div>
<script>
window.onload = async function () {
// 立即执行函数 获取用户权限
const stream = await (async function () {
if (window.navigator.mediaDevices.getUserMedia) {
return await window.navigator.mediaDevices
.getUserMedia({ audio: true }) // audio开启获取录音权限
.then((mediaStream) => {
//以拥有录音权限 返回出去
return mediaStream;
})
.catch((err) => {
console.log("拒绝", err);
});
} else {
console.error("浏览器不支持 getUserMedia");
}
})();
const recordBtn = document.querySelector("#startRecord");//点击开始
const topRecord = document.querySelector("#topRecord"); // 点击结束
const mediaStream = new MediaRecorder(stream); // 注册实例化
//录音开始
recordBtn.onclick = function () {
mediaStream.start();
console.log("录音中...");
console.log(mediaStream.state);
};
// 结束录音
topRecord.onclick = function () {
if (mediaStream.state === "recording") {
mediaStream.stop();
console.log("录音结束");
console.log(mediaStream.state);
}
};
mediaStream.ondataavailable = function (value) {
mediaStream.onstop = function () {
let blob = new Blob([value.data], { type: "audio/ogg; codecs=opus" });
console.log("blob: ", blob);
var audioURL = URL.createObjectURL(blob);
let a = document.createElement("a"); // 创建一个a标签
a.href = audioURL;
a.download = Date.now() + ".wav"; //下载文件
a.click(); // 创建点击事件
};
};
};
</script>
</body>
</html>