MediaRecorder API 无法捕获网页背景音乐，因其仅支持用户设备输入源（如麦克风或屏幕共享音频），受浏览器安全模型限制以防窃听；替代方案包括提取音频资源URL或通过麦克风外录混合音。
MediaRecorder API 无法捕获网页背景音乐（如页面中 <audio> 或 <video> 播放的音频、Web Audio API 合成的音频、或系统其他应用的声音），它只支持录制来自用户设备输入源的媒体流，例如麦克风（getUserMedia({ audio: true })）或屏幕共享时的系统音频（仅部分浏览器在 getDisplayMedia 中支持 audio: true，且需用户主动选择“整个屏幕”或“窗口”并勾选音频，不适用于后台音乐）。
为什么不能录背景音乐
这是由浏览器安全模型决定的——防止网页未经许可窃听用户正在收听的内容。即使你用 AudioContext 播放一首 MP3，MediaRecorder 也无法“监听”这个输出流。Web Audio API 提供了 MediaStreamAudioDestinationNode，可将音频图导出为 MediaStream，但该流仍属于“合成输出”，MediaRecorder 默认不支持录制该类输出流（Chrome 等主流浏览器会报错 InvalidStateError 或静音）。
可行的替代方案
若目标是保存网页播放的音频（如背景BGM、在线电台、语音课件），应直接获取其原始音频资源 URL：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 检查页面源码或开发者工具 Network 面板，查找
.mp3、.m4a、.ogg等请求，右键复制链接地址 - 若音频通过 JavaScript 动态加载，可在控制台执行
document.querySelector('audio').src或遍历audio元素获取地址 - 对 CORS 受限资源，可用服务端代理下载（前端发起请求到自己后端，由后端 fetch 并返回文件）
如果坚持用 MediaRecorder 录制人声+背景音混合效果
前提是用户允许麦克风，并且背景音乐是外放播放（即真实声波被麦克风拾取）：
立即学习“前端免费学习笔记（深入）”；
- 调用
navigator.mediaDevices.getUserMedia({ audio: true })获取麦克风流 - 确保系统音量和麦克风增益设置合理，避免削波失真
- 使用
MediaRecorder录制，格式只能设为audio/webm或audio/wav；浏览器原生不支持直接输出 MP3（type: 'audio/mp3'会被忽略或导致失败） - 如需 MP3，必须在前端用 JS 库（如 lamejs）转码，或上传 Blob 到服务端转换
高质量音频的关键控制点
即便只录麦克风，也可提升质量：
- 请求高采样率：在
getUserMedia中添加约束{ audio: { sampleRate: 48000 } }（兼容性需检测） - 关闭自动增益控制（AGC）和回声消除（AEC）：
{ audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false } } - 录制后导出为 WAV（无损），再用专业工具转 MP3（如 LAME 320kbps VBR）比前端实时编码更保真
