audio元素无标准全屏api，因规范明确排除其使用requestfullscreen()；替代方案是css模拟全屏界面或跳转原生播放器，并需结合mediasession实现锁屏控制等实质体验。
HTML 音频在手机端无法“全屏播放”——它压根没有标准全屏 API，所谓“全屏”只能靠 CSS 模拟或跳转原生播放器，且各平台行为不一致。
为什么 audio 元素没有 requestFullscreen()
浏览器规范中，requestFullscreen() 仅对可全屏的元素（如 <video></video>、<iframe></iframe>、普通 <div>）开放；<code><audio></audio> 被明确排除在外。iOS Safari 和 Android Chrome 均不支持对 <audio></audio> 调用该方法，强行调用会直接抛出 DOMException: Element.requestFullscreen: Element is not fullscreenable。
常见错误现象：点击按钮后控制台报错，页面无反应，用户误以为功能失效。
- 不要写
audioElement.requestFullscreen()—— 它永远失败 - 不要依赖
document.fullscreenElement判断 audio 状态 —— 它永远不会指向 audio 元素 - 不要尝试用
webkitEnterFullscreen或webkitRequestFullscreen作用于 audio —— 这些方法只对<video></video>有效
替代方案：CSS 模拟“全屏界面”
真正可行的做法是：隐藏原生控件，用自定义 UI + 全屏 div 包裹，再通过 requestFullscreen() 作用于外层容器。这本质是视觉模拟，不是媒体级全屏。
使用场景：播客页面、语音笔记、带封面图的音频卡片
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
<audio></audio>加controlsList="nodownload noremote nofullscreen"隐藏默认右键菜单项 - 用
<div id="audio-player-fullscreen"> 包裹 <code><audio></audio>和自定义 UI（封面、标题、进度条） - 用户点击“全屏”按钮时，调用
document.getElementById('audio-player-fullscreen').requestFullscreen() - 监听
fullscreenchange事件，动态切换 UI 样式（如字体放大、控件重排） - 优先检测是否在微信环境：
/(MicroMessenger|miniProgram)/.test(navigator.userAgent) - 若在微信中，不尝试 CSS 全屏，改用
location.href = 'weixin://music/play?src=' + encodeURIComponent(audioSrc)（仅限特定白名单域名） - 更通用做法：生成一个纯
<audio></audio>页面（无其他 DOM），用target="_blank"打开，微信会自动启用其原生播放器界面（带封面、歌词、锁屏控制） - 务必确保音频资源开启 CORS，否则跨域加载失败
- 设置
navigator.mediaSession.metadata = new MediaMetadata({ title, artist, album, artwork }) - 监听
navigator.mediaSession.setActionHandler('play', () => audio.play())等事件 - 这样即使没做任何“全屏”，用户锁屏/通知栏也能控制播放 —— 这才是移动端音频的实质“全屏级体验”
注意：安卓部分 WebView（如微信）可能不触发 fullscreenchange，需额外监听 webkitfullscreenchange。
微信等 WebView 中的特殊处理
微信内置浏览器（X5 内核）不支持对任意元素调用 requestFullscreen()，但提供 WeixinJSBridge 的 openAudioPlayer 接口（已废弃）或更可靠的方案是跳转到其原生音频播放页。
容易被忽略的关键点
音频“全屏”的最大陷阱不是技术实现，而是交互预期错位：用户点“全屏”，实际想要的是“专注收听+更大控件+锁屏控制”，而非字面意义的铺满屏幕。iOS 锁屏控制依赖 MediaSession API，Android 依赖 Notification 权限，这些和全屏视觉无关，但直接影响体验完整性。
真正要做的，是把 audio 和 MediaSession 绑定起来：
