<!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">录音</button>
<audio controls class="audio-player" id="cc"></audio>
</div>
<script>
if (navigator.mediaDevices.getUserMedia) {
var constraints = { audio: true };
navigator.mediaDevices.getUserMedia(constraints).then(
stream => {
console.log("授权成功！");
var recordBtn = document.querySelector(".record-btn");
var mediaRecorder = new MediaRecorder(stream);
recordBtn.onclick = () => {
mediaRecorder.start();
console.log("录音中...");
};
recordBtn.onclick = () => {
if (mediaRecorder.state === "recording") {
mediaRecorder.stop();
recordBtn.textContent = "record";
console.log("录音结束");
} else {
mediaRecorder.start();
console.log("录音中...");
recordBtn.textContent = "停止";
}
console.log("录音器状态：", mediaRecorder.state);
};
var chunks = [];
mediaRecorder.ondataavailable = function (e) {
chunks.push(e.data);
};
mediaRecorder.onstop = e => {
var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
chunks = [];
var audioURL = window.URL.createObjectURL(blob);
document.getElementById('cc').src = audioURL;
console.log(audioURL);
};
},
() => {
console.error("授权失败！");
}
);
} else {
console.error("浏览器不支持 getUserMedia");
}
</script>
</body>
</html>
