移动端熄屏时保持HTML5音频正常播放的官方实现方法问询

安卓Chrome默认会将未注册系统媒体会话的页面内音频判定为临时交互内容，熄屏、页面切后台后会主动暂停释放资源。你可以通过W3C标准的Media Session API实现熄屏后正常播放音频，不需要调用Screen Wake Lock API阻止熄屏，刚好匹配音乐站点的需求。

实现步骤 #

• 第一步：确保音频初始播放由用户的点击、触摸等显式交互触发，移动端浏览器禁止非用户交互触发的媒体播放，此类播放也无法在后台保持存活。
• 第二步：配置audio基础属性

<audio id="musicPlayer" preload="metadata" playsinline>
  <source src="你的音频资源地址.mp3" type="audio/mpeg">
</audio>

• 第三步：在播放触发逻辑中注册媒体会话，告知系统当前为需要后台播放的媒体内容

const audioPlayer = document.getElementById('musicPlayer');
// 示例：绑定播放按钮的点击事件触发播放
document.getElementById('customPlayBtn').addEventListener('click', async () => {
  try {
    await audioPlayer.play();
    // 播放成功后注册媒体会话
    if ('mediaSession' in navigator) {
      // 配置当前播放的媒体信息，会同步显示在系统通知栏的媒体控制区域
      navigator.mediaSession.metadata = new MediaMetadata({
        title: '当前播放歌曲名称',
        artist: '歌手名称',
        album: '所属专辑名称',
        artwork: [
          { src: '专辑封面图地址.jpg', sizes: '512x512', type: 'image/jpeg' }
        ]
      });
      // 可选：绑定系统媒体控件的交互回调，适配用户在通知栏控制播放/暂停/切歌的需求
      navigator.mediaSession.setActionHandler('play', () => audioPlayer.play());
      navigator.mediaSession.setActionHandler('pause', () => audioPlayer.pause());
      // 如需支持切歌可以额外配置previoustrack、nexttrack的回调
    }
  } catch (err) {
    // 处理播放失败逻辑
    console.error('播放失败：', err);
  }
});

注意事项 #

• 播放过程中不要将音频音量设置为0，浏览器会识别为无意义媒体主动暂停释放
• 多首歌曲切换时尽量复用同一个audio实例修改src属性，不要频繁销毁重建audio元素
• 无需额外调用Screen Wake Lock API，配置完成后用户可以正常熄屏，音频会保持后台播放

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