本文详解 WebRTC 中 MediaRecorder 的生命周期管理，指出复用已停止的实例会导致录音失效，并提供“销毁重建”这一简洁可靠的解决方案，附可直接运行的优化代码。
本文详解 webrtc 中 `mediarecorder` 的生命周期管理，指出复用已停止的实例会导致录音失效，并提供“销毁重建”这一简洁可靠的解决方案，附可直接运行的优化代码。
在 WebRTC 音频录制场景中（如语音聊天机器人），一个常见误区是试图反复调用 mediaRecorder.start() / stop() 来控制录音启停——但一旦调用了 mediaRecorder.stop()，该实例即进入 inactive 状态，不可再次启动（调用 start() 会抛出 InvalidStateError）。更关键的是，仅调用 mediaRecorder.stop() 并不会自动关闭底层媒体流（MediaStream），因此浏览器地址栏/标签页仍显示红色录音指示器，用户感知上“仍在录音”。
根本原因在于：MediaRecorder 是一次性使用的对象，其设计并非为反复启停而存在。官方规范明确要求：每次新录制必须创建全新的 MediaRecorder 实例，并关联新的或已激活的 MediaStream。
✅ 正确做法是：
- 停止录制时，不仅调用 mediaRecorder.stop()，还要显式将 mediaRecorder 置为 null；
- 下次点击录音按钮时，不再尝试复用旧实例，而是重新请求麦克风权限（或复用已有流）、新建 MediaRecorder；
- 同时，为避免重复申请权限或资源泄漏，建议对 MediaStream 进行统一管理（如缓存并手动停止）。
以下是重构后的完整实现（含关键注释与健壮性处理）：
let mediaRecorder = null;
let recordedChunks = [];
let audioStream = null; // 缓存 MediaStream，避免频繁 getUserMedia
let isRecording = false;
// ✅ 安全释放流资源（在页面卸载或显式关闭时调用）
function stopAudioStream() {
if (audioStream) {
audioStream.getTracks().forEach(track => track.stop());
audioStream = null;
}
}
// ✅ 初始化并启动录制（每次点击“开始”都走此流程）
async function startRecording() {
try {
// 若无活跃流，则获取新流；若有，则复用（节省权限提示）
if (!audioStream) {
audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
}
// 每次都创建全新 MediaRecorder 实例
mediaRecorder = new MediaRecorder(audioStream);
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) recordedChunks.push(e.data);
};
mediaRecorder.onstop = () => {
const audioBlob = new Blob(recordedChunks, { type: 'audio/webm' }); // 推荐 webm 而非 wav（原生支持、体积小）
const audioSize = audioBlob.size;
recordedChunks = [];
// 渲染消息（示例）
const messageItem = document.createElement('li');
messageItem.classList.add('message', 'sent');
messageItem.innerHTML = `
<div class="message-text">
<div class="message-sender"><b>You</b></div>
<div class="message-content">Audio size: ${audioSize} bytes</div>
</div>`;
messagesList.appendChild(messageItem);
// ✅ 关键：置空引用，确保下次新建实例
mediaRecorder = null;
};
mediaRecorder.start();
isRecording = true;
console.log('Recording started');
} catch (err) {
console.error('Failed to start recording:', err);
alert('无法访问麦克风，请检查权限设置');
}
}
// ✅ 停止当前录制（不销毁流，以便后续快速复用）
function stopRecording() {
if (mediaRecorder && mediaRecorder.state === 'recording') {
mediaRecorder.stop(); // 触发 onstop 回调
isRecording = false;
}
}
// 绑定按钮事件
const recordButton = document.querySelector('.btn-record');
recordButton.addEventListener('click', () => {
if (!isRecording) {
startRecording();
} else {
stopRecording();
}
});
// 页面卸载前清理资源（防止后台持续录音）
window.addEventListener('beforeunload', stopAudioStream);
⚠️ 注意事项：
- 不要在 onstop 中调用 stream.getTracks().forEach(track => track.stop()) —— 这会彻底关闭流，导致下次 startRecording() 必须重新请求权限（用户体验差）；仅当用户明确“退出语音功能”时才应停止流。
- MediaRecorder 输出格式推荐 'audio/webm' 或 'audio/mp4'（需服务端支持），而非 'audio/wav'（浏览器不原生生成 WAV，需额外编码库）。
- 若需更高控制粒度（如实时音频分析），可结合 AudioContext + MediaStreamAudioSourceNode，但本场景 MediaRecorder 已足够。
总结：WebRTC 录音不是“开关”，而是“一次一录”。遵循“新建 → 启动 → 停止 → 丢弃”模式，逻辑清晰、兼容性强、无隐藏状态，是构建稳定语音交互功能的基石。
