音频加载与播放暂停问题：浏览器兼容及Object URL管理

问题1：Firefox暂停音频后恢复播放延迟 #

问题详情 #

仅通过本地服务器加载音频，用Object URL实现完整预加载（已通过audio.buffered.start(0)和audio.buffered.end(0)验证文件完全加载）。Chrome系浏览器暂停后恢复播放毫无延迟，但Firefox里暂停超过1分钟再播放时，计时器正常运行，声音却要等5秒才出来；不过Firefox窗口休眠整夜后恢复播放又能立刻开始，说明是会话期间的浏览器内存管理导致的，并非代码问题。

原因与解决办法 #

这是Firefox的内存优化机制在起作用——当音频暂停约1分钟后，Firefox会把已缓冲的音频数据从活跃内存转移到磁盘缓存，甚至释放部分解码资源来节省内存。恢复播放时需要重新读取磁盘缓存、初始化解码管线，因此产生了延迟。而窗口休眠后恢复时，系统内存管理可能未释放这些资源，所以能立即播放。

解决思路：

• “提醒”Firefox保留资源：每隔30秒左右读取一次audio.currentTime（仅读取，无需播放），让浏览器认为音频仍在被使用，避免将缓冲移到磁盘；
• 调整浏览器设置：在Firefox的about:config中调大media.cache.size或media.memory_cache_max_size，提升内存缓存上限，但这属于用户端设置，无法通过代码控制；
• 手动维护Blob：将音频Blob保留在内存中（注意控制内存占用），若检测到暂停超过1分钟，重新生成Object URL并绑定到audio元素，同时同步好播放状态。

问题2：Object URL撤销时机的跨浏览器兼容 #

问题详情 #

Firefox中在oncanplaythrough事件触发后撤销Object URL，音频仍能正常播放；但Chrome中这么做会立即报错，音频只能播放已缓冲的部分内容。需要找到合理的撤销时机避免内存泄漏，目前尝试用emptied事件处理，但存在赋值时机问题：若在canplaythrough/canplay事件外为player.objectURL赋值新的Object URL，会在emptied事件触发前更新值，导致误删当前在用的Object URL——哪怕设置audio.src后立即赋值也不行，可能需要用setTimeout(..,0)解决。

解决办法 #

最优方案：emptied事件 + 正确的Object URL赋值时机

emptied事件会在音频元素的源被清空（如设置新src、调用load()、元素被销毁）时触发，此时浏览器已不再需要原Object URL对应的资源，是安全的撤销时机。但需严格管理player.objectURL的赋值时机：

1. 延迟赋值Object URL：设置audio.src = objectURL后，用setTimeout延迟赋值player.objectURL，确保emptied事件触发时该变量仍指向当前有效的Object URL：

then( result => {
  let objectURL = URL.createObjectURL( result ),
      a = main.audio;
  a.oncanplaythrough = () => {
     a.oncanplaythrough = null;
     a.play()
     .then( () => {
       console.log( "音频开始播放" );
       player.classList.add("playing");
     })
    .catch( err => console.log(err));
  };
  a.src = objectURL;
  // 延迟赋值，避免覆盖当前待监听的Object URL
  setTimeout(() => {
    player.objectURL = objectURL;
  }, 0);
})

2. 完善emptied事件处理逻辑：添加校验，确保要撤销的Object URL已不再是音频元素当前使用的资源：

element.addEventListener( 'emptied',
  (evt) => {
    if ( player.objectURL ) {
      // 确认音频元素的src已与该Object URL解绑后再撤销
      if (evt.target.src !== player.objectURL) {
        URL.revokeObjectURL( player.objectURL );
        player.objectURL = null;
        console.log("通过emptied事件撤销音频Object URL");
      }
    }
  },
  false // 无需开启useCapture，冒泡阶段处理即可
);

3. 额外场景兜底处理：
   • 音频切换时：设置新src前，手动撤销旧的Object URL；
   • 页面卸载时：监听beforeunload事件，统一撤销所有未释放的Object URL；
   • 禁止过早撤销：绝对不要在canplaythrough或play事件中立即撤销Object URL，Chrome需要保留该URL直到音频彻底无需访问Blob内容。

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