HTML5中MediaRecorder不支持直接混合多路音频，需通过Web Audio API先混音再录制：获取麦克风流和背景音乐流，用AudioContext混音生成新MediaStream，再交由MediaRecorder录制。
HTML5 中的 MediaRecorder 本身不支持直接混合多路音频（如麦克风 + 背景音乐），它只能录制单一 MediaStream。要实现“麦克风输入与背景音乐混合录制”，核心思路是：**先在 Web Audio API 中完成实时混音，再将混音后的音频流交给 MediaRecorder 录制**。
1. 获取并准备两路音频源
你需要分别获取麦克风流和背景音乐流，并确保它们具有兼容的采样率和声道数（通常为立体声、44.1kHz 或 48kHz）：
- 用
navigator.mediaDevices.getUserMedia({audio: true})获取麦克风流 - 用
new Audio('bgm.mp3')加载背景音乐，再通过AudioContext.createMediaElementSource()转为可处理的音频节点 - 注意：背景音乐需满足跨域策略（建议同源或设置
crossorigin属性），且需用户手势触发播放（如点击按钮后调用audio.play()）
2. 使用 Web Audio API 混音（关键步骤）
创建 AudioContext，将麦克风流和背景音乐流接入同一上下文，并用 GainNode 控制音量平衡，最后用 MediaStreamAudioDestinationNode 输出为可录制的 MediaStream：
- 用
audioContext.createMediaStreamSource(micStream)将麦克风转为音频源节点 - 用
audioContext.createMediaElementSource(audioElement)接入背景音乐 - 将两者连接到同一个
GainNode（或分别调节后合并到ChannelMergerNode） - 将混音输出连接到
audioContext.createMediaStreamDestination().stream—— 这个 stream 就是“麦克风+背景音乐”的混合流
3. 用 MediaRecorder 录制混合流
将上一步得到的 MediaStream 传给 MediaRecorder 即可录制混合音频：
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器是否支持：
MediaRecorder.isTypeSupported('audio/webm; codecs=opus')（推荐 Opus 编码） - 初始化：
const recorder = new MediaRecorder(mixedStream, { mimeType: 'audio/webm; codecs=opus' }) - 监听
dataavailable事件收集Blob，拼接后生成可下载的音频文件 - 注意：
MediaRecorder只录制音频轨道，无需视频；若混音流含视频轨道，需提前用stream.getVideoTracks().forEach(t => t.stop())移除
4. 注意事项与常见问题
实际开发中容易踩坑，需特别留意：
-
权限与自动播放限制：麦克风需用户授权；背景音乐必须由用户手势触发播放，否则
createMediaElementSource会失败或无声 - 延迟与同步：Web Audio 混音有轻微延迟（通常 audioContext.currentTime 手动对齐起始时间
-
内存与性能：长时间混音+录制可能增加内存压力，建议录制前调用
recorder.start()，结束后及时stop()并释放AudioContext -
移动端兼容性：部分 Android 浏览器对
MediaStreamAudioDestinationNode支持不完整，建议降级测试（如仅录麦克风）或使用 standardized-audio-context 库增强兼容性
