Safari（MacOS/iOS）中音频时长偶现趋近于零的异常问题

可能的触发原因 #

• Safari媒体元素复用的已知Bug：iOS和macOS的Safari在重复复用同一<audio>元素播放资源时，存在媒体元数据异常重置的问题，会导致播放后duration骤变并触发异常的pause/ended事件。
• currentTime设置时机不当：如果在音频未完成状态重置时就设置currentTime=0，会干扰Safari的媒体加载流程，触发异常状态。

可行的解决方案 #

1. 放弃复用，每次播放创建新Audio实例 #

这是最稳定的解决方式，避免复用带来的状态污染：

async playAudio(audioSrc) {
  const audio = new Audio(audioSrc);
  
  audio.addEventListener('pause', () => {
    console.log('Media paused', audio.duration);
  });

  try {
    await audio.play();
    console.log('Media is playing', audio.duration);
    // 播放结束后自动清理元素
    audio.addEventListener('ended', () => {
      audio.remove();
    });
  } catch(e) {
    console.error('Playing media failed:', e);
    if (e?.name === 'NotAllowedError') {
      ErrorHandler.playbackNotAllowed(e);
    } else {
      // 你的错误处理逻辑
    }
  }
}

2. 复用元素时强制重置并等待元数据加载 #

如果必须复用现有元素，需要完整重置状态并等待元数据就绪后再播放：

async resetAndPlay() {
  // 彻底重置元素状态
  this.mediaElement.pause();
  this.mediaElement.currentTime = 0;
  // 清空src后重新赋值，强制重新加载资源元数据
  this.mediaElement.src = '';
  this.mediaElement.src = '你的音频资源地址';

  // 等待元数据加载完成
  await new Promise(resolve => {
    this.mediaElement.addEventListener('loadedmetadata', resolve, { once: true });
  });

  try {
    await this.mediaElement.play();
    console.log('Media is playing', this.mediaElement.duration);
    this.state = Playable.state.PLAYING;
  } catch(e) {
    console.error('Playing media failed:', e);
    if (e?.name === 'NotAllowedError') {
      ErrorHandler.playbackNotAllowed(e);
      this.state = Playable.state.PAUSED;
      return;
    } else {
      this._fail(e);
      this._fakePlay();
    }
  }
}

3. 播放前校验元数据有效性 #

在调用play()前，确保duration已正确加载，避免元数据未就绪时触发播放：

async play() {
  // 检查元数据是否已加载完成
  if (isNaN(this.mediaElement.duration) || this.mediaElement.duration < 0.1) {
    await new Promise(resolve => {
      this.mediaElement.addEventListener('loadedmetadata', resolve, { once: true });
    });
  }

  try {
    await this.mediaElement.play();
    console.log('Media is playing', this.mediaElement.duration);
    this.state = Playable.state.PLAYING;
  } catch(e) {
    console.error('Playing media failed:', e);
    // 你的错误处理逻辑
  }
}

说明 #

该问题属于Safari浏览器特有的已知行为，尤其是在重复复用媒体元素的场景下容易触发。上述方案中，创建新Audio实例的方法稳定性最高，推荐优先采用；如果必须复用元素，通过强制重置并等待元数据加载的方式也能有效规避问题。

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