核心问题 #

你的代码使用了navigator.mediaDevices.getUserMedia({ audio: true })，这个API的作用是捕获用户输入设备的媒体流，默认目标就是麦克风，所以自然录到的是麦克风声音，而非扬声器输出的系统音频。

修正方案 #

要录制扬声器的系统音频，需要使用navigator.mediaDevices.getDisplayMedia()，这个API支持捕获桌面或应用的音频流（部分浏览器需要同时请求视频，可后续手动移除视频轨道）。

修正后的代码示例 #

let audioChunks: Blob[] = [];
navigator.mediaDevices.getDisplayMedia({ 
  audio: true, 
  video: false // 部分浏览器不支持单独请求音频，可设为true后移除视频轨道
})
.then(stream => {
  // 若浏览器强制返回视频轨道，移除它
  const videoTrack = stream.getVideoTracks()[0];
  if (videoTrack) {
    stream.removeTrack(videoTrack);
  }

  audioChunks = [];
  const rec = new MediaRecorder(stream);

  rec.ondataavailable = (e) => {
    audioChunks.push(e.data);
    if (rec.state === "inactive") {
      // 注意格式匹配：MediaRecorder默认格式多为audio/webm，文件名对应.webm
      const blob = new Blob(audioChunks, { type: rec.mimeType });
      downloadFile(blob, "system-audio.webm");
    }
  };

  rec.start();

  setTimeout(() => {
    rec.stop();
    // 录制结束后释放媒体流
    stream.getTracks().forEach(track => track.stop());
  }, 10000);
})
.catch(e => console.error("捕获音频失败:", e));

额外注意事项 #

• 浏览器兼容性：getDisplayMedia的音频捕获功能需要较新版本的浏览器支持，Chrome等浏览器会在弹窗中提供“共享系统音频”的勾选框，用户必须手动勾选才能捕获扬声器输出。
• 格式匹配：避免代码中Blob类型与文件名后缀不匹配的问题（比如之前的audio/x-mpeg-3对应.wav是错误的），建议直接使用MediaRecorder的默认MIME类型。
• 权限与环境：用户必须授权媒体捕获权限，除本地localhost外，多数浏览器要求在HTTPS环境下使用该API。

内容的提问来源于stack exchange，提问作者Praveen saxena