以下demo仅供参考 具体备注在代码中可以看到
注意： 想要获取音频权限 必须要在https环境下运行。 可以使用内网穿透等工具达到https的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页录音示例</title>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole 默认会挂载到 `window.VConsole` 上
var vConsole = new window.VConsole();
// 接下来即可照常使用 `console` 等方法
console.log('Hello world');
// 结束调试后，可移除掉
// vConsole.destroy();
</script>
</head>
<body>
<button id="startRecord">开始录音</button>
<button id="stopRecord" disabled>停止录音并保存</button>
<audio controls id="player"></audio>
<script>
const startButton = document.getElementById('startRecord');// 开始录音
const stopButton = document.getElementById('stopRecord');// 停止录音
const player = document.getElementById('player');// 播放
let mediaStream;// 音频流
let recorder;// 录音器
// 获取用户媒体设备（麦克风）
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
mediaStream = stream;
startButton.disabled = false;
console.log('成功获取音频输入源')
})
.catch(err => {
console.log('无法获取音频输入源', err);
});
// 开始录音
let chunks = [];
startButton.addEventListener('click', () => {
// 获取音频流
recorder = new MediaRecorder(mediaStream);
// 处理音频数据
recorder.ondataavailable = (event) => {
if (event.data.size > 0) {
chunks.push(event.data);
}
};
// 完成录音
recorder.start();
// 停止录音
stopButton.disabled = false;
startButton.disabled = true;
console.log('开始录音...');
});
// 停止录音并生成文件
stopButton.addEventListener('click', () => {
// 停止录音
recorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
recorder.onstop = () => {
console.log('录音已停止');
// 音频类型 ogg webm mp3
const blob = new Blob(chunks, { type: 'audio/mp3; codecs=opus' });
// 将录音设置为可播放
const url = URL.createObjectURL(blob);
player.src = url;
console.log('尝试播放录音');
};
});
</script>
</body>
</html>