全屏页面中audio.play()报错是因为浏览器强制要求播放必须由用户手势（如click、touchstart）触发，全屏操作本身不构成用户交互，domcontentloaded、onload或settimeout中调用均会失败。
不能靠 autoplay 直接实现“全屏页面 + 自动播放背景音”的可靠体验，必须配合用户手势触发，否则 Chrome/Firefox/Safari 都会静默拒绝。
为什么全屏页面里 audio.play() 总是报错？
错误信息通常是 DOMException: play() failed because the user didn't interact with the document first。这不是代码写错了，而是浏览器策略强制要求：哪怕页面已全屏、音频已加载、muted=true 也设了，只要没发生过 click 或 touchstart 这类明确的用户交互，play() 就会被拒。
- 全屏（
document.documentElement.requestFullscreen()）本身不算用户手势，它只是 JS 调用结果 -
DOMContentLoaded、window.onload、setTimeout里调play()必失败 - 移动端更严：部分 Android 浏览器只认
touchstart，且监听必须绑定在原始 DOM 节点上（不能是 innerHTML 插入后补绑）
如何让全屏页面第一次点击就播背景音？
核心思路是：把「进入全屏」和「播放音频」两个动作耦合到同一个用户事件里，且确保音频已准备就绪。
- 用
<audio preload="auto" muted></audio>提前加载，避免点击后卡顿 - 在触发全屏的按钮上同时调
audio.play()，而不是等全屏完成后再调 - 必须加
.catch(e => console.warn('play rejected:', e))，否则错误被吞掉，你根本不知道哪步断了 - 示例逻辑：
const audio = document.getElementById('bgm');
const fullscreenBtn = document.getElementById('fsBtn');
fullscreenBtn.addEventListener('click', () => {
// 先尝试播放（此时可能还没全屏，但没关系，策略允许）
audio.play().catch(e => console.warn('play failed:', e));
// 再请求全屏
document.documentElement.requestFullscreen().catch(e => console.error('fs failed:', e));
});
source 多格式怎么配才真正兼容全屏场景？
全屏常用于大屏展示、展会终端、Kiosk 设备，这些环境浏览器版本可能较旧或锁定，仅靠 .mp3 容易在 Firefox 或旧 Safari 上白屏无声。
- 按顺序放
<source src="bgm.mp3" type="audio/mpeg"></source>→<source src="bgm.ogg" type="audio/ogg"></source>，浏览器取第一个能解码的 - 务必写
type属性：HTTP 服务没返回正确 Content-Type 时，不写type会导致某些浏览器跳过该source - 不要用
.wav做主格式：体积大、加载慢，全屏页面首帧延迟敏感，只适合几秒提示音 - 如果用 CDN 或静态服务器，确认它对
.ogg返回audio/ogg，否则 fallback 会失效
循环播放 + 静音开关怎么不翻车？
loop 属性能循环，但无法响应式控制「当前是否静音」或「音量值」——这些都得靠 JS 手动同步状态，否则 UI 和实际行为脱节。
- 别只改
audio.muted = true，还要同步更新按钮文案/图标（比如从 ? 变成 ?） - 音量调节要防呆：
audio.volume = Math.max(0, Math.min(1, newValue))，避免设成负数或超 1 - 循环中暂停再播放，可能出现 0.1~0.3 秒空白（尤其 OGG），可监听
ended事件手动currentTime = 0补齐 - 全屏下用户可能切走再切回，建议监听
visibilitychange，切走时pause()，切回时按需恢复
最易被忽略的一点：全屏页面常部署在 kiosk 模式或数字标牌设备上，这类系统可能禁用所有自动媒体播放策略，连「用户点击」都不触发——这时候得提前联系设备厂商确认 Webview 的 mediaPlaybackRequiresUserGesture 是否被硬关闭，否则所有 JS 方案都无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
