如何在Safari中同步播放YouTube分离音视频（无需后端合并）

方案1：使用MediaSource Extensions (MSE) 合并音视频流 #

这是最可靠的方案，它将音视频轨道合并到同一个<video>元素中，从根源上避免了Safari对多媒体元素同时播放的限制，且原生支持音视频时间同步。

实现步骤： #

• 通过ytdl-core获取目标分辨率的视频流、对应音频流的完整格式信息（包括MIME类型、编码规范）
• 创建MediaSource对象并绑定到页面的<video>元素
• 为视频和音频分别创建SourceBuffer，严格按流的MIME类型配置
• 分段加载音视频数据并写入对应SourceBuffer，MSE会自动处理时间轴对齐

代码示例： #

const videoPlayer = document.getElementById('youtube-player');
const mediaSource = new MediaSource();
videoPlayer.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {
  // 替换为实际视频ID
  const videoInfo = await ytdl.getInfo('YOUR_VIDEO_ID');
  
  // 选择目标分辨率视频流与最高质量音频流
  const targetVideoFormat = ytdl.chooseFormat(videoInfo.formats, { quality: '1080p' });
  const targetAudioFormat = ytdl.chooseFormat(videoInfo.formats, { quality: 'highestaudio' });

  // 创建视频SourceBuffer，传入流的原始MIME类型
  const videoBuffer = mediaSource.addSourceBuffer(targetVideoFormat.mimeType);
  // 创建音频SourceBuffer
  const audioBuffer = mediaSource.addSourceBuffer(targetAudioFormat.mimeType);

  // 加载并写入视频数据
  const videoStream = ytdl.downloadFromInfo(videoInfo, { format: targetVideoFormat });
  videoStream.on('data', (chunk) => {
    if (!videoBuffer.updating) {
      videoBuffer.appendBuffer(chunk);
    }
  });

  // 加载并写入音频数据
  const audioStream = ytdl.downloadFromInfo(videoInfo, { format: targetAudioFormat });
  audioStream.on('data', (chunk) => {
    if (!audioBuffer.updating) {
      audioBuffer.appendBuffer(chunk);
    }
  });
});

方案2：使用Web Audio API控制音频同步 #

如果MSE在旧版Safari中存在兼容问题，可以用Web Audio API替代<audio>元素，通过精确的时间戳同步避免播放崩溃。

实现步骤： #

• 创建AudioContext实例，将音频流解码为AudioBuffer
• 监听视频的play、timeupdate、seeked事件，实时调整音频的播放位置
• 确保所有音频操作触发于用户交互（如点击播放按钮），符合Safari的自动播放政策

代码示例： #

const videoPlayer = document.getElementById('youtube-player');
let audioContext;
let audioBuffer;
let audioSource;

// 加载并解码音频
async function loadAudioTrack(audioUrl) {
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const res = await fetch(audioUrl);
  const arrayBuf = await res.arrayBuffer();
  audioBuffer = await audioContext.decodeAudioData(arrayBuf);
}

// 同步音视频时间，偏差超过0.1秒时重新对齐
function syncMedia() {
  const videoTime = videoPlayer.currentTime;
  if (!audioSource || Math.abs(audioContext.currentTime - videoTime) > 0.1) {
    audioSource?.stop();
    audioSource = audioContext.createBufferSource();
    audioSource.buffer = audioBuffer;
    audioSource.connect(audioContext.destination);
    audioSource.start(0, videoTime);
  }
}

// 必须绑定用户交互触发播放（示例为点击播放按钮）
document.getElementById('play-btn').addEventListener('click', async () => {
  // 替换为ytdl获取的音频URL
  if (!audioBuffer) await loadAudioTrack('YOUR_AUDIO_URL');
  // 恢复暂停的AudioContext
  if (audioContext.state === 'suspended') await audioContext.resume();
  
  videoPlayer.play();
  syncMedia();
});

// 监听视频事件保持同步
videoPlayer.addEventListener('timeupdate', syncMedia);
videoPlayer.addEventListener('seeked', syncMedia);

关键注意事项 #

• Safari自动播放限制：所有媒体加载和播放操作必须由用户主动触发（如点击按钮），不能自动执行
• 分辨率切换处理：切换分辨率时，需销毁当前的MediaSource或AudioContext，重新加载对应音视频流，避免资源泄漏
• MIME类型校验：必须使用ytdl-core返回的原始MIME类型配置SourceBuffer，否则Safari可能无法识别流

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