iOS设备上修改HTML5 Audio标题的技术咨询

嘿，这个问题我刚好踩过坑！其实完全可以实现，核心就是用Media Session API——它就是为了让网页媒体内容和系统级的媒体控件（包括锁屏界面、通知栏播放器）交互而生的。

具体实现步骤： #

1. 先准备好你的HTML5 Audio元素，比如：

<audio id="customAudio" controls src="path/to/your-audio.mp3"></audio>

2. 在JavaScript中配置媒体元数据：
   我们需要在音频开始播放时（或者页面加载完成后），通过Media Session API设置自定义的标题、艺术家等信息。代码示例如下：

const audioElement = document.getElementById('customAudio');

// 监听音频播放事件，确保元数据在音频开始后生效
audioElement.addEventListener('play', () => {
  // 先检查浏览器是否支持Media Session API
  if ('mediaSession' in navigator) {
    navigator.mediaSession.metadata = new MediaMetadata({
      title: '你的音频名称', // 这里设置你想要显示的标题
      artist: '艺术家名字', // 艺术家信息
      album: '专辑名称（可选）', // 可选，专辑名
      artwork: [
        // 可选，设置锁屏显示的封面图片，建议提供不同尺寸适配不同设备
        { src: 'path/to/cover-128x128.png', sizes: '128x128', type: 'image/png' },
        { src: 'path/to/cover-512x512.png', sizes: '512x512', type: 'image/png' }
      ]
    });
  }
});

额外说明： #

• 兼容性：这个API目前在主流浏览器中支持良好，比如iOS Safari 14.5+、Chrome（桌面/移动端）、Edge等都能正常工作。如果是非常老旧的系统版本可能不支持，但现在大部分用户的设备都满足要求了。
• 动态更新：如果你的页面是播放列表形式，切换音频时只需要重新设置navigator.mediaSession.metadata，系统控件会自动同步更新显示的信息。
• 生效时机：部分设备（尤其是iOS）需要音频实际开始播放后才会加载自定义元数据，所以监听play事件来设置是比较稳妥的方式。

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