Chrome修改audio的currentTime后调用play()无法播放音频如何解决

这个现象是Chrome浏览器对HTMLMediaElement.play()Promise调度逻辑的边缘实现差异导致的，不属于代码逻辑错误：

• Chrome对媒体播放请求采用队列调度机制：play()调用发起后，请求会进入媒体元素的执行队列等待状态就绪后落地。如果在请求落定前同步调用pause()、修改currentTime触发媒体状态重置，新发起的play()请求会因为媒体状态短暂不一致进入永久pending状态，直到下一次显式调用pause()才会将挂起的Promise以AbortError拒绝，报错内容就是你看到的The play() request was interrupted by a call to pause().
• Firefox对该场景做了容错处理，会自动清理队列中被中断的旧播放请求，直接响应最新的播放调用，因此不会出现Promise挂死的问题。

以下方案都可直接复现验证解决问题：

• 方案1：等待seek操作完成后再发起播放请求
  修改currentTime属于异步seek操作，赋值后不会立刻生效，监听seeked事件确认seek完成后再调用play()，从根源避免状态切换窗口期发起请求：

  audioEl.pause();
  audioEl.currentTime = 0;
  const handleSeeked = () => {
    audioEl.removeEventListener('seeked', handleSeeked);
    // 必须加catch捕获正常的中断类错误，避免控制台抛错
    audioEl.play().catch(err => {
      if (err.name !== 'AbortError') console.error('播放异常:', err);
    });
  };
  audioEl.addEventListener('seeked', handleSeeked);
  

• 方案2：封装安全播放方法兜底挂起的Promise
  如果业务场景不方便改调用时序，可以给媒体元素加一层包装，主动清理上一次挂起的播放请求，避免Promise永久pending：

  function safePlay(mediaElement) {
    // 主动reject上一次未完成的play请求
    if (mediaElement._pendingPlayReject) {
      mediaElement._pendingPlayReject(
        new DOMException('Play interrupted by new request', 'AbortError')
      );
    }
    return new Promise((resolve, reject) => {
      mediaElement._pendingPlayReject = reject;
      mediaElement.play()
        .then(resolve)
        .catch(reject)
        .finally(() => {
          mediaElement._pendingPlayReject = null;
        });
    });
  }
  
  // 业务中直接替换原有play调用即可
  audioEl.pause();
  audioEl.currentTime = 0;
  safePlay(audioEl).catch(err => {
    // 主动中断的AbortError属于正常逻辑，直接忽略即可
    if (err.name !== 'AbortError') throw err;
  });
  

• 方案3：提前配置音频元素预加载
  给音频元素加preload="auto"属性，提前把音频资源加载到本地，可以大幅缩短seek操作的耗时，降低该边缘问题触发的概率，适合短音效类场景。

• 永远不要裸调用play()不做异常捕获：所有现代浏览器中play()都返回Promise，自动播放策略拦截、播放被中断、资源加载失败都会导致Promise reject，不捕获会在控制台抛出未捕获异常。
• 不要用固定时长的setTimeout等待seek完成：不同网络环境、不同资源大小、不同设备性能下seek耗时差异很大，监听seeked事件是唯一可靠的判定方式。
• Chrome的媒体中断规则是：只要play()返回的Promise还处于pending状态，此时调用pause()、修改src、修改currentTime触发资源重载，都会将该Promise以AbortError拒绝，你遇到的永久pending属于Chrome已知的调度逻辑bug，并非W3C规范要求的行为。
• 避免在高频事件（比如时间更新timeupdate、进度拖拽事件）里同步连续调用pause()/修改currentTime/play()组合，这类连续状态修改非常容易触发Chrome的调度bug。

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