移动端锁屏后台音频播放需用户手势首次触发并激活音频上下文，iOS须resume AudioContext，辅以心跳音频和事件监听维持状态，各平台兼容性不同需降级提示。
移动端网页在锁屏或切到后台时，系统通常会暂停 audio 元素的播放，这是 iOS 和 Android 的默认行为，目的是节省电量和资源。但通过合理配置和用户交互触发，可以实现锁屏后继续播放——关键在于**合法激活音频上下文、保持播放状态、并符合平台策略**。
确保首次播放由用户手势触发
iOS（尤其是 Safari）强制要求音频必须由用户真实操作（如点击、触摸）启动，否则即使调用 play() 也会被静音或拒绝。自动播放（如页面加载后立即播放）基本无效。
- 把
audio.play()绑定在按钮的click或touchstart事件中，而非DOMContentLoaded或load - 可配合 UI 提示，例如“点击开始播放”，避免用户误以为功能失效
- 一旦成功播放一次，后续调用
play()（包括锁屏后恢复时）成功率显著提升
使用 Web Audio API + 解锁音频上下文（iOS 必做）
iOS Safari 在后台/锁屏时会挂起 Web Audio 的 AudioContext，需在用户交互中显式“解锁”并保持其活跃。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 初始化时不要立即创建
AudioContext，而是在用户点击后创建并调用resume() - 若使用
<audio></audio>标签，也建议在同一次用户操作中同时 resume AudioContext（即使不用它），有助于系统识别“媒体已获授权” - 示例：
button.addEventListener('click', () => { audio.play(); if (ctx.state === 'suspended') ctx.resume(); });
避免播放中断：维持音频流与心跳机制
部分安卓浏览器或 iOS 在长时间无音频输出时会主动释放资源。可通过以下方式延长活跃期：
- 播放一个极低音量、无感知的循环音频（如 0.1 秒静音
.mp3），作为“心跳”，防止系统判定为闲置 - 监听
visibilitychange和pagehide事件，在页面隐藏前尝试续播（注意：iOS 中 pagehide 后无法再调用 play） - 对
audio元素设置loop="true"并确保preload="auto"，减少缓冲中断风险
适配不同平台的限制与提示
并非所有场景都能 100% 保证锁屏播放，需管理预期并提供降级方案：
- iOS Safari 最稳定：用户手动触发后，锁屏/后台仍可播放，且支持系统控制中心显示播放控件
- Android Chrome 表现不一：新版更倾向允许后台播放，但某些定制 ROM 或省电模式会强制暂停
- 微信内置浏览器等 WebView 通常禁用后台音频，需引导用户“在 Safari/Chrome 中打开”
- 可在检测到播放失败时，显示友好提示：“请在系统浏览器中打开，并点击播放按钮以启用后台播放”
