mediarecorder api 无法捕获网页背景音乐，因其仅支持用户设备输入源（如麦克风或屏幕共享音频），受浏览器安全模型限制以防窃听；替代方案包括提取音频资源url或通过麦克风外录混合音。
MediaRecorder API 无法捕获网页背景音乐（如页面中
为什么不能录背景音乐
这是由浏览器安全模型决定的——防止网页未经许可窃听用户正在收听的内容。即使你用 AudioContext 播放一首 MP3，MediaRecorder 也无法“监听”这个输出流。Web Audio API 提供了 MediaStreamAudioDestinationNode，可将音频图导出为 MediaStream，但该流仍属于“合成输出”，MediaRecorder 默认不支持录制该类输出流（Chrome 等主流浏览器会报错 InvalidStateError 或静音）。
可行的替代方案
若目标是保存网页播放的音频（如背景BGM、在线电台、语音课件），应直接获取其原始音频资源 URL：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 检查页面源码或开发者工具 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）比前端实时编码更保真
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
