如何用JavaScript同时录制桌面音频与麦克风？耳机场景录制异常求助

核心问题分析 #

你的代码仅通过getUserMedia获取了单一音频源（大概率是麦克风），没有正确获取桌面音频流。断开耳机时，系统可能将桌面音频混入内置麦克风的采集范围，导致看似可以录制桌面音频，但这是偶然场景；连接耳机后，麦克风仅采集耳机输入，桌面音频未被纳入采集，因此无法录制。

正确实现步骤 #

要同时录制桌面音频和麦克风，需要分别获取桌面共享音频流（通过getDisplayMedia）和麦克风音频流（通过getUserMedia），再将两个流的音频轨道合并，最后用MediaRecorder录制合并后的流。

修正后的代码示例 #

let recStream;
let chunks = [];

const recFunction = async () => {
  try {
    // 1. 获取桌面音频流（需用户授权桌面共享）
    const displayStream = await navigator.mediaDevices.getDisplayMedia({
      video: false, // 不需要视频可设为false
      audio: true
    });

    // 2. 获取麦克风音频流
    const micStream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: false
    });

    // 3. 合并两个音频轨道
    const combinedStream = new MediaStream([
      ...displayStream.getAudioTracks(),
      ...micStream.getAudioTracks()
    ]);

    // 4. 初始化MediaRecorder录制合并后的流
    recStream = new MediaRecorder(combinedStream, { mimeType: 'audio/webm' }); // webm兼容性优于wav

    recStream.ondataavailable = e => {
      chunks.push(e.data);
      if (recStream.state === 'inactive') {
        const blob = new Blob(chunks, { type: 'audio/webm' });
        $('#hiddenAudio').val(URL.createObjectURL(blob));
        $('#sendButton').trigger("click");  
        document.getElementById("recordData").classList.remove("recordBoxHide");
        chunks = []; // 重置数据块
      }
    };

    recStream.onstop = () => {
      // 停止所有轨道，释放系统资源
      displayStream.getTracks().forEach(track => track.stop());
      micStream.getTracks().forEach(track => track.stop());
      chunks = [];
    };

    recStream.start();
  } catch (error) {
    console.error('录制出错:', error);
  }
};

关键注意事项 #

• 权限授权：getDisplayMedia需要用户明确同意桌面共享，浏览器会弹出确认弹窗。
• 音频格式选择：audio/wav兼容性较差，优先使用audio/webm；如需wav格式，可后续通过ffmpeg.wasm等工具转换。
• 资源释放：录制停止后必须终止所有媒体轨道，避免占用系统音频资源。

推荐的JavaScript音频录制库 #

如果觉得手动合并流繁琐，可使用封装好的库简化开发：

• RecordRTC：封装了MediaRecorder与WebRTC相关API，支持多流合并、格式转换等功能，使用门槛低。
• 原生MediaRecorder API：无需额外依赖，只要正确处理流合并，完全满足需求，适合追求轻量的场景。

内容的提问来源于stack exchange，提问作者pawan siliwal