设置MediaRecorder定时5秒录音却仅录4秒的原因解析

代码片段 #

const startAudioBtn = document.getElementById("startAudioBtn");
const audio = document.getElementById("previewAudio");
let stream;
let recorder;
let audioFile;
let controlTimer = null;
const init = async () => {
  stream = await navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true,
  });
  audio.srcObject = stream;
  audio.play();
};
init();
const handleStart = (event) => {
  startAudioBtn.removeEventListener("click", handleStart);
  startAudioBtn.addEventListener("click", handleStop);
  startAudioBtn.innerText = "Stop Recording";
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (event) => {
    audioFile = URL.createObjectURL(event.data);
    audio.srcObject = null;
    audio.src = audioFile;
    audio.loop = true;
    audio.play();
  };
  recorder.start();
  controlTimer = setTimeout(() => {
    handleStop();
  }, 5000);
};
const handleStop = (event) => {
  startAudioBtn.removeEventListener("click", handleStop);
  startAudioBtn.addEventListener("click", handleDownload);
  startAudioBtn.innerText = "Download Recording";
  if (controlTimer) {
    clearTimeout(controlTimer);
    controlTimer = null;
  }
  recorder.stop();
};
const handleDownload = (event) => {
  const a = document.createElement("a");
  a.href = audioFile;
  a.download = "My Audio.webm";
  document.body.appendChild(a);
  a.click();
};
startAudioBtn.addEventListener("click", handleStart);

问题原因 #

出现这个问题的核心是浏览器音频录制的延迟特性与setTimeout的非精确执行共同作用的结果：

• MediaRecorder的初始化与收尾延迟：调用recorder.start()后，浏览器需要完成音频编码器初始化、缓冲区建立等操作，这段时间的音频不会立刻写入文件；调用recorder.stop()时，编码器还要把缓冲区剩余数据写入文件，这两步都有延迟。5000ms的定时器刚好被这些延迟吃掉了1秒左右，导致最终有效录制时长只剩4秒。
• setTimeout的执行偏差：setTimeout的回调不是严格按时执行的，会受浏览器事件循环影响。如果主线程有其他任务，回调会被推迟。5000ms的设定卡在了延迟临界点，进一步压缩了有效录制时间；改成6000ms后，额外的1秒抵消了这些延迟，让有效录制时长达到预期的5秒。
• WebM格式编码器特性：你输出的WebM格式音频编码器存在“预热”时间，这段时间的音频数据可能不会完整保留。当总录制时长较短时，预热时间的占比更明显，导致最终可播放的音频时长缩短。

解决方案 #

如果需要精确控制录制时长，可以尝试这些方法：

• 增加缓冲时间：设置定时器时额外加200-500ms缓冲，比如设为5500ms，抵消初始化和收尾的延迟。
• 实时监控录制时长：在recorder.start()后用setInterval实时计算已录制时长，达到目标时长再调用stop()，避免依赖setTimeout的非精确执行。
• 利用音频流时间戳：结合音频流的时间戳来精确判断录制时长，替代定时器的粗略控制。

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