React卡拉OKWebApp中MP4与MP3媒体文件不同步问题求助

为啥会出现不同步？ #

• 加载解码速度差：MP4（带视频）和MP3的解码、加载进度不一样，你直接连续调用pause、设时间、play，俩媒体实际开始播放的时间点可能差一截，网络加载或者设备性能差的时候更明显。
• currentTime的精度坑：浏览器对视频和音频的currentTime处理精度不一样，视频只能跳到最近的关键帧，而音频可以精确到毫秒，你硬设同一个时间，实际跳转后的位置可能不对齐。而且设置currentTime后，媒体不一定立刻完成跳转就被你play了。
• 播放速率漂移：长时间播放后，浏览器的视频时钟和音频时钟可能因为性能问题出现偏差，慢慢就错开了。
• 文件本身时间轴不对：如果你的MP4和MP3原始文件的起始时间戳就不一样，那前端再怎么同步也白搭。

怎么修复？ #

1. 等媒体跳转到指定时间后再播放 #

设置currentTime后，得等媒体触发seeked事件（表示已经完成跳转），再同时播放俩媒体，避免没准备好就启动：

function syncMedia(playerVideo, playerVocals) {
  playerVideo.pause();
  playerVocals.pause();

  const targetTime = playerVideo.currentTime;
  let readyCount = 0;

  // 等两个媒体都完成跳转再播放
  const onSeeked = () => {
    readyCount++;
    if (readyCount === 2) {
      playerVideo.play();
      playerVocals.play();
      // 用完就移除监听，防止重复触发
      playerVideo.removeEventListener('seeked', onSeeked);
      playerVocals.removeEventListener('seeked', onSeeked);
    }
  };

  playerVideo.currentTime = targetTime;
  playerVocals.currentTime = targetTime;

  playerVideo.addEventListener('seeked', onSeeked);
  playerVocals.addEventListener('seeked', onSeeked);
}

2. 用音频时钟当基准，定期校准 #

音频的播放时钟比视频稳多了，毕竟音频对时间精度要求更高。可以定期（比如每半秒）检查两者的时间差，超过阈值就把视频时间对齐到音频：

let syncTimer;

function startAutoSync(videoEl, audioEl) {
  // 每500ms检查一次
  syncTimer = setInterval(() => {
    if (!videoEl.paused && !audioEl.paused) {
      const timeGap = Math.abs(videoEl.currentTime - audioEl.currentTime);
      // 差异超过0.1秒才调整，避免频繁跳转
      if (timeGap > 0.1) {
        videoEl.currentTime = audioEl.currentTime;
      }
    }
  }, 500);
}

// 停止播放时记得清定时器
function stopAutoSync() {
  clearInterval(syncTimer);
}

3. 先把源文件对齐 #

如果是文件本身时间轴不对，用FFmpeg这样的工具重新处理一下，让俩文件的时间轴完全匹配：

# 把MP3和MP4的时间轴对齐，输出同步后的MP3
ffmpeg -i 你的视频.mp4 -i 你的原唱.mp3 -c:a copy -map 1:a -async 1 同步后的原唱.mp3

从源头上解决问题，比前端硬同步靠谱多了。

4. 别瞎截断时间 #

你之前用Math.trunc把时间砍成整数，反而会让视频因为关键帧问题跳不到准确位置，错位更严重，直接用原始的currentTime就行。

额外小技巧 #

• 给<video>和<audio>加preload="auto"属性，让媒体提前加载解码，减少播放时的延迟。
• 监听timeupdate事件，实时盯着时间差，一旦超了就同步，而不是只在初始化时弄一次。
• 能合并成一个文件就合并：把伴奏和原唱做成MP4的两个音轨，浏览器会自动同步，省得你自己折腾多文件同步。

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