移动端audio后台持续播放需满足三前提：用户手势触发首次播放、保持音频上下文活跃、避免页面重载；media session api是唯一标准增强方案，可维持解码线程并支持锁屏控件。
移动端网页用 <audio></audio> 实现后台长效持续播放，本质上受限于系统和浏览器策略——它不是“能不能写对代码”的问题，而是“浏览器是否允许你播下去”。目前没有纯前端 JS 或 HTML 属性能绕过所有限制，但有明确可行的组合路径。
必须满足的三个前提条件
缺一不可，否则播放会在锁屏、切应用或标签页失焦时立即中断：
-
首次播放必须由真实用户手势触发：比如点击按钮、触摸屏幕、滑动等。不能在页面加载、
DOMContentLoaded或定时器中调用play()。 -
音频上下文需保持活跃：若使用
AudioContext（如做可视化或混音），需在每次可能被挂起后调用context.resume()；纯<audio></audio>标签则依赖浏览器对已启动媒体流的豁免。 -
避免页面重载或 iframe 卸载：跳转新页面会销毁所有 DOM 和播放实例。若需“跨页不断音”，必须用单页应用（SPA）路由，或主页面固定
<audio></audio>、内容通过<iframe></iframe>或动态加载。
Media Session API 是唯一标准增强方案
它不恢复播放，但让系统“认出这是正在播放的媒体”，从而维持解码线程、支持锁屏控件、兼容键盘/蓝牙遥控。仅在音频已开始播放后设置才有效：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 设置元数据：
navigator.mediaSession.metadata = new MediaMetadata({ title: "BGM", artist: "Site" }); - 注册基础操作处理器（如播放/暂停）：
navigator.mediaSession.setActionHandler('play', () => audio.play()); - 注意：handler 在后台不会执行，但系统 UI 可显示状态并反馈用户操作
移动端平台级注意事项
不同系统表现差异大，需针对性处理：
-
iOS Safari：iOS 15.4+ 对已触发播放的
<audio></audio>提供锁屏豁免，但要求音频文件格式稳定（推荐.ogg，MP3 loop 易卡顿）；禁用webkit-playsinline可能影响行为。 -
Android Chrome/Edge：支持 Media Session，锁屏后通常可维持；但若设备进入深度休眠或内存紧张，仍可能终止。建议配合
preload="auto"减少缓冲中断。 - 微信内置浏览器等 WebView：多数阉割了 Media Session 支持，且常主动终止后台音频。此时更可靠的是引导用户使用“小窗播放”或跳转至 PWA 安装版。
不推荐但常被误试的方案
这些方法在当前（2026年）主流环境下基本失效或违反平台规范：
-
Service Worker 播放音频：SW 无法访问 DOM，也不能直接调用
play()，仅可用于缓存或消息中转。 -
循环 setTimeout 检查并重播：锁屏后 JS 执行被大幅降频甚至冻结，
ended事件无法触发，currentTime无法读取。 -
静音 autoplay + 后续取消静音：部分安卓机允许，但 iOS Safari 和新版 Chrome 已收紧策略，仅靠
muted=true开头无法保障后续解音成功。
