可通过MediaSession在Android移动端锁屏界面添加自定义播放控制，但需满足HTTPS、用户手势触发、浏览器支持（Chrome≥71等）、媒体元数据加载完成等条件，并正确设置metadata、actionHandler及setPositionState。
可以通过 MediaSession 接口为 Web 页面中的音频/视频在移动端锁屏界面（以及通知栏、控制中心）添加自定义播放控制按钮，但需满足特定条件并正确配置。
确保基础前提成立
不是所有浏览器都支持锁屏媒体控制，且必须满足以下硬性要求：
- 页面运行在 HTTPS 环境下（本地
localhost也允许） - 媒体播放由用户手势（如点击、触摸）触发，不能自动播放（
autoplay需配合muted或用户交互后调用play()） - 目标浏览器支持
MediaSession（Chrome for Android ≥ 71、Edge for Android、Samsung Internet ≥ 14；iOS Safari 暂不支持 锁屏控制） -
<audio>或<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 或跨域未允许资源。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
注册媒体控制事件监听器
通过 mediaSession.setActionHandler() 绑定播放、暂停、上一首、下一首、快进/快退等操作的响应逻辑：
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));
});
}关键点：
- 每个 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);
说明：
-
duration必须为数值（非NaN或Infinity），建议在loadedmetadata后再启用该更新 - 若媒体为直播流（无明确时长），可传
duration: Infinity，此时进度条显示为缓冲指示器 - 调用频率不宜过高（≤ 10Hz），避免性能开销
不复杂但容易忽略：锁屏控制依赖媒体元素真实处于播放态（audio.paused === false），且 MediaSession 元数据与事件处理器应在播放启动前就位。iOS 设备暂不可用，如需全平台体验，需结合原生 App 封装或引导用户使用支持浏览器。
