Vue.js项目中Media Capture and Streams API录音无声音问题求助

• 检查媒体权限状态
  确保麦克风权限已成功授权，可通过代码验证：

  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  console.log(stream.getAudioTracks()[0].enabled); // 需返回true
  console.log(stream.getAudioTracks()[0].muted); // 需返回false
  

  若权限未获取，录音必然无内容，注意部分浏览器仅在HTTPS环境（localhost除外）下允许权限请求，确认弹窗已点击「允许」。

• 验证MediaRecorder MIME类型兼容性
  浏览器对音频格式的支持存在差异，先排查你指定的格式是否被当前浏览器支持：

  console.log(MediaRecorder.isTypeSupported('audio/webm;codecs=opus'));
  console.log(MediaRecorder.isTypeSupported('audio/ogg;codecs=opus'));
  console.log(MediaRecorder.isTypeSupported('audio/mp3')); // 多数浏览器不原生支持MP3
  

  优先选用浏览器支持的格式（如audio/webm;codecs=opus），避免因编码不兼容导致录音失效。

• 确认录音数据块收集逻辑
  若调用mediaRecorder.start()时传入了时间切片参数，需确保所有非空数据块都被正确收集：

  const chunks = [];
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) { // 过滤空数据块
      chunks.push(e.data);
    }
  };
  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(chunks, { type: mediaRecorder.mimeType });
    // 生成Blob URL并传递给播放器
  };
  

  生成Blob时的MIME类型必须与MediaRecorder初始化时的类型一致。

• 排查硬件与设备选择
  用系统自带录音工具或浏览器内置麦克风测试功能，确认麦克风硬件正常收音；同时检查浏览器是否选中了正确的音频输入设备（部分设备存在多个麦克风，可能误选了静音设备）。

• 验证播放器组件逻辑
  直接在浏览器控制台创建音频元素测试Blob URL，排除组件问题：

  const audio = new Audio('blob:http://localhost:5173/2214375f-956b-42cd-a4e2-0f477da0feaf');
  audio.controls = true;
  document.body.appendChild(audio);
  

  若此方式能播放声音，再检查子组件的<audio>标签是否正确绑定src、未被静音。

• 检查音频流生命周期
  确保MediaRecorder初始化后，音频流未被提前终止：

  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const mediaRecorder = new MediaRecorder(stream);
  // 录音结束前不要调用 stream.getTracks().forEach(track => track.stop());
  

  流提前停止会导致录音中断，仅生成极短或空音频文件。

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