必须同时使用 autoplay 和 muted 属性才能实现 HTML 原生 audio 自动播放，如 <audio src="music.mp3" autoplay muted loop>；iOS Safari 严格限制自动播放，需用户点击等手势触发，且按钮须可见可聚焦；JavaScript 控制时需在用户交互中调用 play() 并捕获错误，避免静音解除后播放失败。
怎么用 HTML 原生标签实现背景音乐自动播放
浏览器默认禁止自动播放带声音的媒体，autoplay 单独写在 <audio> 标签里基本无效——除非满足静音条件或用户已与页面交互过。这是最常卡住的地方。
- 必须加
muted属性才能绕过自动播放限制（即使你后续用 JS 解除静音） -
autoplay和muted要同时存在，顺序无关，但缺一不可 - 首次加载时若用户未点击/触摸过页面，
play()会直接抛错：DOMException: play() failed because user interaction is required - 推荐写法：
<audio id="bgm" src="music.mp3" autoplay muted loop></audio>
如何用 JavaScript 控制播放/暂停并保持状态同步
纯 HTML 标签无法响应用户操作（比如点击按钮切换播放状态），必须靠 JS 绑定事件并手动调用 play() / pause()。注意：play() 是异步操作，可能失败，得监听 onerror 或用 catch 捕获 Promise 拒绝。
- 先获取音频元素：
const audio = document.getElementById('bgm'); - 解静音后首次播放需用户手势触发，所以按钮点击里要写：
button.addEventListener('click', () => { if (audio.paused) { audio.muted = false; audio.play().catch(e => console.warn('Play failed:', e)); } else { audio.pause(); } }); - 监听
playing和pause事件更新 UI 状态，别只依赖audio.paused的瞬间值
为什么 background-audio 在 iOS Safari 上特别难搞
iOS Safari 对 <audio> 的限制最严：不支持 autoplay（哪怕 muted），也不允许 JS 在非用户手势上下文中调用 play()。所谓“背景音乐”在 iOS 上本质是“用户点一下才开始播”的音乐。
- 不能靠定时器、
DOMContentLoaded或load事件触发播放 - 必须绑定到明确的用户操作，如
touchstart、click（且该事件处理器不能是异步延迟执行的） - 如果页面有「点击开始」按钮，确保它 visible + focusable + 非 disabled；隐藏按钮或用
display: none会导致 iOS 拒绝播放授权 - 部分旧版 iOS 还要求音频资源域名与页面同源，跨域
src会静默失败
要不要用 Web Audio API 替代 <audio> 标签
不用。Web Audio API 适合做音效合成、实时处理，但对简单背景音乐来说，它不解决自动播放问题，反而增加兼容性负担（比如 iOS 上仍需用户手势启动 AudioContext）。
立即学习“前端免费学习笔记（深入）”；
-
<audio>标签足够轻量，支持loop、preload、音量控制等基础需求 - 想实现淡入淡出？可以用
audio.volume配合requestAnimationFrame渐变，别动不动就上 Web Audio - 真需要精确时间控制（比如和动画帧同步），再考虑
AudioContext，否则就是过度设计
