移动端浏览器锁屏后如何实现音频列表连续播放不中断？

一、有没有专门允许锁屏后脚本持续执行的权限接口？ #

没有这类专门的接口。移动端浏览器锁屏后限制JS执行是系统级的省电策略，浏览器没有开放类似“后台脚本持续运行”的权限——这类权限会大幅增加电量消耗，不符合移动端的设计原则。

二、可行的替代解决方案 #

1. 利用Media Session API绑定系统媒体控制

把你的音频播放和系统媒体会话绑定后，浏览器会将音频播放视为“活跃媒体任务”，锁屏后不会轻易暂停媒体相关的事件处理，ended事件能更稳定地触发，从而完成自动切歌。

实现步骤：

• 初始化音频元素后，设置Media Session的元数据（让系统识别当前播放的媒体）
• 监听音频的ended事件，切换下一曲时更新Media Session信息

示例代码：

const audio = document.getElementById('audio-player');
let playlist = ['audio1.mp3', 'audio2.mp3', 'audio3.mp3'];
let currentIndex = 0;

// 设置初始媒体会话
function updateMediaSession() {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: `曲目${currentIndex + 1}`,
      artist: '你的播放器名称',
    });
    // 可选：绑定系统媒体控制按钮（上一曲/下一曲）
    navigator.mediaSession.setActionHandler('nexttrack', playNext);
    navigator.mediaSession.setActionHandler('previoustrack', playPrevious);
  }
}

function playNext() {
  if (currentIndex < playlist.length - 1) {
    currentIndex++;
    audio.src = playlist[currentIndex];
    audio.play();
    updateMediaSession();
  }
}

// 监听ended事件自动切歌
audio.addEventListener('ended', playNext);

// 首次播放需要用户交互触发（移动端浏览器要求）
document.getElementById('play-btn').addEventListener('click', () => {
  audio.src = playlist[currentIndex];
  audio.play();
  updateMediaSession();
});

2. 使用Web Audio API（AudioContext）代替原生audio元素

Web Audio API的音频处理上下文在活跃状态下，浏览器会给予更高的后台运行优先级，相比普通<audio>元素，锁屏后更不容易被暂停JS事件循环。

注意：AudioContext需要通过用户交互（比如点击）激活，不能自动初始化。

示例代码：

let audioContext;
let playlist = ['audio1.mp3', 'audio2.mp3', 'audio3.mp3'];
let currentIndex = 0;

// 用户交互激活AudioContext
document.getElementById('play-btn').addEventListener('click', async () => {
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
  }
  await loadAndPlayAudio(playlist[currentIndex]);
});

async function loadAndPlayAudio(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  
  // 播放结束后自动加载下一曲
  source.onended = () => {
    if (currentIndex < playlist.length - 1) {
      currentIndex++;
      loadAndPlayAudio(playlist[currentIndex]);
    }
  };
  
  source.start();
}

3. 关于Web Worker的补充

Web Worker确实无法直接播放音频（没有DOM访问权限，也不能创建AudioContext），而且锁屏后同样会被浏览器的省电机制限制执行，所以这个方案不可行。

额外注意事项 #

• 所有自动播放逻辑必须由用户交互触发（比如点击播放按钮），这是移动端浏览器的强制安全策略，否则音频无法播放。
• 部分安卓厂商的浏览器可能有更严格的后台限制，建议在主流浏览器（Chrome、Safari）上测试验证。

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