mediasession api 不支持锁屏进度条拖动，仅安卓 chrome 117+ 支持 seekto 跳转；需用户手势后配置 metadata 和 actionhandler，主动调用 setpositionstate 同步进度，ios safari 完全不支持 seekto 且进度条只读。
MediaSession API 可以让网页在锁屏界面（如 Android 锁屏、iOS 控制中心）显示播放信息并响应播放控制操作，但它本身不直接提供拖动进度条的功能。锁屏界面上的进度控制（如滑动进度条）依赖系统原生支持，而目前（截至 2024 年底）主流移动浏览器（Chrome、Safari）均未在锁屏界面开放自定义进度拖动能力。不过，你可以通过正确配置 MediaSession 配合其他机制，实现“接近”进度控制的体验，并确保基础功能稳定可用。
设置 MediaSession 基础信息与可操作行为
这是锁屏控制的前提。必须显式启用播放/暂停、上一首/下一首等基本动作，并提供元数据：
- 调用
navigator.mediaSession.setActionHandler()注册"play"、"pause"、"seekbackward"、"seekforward"等 handler（注意："seekto"在部分安卓 Chrome 中已支持，但 iOS Safari 完全不支持） - 设置
navigator.mediaSession.metadata，包含 title、artist、album、artwork（必须是 HTTPS 图片，尺寸建议 ≥ 512×512） - 务必在用户手势触发（如点击播放按钮）后才设置 MediaSession，否则会被浏览器拒绝
利用 seekto 实现有限的跳转（仅限部分安卓 Chrome）
Android 版 Chrome 117+ 支持 "seekto" 动作，当用户在锁屏进度条上点击某处时，会触发该事件，并传入 seekTime（目标时间秒数）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 注册 handler：
navigator.mediaSession.setActionHandler("seekto", (event) => { audio.currentTime = event.seekTime; }) - 需配合设置
audio.setMediaStreamTrack()或确保audio元素已加载且有有效 duration - 注意：该事件不会自动更新锁屏进度条——你需要主动调用
navigator.mediaSession.setPositionState()同步当前时间、duration 和 playbackRate
主动同步播放位置到锁屏进度条
即使无法拖动，也要让锁屏进度条“动起来”，增强可控感：
- 在音频播放过程中，使用
requestAnimationFrame或setInterval（推荐每 250ms）调用navigator.mediaSession.setPositionState() - 传入对象必须含
duration（总时长）、position（当前秒数）、playbackRate（默认 1.0） - 若音频未加载完成（
audio.duration === Infinity），先设为 0，待loadedmetadata事件后再更新真实值
规避常见失效场景
很多问题源于权限或时机错误：
- 不要在页面加载完成就初始化 MediaSession，必须等待用户明确交互（如点击“播放”）
- 确保音频元素已调用
play()且返回 Promise 已 resolve（避免静音策略拦截） - iOS Safari 不支持
"seekto"，也不显示可拖动进度条；其控制中心只显示固定按钮和实时进度（只读） - 锁屏界面不会触发
timeupdate，所有位置更新必须由 JS 主动上报
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
