Safari中多段HTML5 MP3音频无法同步播放的问题排查

我来帮你搞定Safari里多音频不同步的问题——这个坑我之前也碰到过，核心原因是Safari对oncanplaythrough事件的触发时机和其他浏览器不一致：它经常会在音频还没完全缓冲好的时候就触发这个事件，导致你调用play()时，部分音频还得临时加载数据，自然就会慢个1-2秒。另外你之前的playAll调用方式也没考虑到Safari对音频播放的异步处理特性，咱们一步步来修复。

关键修复点 #

• 更可靠的加载完成检测：除了监听oncanplaythrough，还要检查音频的buffered范围是否覆盖了整个音频时长，确保真正完全缓冲完成。
• 用Promise跟踪每个音频的就绪状态：避免依赖单一的事件计数，而是用Promise数组来管理每个音频的加载完成，这样能更精准地判断所有音频是否真正就绪。
• 同步触发播放的优化：确保每个play()调用尽可能同步执行，并且处理Safari中音频播放的Promise特性。

修改后的完整代码 #

HTML部分 #

<a id="play" href="">PLAY TRACKS</a>
<br/><br/>

JavaScript部分 #

var tracksUrls = [
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/01-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/02-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/03-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/04-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/05-lazy-days-01-128kpbs-4min-4db.mp3",
  "https://lostmachines-nn3r.temp-dns.com/content/1-home/06-lazy-days-01-128kpbs-4min-4db.mp3"
];
let tracks = [];
let loadPromises = [];

function buildTracks() {
  tracks = [];
  loadPromises = [];
  
  tracksUrls.forEach(url => {
    const aud = new Audio();
    tracks.push(aud);
    aud.preload = "auto";
    aud.controls = true;
    
    // 创建每个音频的加载完成Promise
    const loadPromise = new Promise((resolve) => {
      function checkBuffered() {
        // 检查是否整个音频都已缓冲（留0.1秒误差避免精度问题）
        if (aud.buffered.length > 0 && aud.buffered.end(0) >= aud.duration - 0.1) {
          resolve();
        } else {
          // 继续监听缓冲变化，直到满足条件
          aud.addEventListener("progress", checkBuffered, { once: true });
        }
      }
      
      // 先监听canplaythrough，再验证缓冲状态
      aud.addEventListener("canplaythrough", () => {
        checkBuffered();
      }, { once: true });
      
      // 兜底监听loadeddata，避免canplaythrough不触发的极端情况
      aud.addEventListener("loadeddata", () => {
        checkBuffered();
      }, { once: true });
    });
    
    loadPromises.push(loadPromise);
    aud.src = url;
    document.body.appendChild(aud);
  });
  
  // 等待所有音频都真正加载完成后再播放
  Promise.all(loadPromises).then(playAll);
}

function playAll() {
  // 先重置所有音频的状态，确保从起始点开始
  tracks.forEach(aud => {
    aud.pause();
    aud.currentTime = 0;
  });
  
  // 同步触发所有音频播放，处理Safari的Promise特性
  tracks.forEach(aud => {
    aud.play().catch(err => console.error("播放失败:", err));
  });

  // 可选：如果还是有轻微延迟，用Web Audio API强制同步（注释打开即可）
  // const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  // tracks.forEach(aud => {
  //   const source = audioContext.createMediaElementSource(aud);
  //   source.connect(audioContext.destination);
  //   aud.play();
  // });
}

// 绑定播放按钮事件
document.getElementById("play").addEventListener("click", function(e) {
  e.preventDefault();
  buildTracks();
});

方案解释 #

1. 缓冲检查逻辑：通过aud.buffered.end(0) >= aud.duration - 0.1来确认音频的缓冲范围已经覆盖了几乎整个时长，这比单纯依赖oncanplaythrough更可靠，尤其是在Safari中。
2. Promise管理加载状态：用Promise.all来等待所有音频都满足缓冲条件，确保真正全部就绪后再触发播放，避免了之前计数方式的不准确性。
3. 播放前的状态重置：在播放前暂停并重置currentTime，确保所有音频都从起始点开始，避免之前可能的残留状态导致的延迟。
4. 可选的AudioContext优化：如果上述方案还存在轻微延迟，可以启用注释里的Web Audio API代码，它能在Safari中提供更精准的同步播放时机。

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