iOS 15系统下HTML5音频播放列表锁屏连续播放失效问题咨询

iOS 15对Safari浏览器的后台媒体播放策略做了调整，原有的在ended事件中替换src属性触发下一曲播放的方案无法通过系统的后台播放权限校验，导致曲目播放中断，以下是经过验证的可行修复方案：

• 采用音频实例池预加载机制
  不要在当前音频的ended事件中动态替换src，提前创建2-3个Audio实例组成实例池，预加载后续待播放的曲目。在当前曲目触发timeupdate事件、检测到剩余播放时长小于1s时，提前将下一曲对应的Audio实例的preload属性设置为auto完成缓冲，ended事件触发时直接调用预加载完成的音频实例的play()方法即可。所有音频实例需要提前设置playsInline = true、webkitAudioSessionMode = 'playback'属性，适配iOS媒体播放规则。

• 适配MediaSession API
  iOS 15开始要求后台连续播放的音频必须注册MediaSession信息才能获得完整的后台权限，即使不需要使用系统锁屏控制切歌功能，也需要完成注册：

  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: '当前曲目名称',
      artist: '艺术家',
      album: '专辑名称'
    })
    // 注册基础控制事件，无对应逻辑可留空实现
    navigator.mediaSession.setActionHandler('nexttrack', () => { /* 切下一曲逻辑 */ })
    navigator.mediaSession.setActionHandler('previoustrack', () => { /* 切上一曲逻辑 */ })
    navigator.mediaSession.setActionHandler('play', () => { audio.play() })
    navigator.mediaSession.setActionHandler('pause', () => { audio.pause() })
  }
  

  切换曲目时同步更新mediaSession.metadata的内容即可。

• 补充触发逻辑兜底
  锁屏场景下iOS 15的Safari可能会优先触发pause事件、延迟甚至不触发ended事件，可以新增对pause事件的监听，判断如果触发pause时当前曲目播放进度已超过99%，且没有用户主动触发暂停的操作标记，就主动执行切下一曲的逻辑，避免播放中断。

注意事项：首次播放音频必须由用户主动交互（如点击播放按钮）触发，不能在页面加载时自动调用播放逻辑，否则会被Safari判定为非法播放，直接收回后台播放权限。

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