<button type="button" id="start-btn">开始录音</button>
<button type="button" id="stop-btn">停止录音</button>
<button type="button" id="play-btn">播放录音</button>
const startBtn = document.querySelector("#start-btn"); // 开始录音按钮
const stopBtn = document.querySelector("#stop-btn"); // 停止录音按钮
const playBtn = document.querySelector("#play-btn"); // 播放录音按钮
let mediaRecorder = null; // 存放 MediaRecorder
let audioData = []; // 存储录音数据块
// 开始录音按钮点击
startBtn.addEventListener("click", () => {
// 请求麦克风权限
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
// 创建媒体记录
mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
// 开始录制
mediaRecorder.start();
// 处理音频数据
mediaRecorder.addEventListener("dataavailable", (ev) => {
// 把数据块添加到数组
audioData.push(ev.data);
});
// 录音停止
mediaRecorder.addEventListener("stop", () => {
// 把音频数据块转换为 Blob
audioData = new Blob(audioData);
});
})
.catch((info) => {
alert("无法获取麦克风权限!错误信息:" + info);
});
});
// 停止录音按钮点击
stopBtn.addEventListener("click", () => {
mediaRecorder.stop();
});
// 播放录音按钮点击
playBtn.addEventListener("click", () => {
if (audioData === null) return false;
// 创建一个 URL 资源对象给 Audio 读取
const audio = new Audio(URL.createObjectURL(audioData));
// 播放音频
audio.play();
});