现代浏览器中autoplay基本无效，因Chrome、Firefox、Safari自2018年起强制执行媒体策略：有声媒体必须由用户手势（如click、touchstart）触发，否则play()抛出DOMException错误；静音视频可自动播放，但需配合用户交互后解除静音并调用play()。
autoplay 在现代浏览器里基本无效——不是你漏写了属性，是浏览器主动拦截了。
audio.play() 被拒绝时抛出的错误一定是：DOMException: play() failed because the user didn't interact with the document first
为什么 autoplay 属性写上也没用？
Chrome、Firefox、Safari（含 iOS）自 2018 年起统一执行媒体策略：有声媒体必须由用户手势触发（如 click、touchstart），否则 play() 调用直接失败。
-
autoplay单独存在 ≈ 没写，哪怕加了loop、preload="auto"也一样 -
muted="true"可绕过限制实现“自动静音播放”，但背景音乐静音就失去意义 - iOS Safari 尤其严格：必须在手势回调内**同步**调用
play()，不能进Promise.then，不能用setTimeout包裹
怎么让背景音“看起来”一打开就响？
核心逻辑是：等用户第一次交互后，立刻恢复声音并播放。不是欺骗浏览器，而是遵守它的规则。
- 页面加载时用
audio.muted = true+autoplay静音启动（可选，用于预加载） - 监听一次
click或touchstart，在回调里设audio.muted = false并调用audio.play() - 记得加
.catch()捕获可能的拒绝，避免报错中断逻辑 - 移动端建议同时监听
touchstart，因为click有 300ms 延迟，且某些安卓机不触发click
示例片段：
立即学习“前端免费学习笔记（深入）”；
<audio id="bgm" src="bgm.mp3" loop muted></audio>
<button id="unmuteBtn">▶ 开启背景音</button>
<script>
const audio = document.getElementById('bgm');
const btn = document.getElementById('unmuteBtn');
const handleFirstInteraction = () => {
audio.muted = false;
audio.play().catch(e => console.warn('播放被拒:', e.message));
btn.remove();
};
btn.addEventListener('click', handleFirstInteraction);
document.addEventListener('touchstart', handleFirstInteraction, { once: true });
</script>
音频路径和格式容易踩哪些坑？
代码能跑通 ≠ 音频真能播，常见断点不在 JS，而在资源加载环节。
- 路径错误导致 404：
net::ERR_FILE_NOT_FOUND或404 Not Found—— 确认文件在服务器上真实存在，且大小写完全一致（Linux/macOS 区分大小写） - 本地双击打开 HTML（
file://协议）时 Chrome 会禁掉音频加载，必须起本地服务（如python3 -m http.server） - 只提供
.mp3格式？iOS 和部分旧版 Android 不支持；推荐用<source></source>多格式兜底：<source src="bgm.mp3" type="audio/mpeg"></source>+<source src="bgm.ogg" type="audio/ogg"></source> - iOS 要求 HTTPS：HTTP 页面无法加载音频，部署时务必用 HTTPS
volume 和用户体验的隐藏细节
别默认把音量拉满，也别用 volume=0 伪装“已播放”。用户第一次听到声音时的体验，比技术是否跑通更重要。
- 推荐初始
audio.volume = 0.3（0.2–0.4 区间较安全），避免突兀高音吓人 - 不要依赖
visibilitychange或focus事件“续播”——iOS 不允许，且用户可能已切走标签页 - 如果用户没点按钮，就别强行播放；提供显眼的开关控件，比自动播放更尊重用户
play()，而是没意识到：浏览器阻止的不是“自动”，而是“未经许可的声音”。只要声音是在用户明确动作之后发出的，它就能响。 
