HTML5 标签本身不支持锁屏控制，需结合 MediaSession API、用户显式交互和 PWA 封装实现；iOS 仅支持基础播放/暂停，Android Chrome 等需 PWA 才能稳定响应系统控件。
HTML5 <audio></audio> 标签本身不支持锁屏状态下的播放控制，能否在锁屏时继续播放并响应系统级媒体控制（如锁屏界面的播放/暂停按钮、耳机线控、通知栏控制），取决于浏览器、操作系统及网页运行环境（尤其是是否满足“可安装 PWA”条件）。
确保音频能持续播放（基础前提）
锁屏前音频必须处于正常播放状态，且不能被系统中断。需注意以下几点：
- 用户必须通过**显式手势触发播放**（如点击按钮），不能自动播放（autoplay）——多数现代浏览器禁止无交互的音频自动播放，锁屏后更易被挂起
- 避免在播放过程中频繁调用
pause()或切换src，否则可能触发浏览器的节能策略而终止音频上下文 - 使用
play().catch(e => console.warn("Play failed:", e))捕获失败，必要时引导用户重新触发
启用锁屏媒体元数据（显示标题/封面等）
通过 navigator.mediaSession API 可为锁屏界面和系统通知提供媒体信息，提升用户体验：
- 需在音频开始播放后设置，例如：
if ("mediaSession" in navigator) {<br> navigator.mediaSession.metadata = new MediaMetadata({<br> title: "歌曲名",<br> artist: "歌手",<br> album: "专辑",<br> artwork: [{src: "/cover.jpg", sizes: "512x512", type: "image/jpeg"}]<br> });<br> } - 未设置 metadata 时，部分 Android 设备锁屏可能只显示浏览器名称，无法识别当前播放内容
绑定系统级播放控制（播放/暂停/上一首/下一首）
利用 navigator.mediaSession.setActionHandler 响应硬件或系统控件事件：
立即学习“前端免费学习笔记（深入）”；
- 必须在播放启动后设置，且仅对已激活的 media session 生效
navigator.mediaSession.setActionHandler("play", () => audio.play());<br> navigator.mediaSession.setActionHandler("pause", () => audio.pause());<br> navigator.mediaSession.setActionHandler("previoustrack", () => skipToPrev());<br> navigator.mediaSession.setActionHandler("nexttrack", () => skipToNext()); - 注意：iOS Safari 目前（截至 iOS 17）不支持
setActionHandler，锁屏仅支持基础播放/暂停，无法响应上一首/下一首 - Android Chrome / Edge 等较新版本支持完整操作，但需页面处于前台或已添加到主屏幕（PWA）才能稳定生效
提升锁屏稳定性（PWA 是关键）
纯网页在后台/锁屏时容易被浏览器休眠或回收资源。推荐以渐进式 Web App（PWA）方式部署：
- 提供有效的
manifest.json（含"display": "standalone"或"minimal-ui"） - 注册 Service Worker 并缓存核心资源（音频文件、JS、图标等），减少网络依赖
- 用户将网站“添加到主屏幕”后，Chrome on Android 会将其视为独立应用，显著提升锁屏下音频生命周期管理能力
- 注意：即使 PWA，iOS 仍限制后台音频时长（通常 3–10 分钟后暂停），无通用绕过方案
不复杂但容易忽略：锁屏控制不是靠改 HTML 标签实现的，而是靠 JavaScript 的 MediaSession API + 用户交互授权 + PWA 封装三者协同。没有用户主动点击，后续所有控制都不可用。
