如何通过HTML5中MediaSession接口定制移动端锁屏界面的媒体控制按钮-H5教程-PHP中文网

可通过mediasession在android移动端锁屏界面添加自定义播放控制，但需满足https、用户手势触发、浏览器支持（chrome≥71等）、媒体元数据加载完成等条件，并正确设置metadata、actionhandler及setpositionstate。

如何通过html5中mediasession接口定制移动端锁屏界面的媒体控制按钮

可以通过 MediaSession 接口为 Web 页面中的音频/视频在移动端锁屏界面（以及通知栏、控制中心）添加自定义播放控制按钮，但需满足特定条件并正确配置。

确保基础前提成立

不是所有浏览器都支持锁屏媒体控制，且必须满足以下硬性要求：

页面运行在 HTTPS 环境下（本地 localhost 也允许）
媒体播放由用户手势（如点击、触摸）触发，不能自动播放（autoplay 需配合 muted 或用户交互后调用 play()）
目标浏览器支持 MediaSession（Chrome for Android ≥ 71、Edge for Android、Samsung Internet ≥ 14；iOS Safari 暂不支持 锁屏控制）
<audio></audio> 或 <video></video> 元素已加载元数据（loadedmetadata 事件后设置更稳妥）

设置 MediaSession 基础元信息

在媒体开始播放前或加载完成后，为 navigator.mediaSession 设置标题、艺术家、专辑等基础信息，系统会显示在锁屏界面上：

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: '晴天',
    artist: '周杰伦',
    album: '叶惠美',
    artwork: [
      { src: '/images/ye-hui-mei.jpg', sizes: '96x96', type: 'image/jpeg' },
      { src: '/images/ye-hui-mei.png', sizes: '512x512', type: 'image/png' }
    ]
  });
}

注意：artwork 数组至少包含一个有效图片 URL，推荐提供多尺寸（如 96×96、512×512），格式建议 jpeg 或 png，避免 SVG 或跨域未允许资源。

注册媒体控制事件监听器

通过 mediaSession.setActionHandler() 绑定播放、暂停、上一首、下一首、快进/快退等操作的响应逻辑：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

if ('mediaSession' in navigator) {
  const audio = document.querySelector('audio');
<p>navigator.mediaSession.setActionHandler('play', () => {
audio.play().catch(e => console.warn('Play failed:', e));
});</p><p>navigator.mediaSession.setActionHandler('pause', () => {
audio.pause();
});</p><p>navigator.mediaSession.setActionHandler('previoustrack', () => {
// 实现上一首逻辑（例如切换播放列表索引）
playTrack(-1);
});</p><p>navigator.mediaSession.setActionHandler('nexttrack', () => {
playTrack(1);
});</p><p>// 可选：支持快进/快退（需配合 UI 显示进度条）
navigator.mediaSession.setActionHandler('seekforward', (details) => {
audio.currentTime = Math.min(audio.duration, audio.currentTime + (details.seekOffset || 10));
});</p><p>navigator.mediaSession.setActionHandler('seekbackward', (details) => {
audio.currentTime = Math.max(0, audio.currentTime - (details.seekOffset || 10));
});
}</p>

关键点：

每个 handler 必须是同步注册的函数，内部可异步执行（如 audio.play() 返回 Promise）
对 play/pause 的处理要兼容可能的拒绝（如被浏览器策略中断）
seekforward 和 seekbackward 的 details.seekOffset 由系统提供（如长按时长），若未传入则设默认值（如 10 秒）

动态更新播放状态与进度

锁屏界面会显示当前播放时间与总时长（进度条），需定期调用 mediaSession.setPositionState() 更新：

function updatePositionState() {
  if (!('setPositionState' in navigator.mediaSession)) return;
<p>const audio = document.querySelector('audio');
navigator.mediaSession.setPositionState({
duration: audio.duration || 0,
playbackRate: audio.playbackRate,
position: audio.currentTime
});
}</p><p>// 每秒更新一次（可在播放中用 requestAnimationFrame 或 setInterval）
setInterval(updatePositionState, 1000);
</p>

说明：