如何让浏览器识别播放媒体元数据并同步至macOS控制中心？

单纯用基础的<audio>标签时，macOS控制中心只能获取网页标题，要让它显示歌曲的标题、专辑等详情，得用Media Session API主动把媒体元数据传递给系统。

实现步骤 #

• 获取页面中的音频元素引用
• 通过navigator.mediaSession设置媒体的元数据（标题、艺术家、专辑、封面等）
• 可选：绑定系统控制事件，让控制中心的播放/暂停按钮能直接控制音频

完整代码示例 #

<audio controls id="myAudio">
    <source src="./01 Pompeii.m4a" type="audio/mp4">
</audio>

<script>
const audio = document.getElementById('myAudio');

// 检查浏览器是否支持Media Session API
if ('mediaSession' in navigator) {
    // 设置媒体元数据，替换成你实际的歌曲信息
    navigator.mediaSession.metadata = new MediaMetadata({
        title: 'Pompeii',
        artist: 'Bastille',
        album: 'Bad Blood',
        artwork: [
            { src: './cover-art.jpg', sizes: '512x512', type: 'image/jpeg' }
        ]
    });

    // 绑定系统控制栏的播放/暂停事件（可选）
    navigator.mediaSession.setActionHandler('play', () => audio.play());
    navigator.mediaSession.setActionHandler('pause', () => audio.pause());
}
</script>

注意事项 #

• 即使音频文件本身包含完整元数据，浏览器也不会自动读取并同步给系统，必须手动通过API设置
• 封面图建议使用尺寸为512x512的图片，确保在控制中心显示清晰
• 主流浏览器（Chrome、Safari、Edge等）都支持Media Session API

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