iOS 17锁定屏幕下HTML5 JS音频播放器无法自动切歌问题

问题根源 #

iOS（包括所有基于WebKit的iPhone浏览器）为了节能，在页面进入后台后会限制JavaScript执行：

• timeupdate这类周期性事件会被暂停触发
• 依赖该事件判断音频结束的逻辑无法执行
• 即使音频自然结束，ended事件也可能因JS线程被挂起而无法正常响应

修复方案 #

1. 改用ended事件监听音频结束 #

将自动切歌逻辑从timeupdate中分离，直接绑定到音频的ended事件，避免依赖后台会被暂停的周期性事件。

2. 激活Web Audio Context确保后台播放权限 #

iOS要求媒体播放必须由用户交互触发，且后台播放需要活跃的AudioContext。在用户首次点击播放时初始化并激活AudioContext，维持后台播放的上下文。

修改后的关键代码 #

// 全局声明AudioContext，兼容不同浏览器前缀
let audioContext;

// 初始化音频上下文，需用户交互触发
function initAudioContext() {
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    // 首次播放时恢复上下文（iOS要求用户交互激活）
    if (audioContext.state === 'suspended') {
      audioContext.resume();
    }
  }
}

// 替换原有的timeupdate中的ended判断，直接绑定ended事件
var currentAudio = document.getElementById("myAudio");
currentAudio.addEventListener('ended', function() {
  document.querySelector('#icon-play').style.display = 'block';
  document.querySelector('#icon-pause').style.display = 'none';
  pauseToPlay(indexAudio);
  if (indexAudio < listAudio.length - 1) {
    var index = parseInt(indexAudio) + 1;
    loadNewTrack(index);
  }
});

// 修改toggleAudio函数，确保用户点击时激活上下文
function toggleAudio() {
  initAudioContext(); // 用户交互时激活上下文
  if (this.currentAudio.paused) {
    document.querySelector('#icon-play').style.display = 'none';
    document.querySelector('#icon-pause').style.display = 'block';
    document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
    this.playToPause(this.indexAudio);
    // 播放前确保上下文活跃
    if (audioContext.state === 'suspended') {
      audioContext.resume().then(() => {
        this.currentAudio.play();
      });
    } else {
      this.currentAudio.play();
    }
  } else {
    document.querySelector('#icon-play').style.display = 'block';
    document.querySelector('#icon-pause').style.display = 'none';
    this.pauseToPlay(this.indexAudio);
    this.currentAudio.pause();
  }
}

// 移除原timeupdate中的ended判断部分
function onTimeUpdate() {
  var t = this.currentAudio.currentTime;
  timer.innerHTML = this.getMinutes(t);
  this.setBarProgress();
  // 删掉原来的if(currentAudio.ended)判断块
}

额外注意事项 #

• 确保所有播放操作（包括切歌后的播放）都关联到用户的初始交互：iOS不允许无用户交互的自动播放，首次播放必须由用户点击触发，后续切歌可基于该上下文继续执行。
• 避免使用setInterval或setTimeout检测音频状态，这些定时器在后台会被大幅延迟或暂停。

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