如何实现页面非活跃状态下音频列表自动播放下一曲？

问题重现 #

当前顺序切歌逻辑如下：

toPlay = autoPlayOrder[(autoPlayOrder.indexOf(playing)) + 1]
play(toPlay)

• autoPlayOrder：存储待播放歌曲的列表
• playing：当前正在播放的歌曲
• play()：自定义播放歌曲的函数

页面处于活跃状态时功能正常，但切换到其他标签页后，歌曲结束无法自动播放下一曲，切回标签页才会触发播放。本质原因是浏览器对非活跃标签的JavaScript执行做了节流限制，而之前单曲循环功能通过HTML <audio> 元素的loop特性解决，就是因为原生特性不受JS节流影响。

解决方案：用Audio原生ended事件触发切歌 #

直接监听<audio>元素的ended事件，这个事件由浏览器原生触发，即使页面非活跃也能正常执行，完全避开JS节流的问题。

代码示例 #

假设你的play()函数内部是操作页面上的<audio>元素，修改逻辑如下：

// 获取页面上的audio元素
const audio = document.querySelector('audio');

// 初始化时绑定一次ended事件即可
audio.addEventListener('ended', () => {
  // 计算下一曲索引，支持循环播放（可选）
  const currentIdx = autoPlayOrder.indexOf(playing);
  const nextIdx = (currentIdx + 1) % autoPlayOrder.length;
  const nextSong = autoPlayOrder[nextIdx];
  
  // 调用自定义播放函数
  play(nextSong);
});

关键说明 #

1. 无需每次播放歌曲都重新绑定事件，初始化时绑定一次就足够，除非你动态销毁了audio元素。
2. 确保playing变量在ended事件回调中能正确获取到当前播放的歌曲，如果play()函数内部会更新这个变量，注意保持变量的可访问性。

原逻辑失效的核心原因 #

浏览器为了节省系统资源，对非活跃标签页的JS执行有严格限制：比如setTimeout/setInterval的触发间隔会被拉长到1秒以上，甚至直接暂停执行。如果原逻辑是通过定时器检测播放进度、或者依赖JS主动判断歌曲结束，就会被这个限制卡住。而<audio>的ended事件和loop属性都是浏览器底层的原生特性，不受JS执行限制的影响，所以能稳定工作。

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