如何在移动设备锁屏显示音频的艺术家、专辑名及封面？

你需要使用**媒体会话API（Media Session API）**来实现需求，HTML原生的<track>元数据标签和<audio>的poster属性无法被移动设备的系统锁屏媒体控件识别。

解决步骤 #

1. 先搭建基础的HTML音频标签结构：

<audio id="audioPlayer" controls src="audio-file.mp3" type="audio/mpeg"></audio>

2. 通过JavaScript配置媒体会话元数据，监听音频播放事件激活锁屏显示：

const audio = document.getElementById('audioPlayer');

audio.addEventListener('play', () => {
  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: '歌曲名称', // 替换为实际歌曲名
      artist: '艺术家名称', // 替换为实际艺术家名字
      album: '专辑名称', // 替换为实际专辑名
      artwork: [
        { src: 'cover-96x96.jpg',   sizes: '96x96',   type: 'image/jpeg' },
        { src: 'cover-128x128.jpg', sizes: '128x128', type: 'image/jpeg' },
        { src: 'cover-192x192.jpg', sizes: '192x192', type: 'image/jpeg' },
        { src: 'cover-256x256.jpg', sizes: '256x256', type: 'image/jpeg' },
        { src: 'cover-512x512.jpg', sizes: '512x512', type: 'image/jpeg' }
      ]
    });

    // 可选：绑定锁屏控件的播放/暂停操作
    navigator.mediaSession.setActionHandler('play', () => audio.play());
    navigator.mediaSession.setActionHandler('pause', () => audio.pause());
  }
});

关键说明 #

• 兼容性：Chrome、Edge、Safari（iOS 14.5及以上）等现代浏览器支持该API，旧版移动浏览器可能无法生效。
• 封面图要求：提供多尺寸封面图，系统会根据设备分辨率自动适配，保证锁屏显示清晰。
• 触发限制：浏览器有自动播放政策，必须由用户主动点击播放按钮等操作启动音频，媒体会话API才能正常工作。

效果对比 #

当前显示效果 #

期望显示效果 #

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