本文详解如何在 web 环境中通过 web audio api 与 mediastream 融合技术，**同步捕获桌面音频（如播放的视频、音乐）和麦克风输入**，解决耳机电流干扰导致桌面音频丢失的常见问题，并提供可落地的 recordrtc + audiocontext 实现方案。
在现代浏览器中，navigator.mediaDevices.getUserMedia({ audio: true }) 仅能获取麦克风权限，无法直接采集桌面音频（即“系统声音”）。这是由浏览器安全模型严格限制的：出于隐私保护，Web 页面默认无权监听或录制用户正在播放的其他应用/标签页的音频流。因此，你遇到的“插耳机时桌面音频消失、拔掉后反而能录到”现象，本质上是误判——实际并非录到了桌面声，而是麦克风偶然拾取了扬声器外放的泄漏音（即“回声”），而耳机阻断了这一泄漏路径，导致“录音变空”。
✅ 正确解法：必须分离并显式获取两类音频源，再用 Web Audio API 混音合成：
- 麦克风音频：通过 getUserMedia({ audio: true }) 获取；
- 桌面音频：需用户主动选择——调用 navigator.mediaDevices.getDisplayMedia()（用于录屏+系统音）或（更推荐）使用 chrome.desktopCapture（仅 Chromium 扩展）、或依赖操作系统级支持（如 Windows 10+/macOS 12+ 的「虚拟音频设备」配合第三方工具）。但注意：纯前端网页无法绕过用户授权直接获取系统音频。
⚠️ 关键前提：目前标准 Web API 尚不支持直接捕获非当前标签页的桌面音频。若你的场景是录制「当前页面内
✅ 推荐方案：混音录制（麦克风 + 页面媒体元素音频）
async function startDualAudioRecording() {
try {
// 1. 获取麦克风流
const micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
// 2. 创建 AudioContext 并混音
const ac = new (window.AudioContext || window.webkitAudioContext)();
// 3. 创建目标输出流（用于录制）
const dest = ac.createMediaStreamDestination();
// 4. 将麦克风接入混音总线
const micSource = ac.createMediaStreamSource(micStream);
micSource.connect(dest);
// 5. 若需录制页面内 <audio>/<video>，需显式连接其 playback
const mediaElement = document.getElementById('myVideo'); // 替换为你的媒体元素
if (mediaElement && 'captureStream' in mediaElement) {
const mediaStream = mediaElement.captureStream(); // Chrome/Firefox 支持
const mediaSource = ac.createMediaStreamSource(mediaStream);
mediaSource.connect(dest); // 混入麦克风流
}
// 6. 使用 RecordRTC 录制混音后的流（推荐替代原生 MediaRecorder）
const recorder = new RecordRTC(dest.stream, {
type: 'audio',
mimeType: 'audio/wav',
recorderType: StereoAudioRecorder,
numberOfAudioChannels: 2,
timeSlice: 2000,
ondataavailable: (blob) => {
const url = URL.createObjectURL(blob);
console.log('录音分片生成:', url);
// 上传、拼接或保存 blob
}
});
recorder.startRecording();
return recorder;
} catch (err) {
console.error('录音初始化失败:', err);
alert('请允许麦克风权限，并确保浏览器支持 captureStream');
}
}⚠️ 注意事项与限制
- mediaElement.captureStream() 是目前最兼容的页面内媒体捕获方式（Chrome 71+、Firefox 69+），但不捕获系统全局音频（如 QQ 音乐、网易云）；
- 若需真正录制系统级桌面音频（含所有应用声音），必须借助浏览器扩展（如 Chrome Extension + desktopCapture API）或桌面客户端桥接（Electron + node-audiorecorder）；
- RecordRTC 并非万能：它本质是对 MediaRecorder 的封装增强，仍受限于底层流可用性；务必检查 dest.stream.getAudioTracks().length > 0；
- 耳机问题根源：部分设备驱动将“立体声混音”设为禁用，或系统音频路由策略导致 getDisplayMedia() 在耳机模式下返回空轨道——建议在 getDisplayMedia({ audio: true }) 后显式检测轨道有效性：
const screenStream = await navigator.mediaDevices.getDisplayMedia({ audio: true }); if (!screenStream.getAudioTracks().length) { throw new Error('未检测到系统音频轨道，请检查系统音频设置或更换设备'); }
✅ 总结
纯前端 JavaScript 无法突破浏览器沙箱直接录制任意系统音频，但可通过 captureStream() + AudioContext 混音实现「页面内媒体 + 麦克风」的高质量同步录制。对于全系统音频需求，应转向浏览器扩展或混合架构方案。始终优先验证流轨道有效性，并使用 RecordRTC 提升编码稳定性与格式兼容性。
立即学习“Java免费学习笔记（深入）”；
