必须配合 muted 属性并用 javascript 在用户点击后取消静音、调用 play() 才能实现背景音乐自动播放与循环，单独使用 autoplay 无效；loop 属性需播放启动后才生效； 等旧标签已弃用且不可控；ios 限制最严，须用户手势触发。
用 <audio></audio> 标签实现背景音乐自动播放与循环
现代浏览器默认禁止自动播放带声音的媒体，所以直接写 autoplay 很可能失效——尤其当页面没有用户交互（如点击）触发时。必须配合 muted 才能绕过静音策略，再通过 JS 解除静音并设为循环。
-
autoplay单独使用基本无效，尤其在 Chrome、Edge、Safari 中 - 加
muted是必要前提，否则浏览器会拒绝播放 - 循环靠
loop属性，但仅当播放器已启动后才生效 - 音频格式优先选
.mp3或.ogg，确保跨浏览器兼容
HTML 结构 + JavaScript 解除静音并循环
纯 HTML 无法可靠触发有声自动播放，必须用 JS 在用户首次交互后调用 play() 并取消静音。下面是最小可行写法：
<audio id="bgm" src="music.mp3" loop muted></audio><script>
const audio = document.getElementById('bgm');
// 监听任意点击事件（页面级即可）
document.addEventListener('click', () => {
audio.muted = false;
audio.play().catch(e => console.warn('Playback failed:', e));
}, { once: true });
</script>
注意：{ once: true } 防止重复绑定；catch 捕获常见错误如 NotAllowedError，避免阻断脚本执行。
为什么不用 <embed></embed> 或 <object></object>？
这些老标签在现代标准中已被弃用，不支持 loop、autoplay 等关键属性，且行为因浏览器而异。例如：<embed src="music.mp3" autostart="true" loop="true"></embed> 在 Firefox 中可能静音，在 Safari 中直接忽略。实际项目里应避免。
-
<embed></embed>无标准 API，无法用 JS 控制播放状态 - 不响应
play()、pause()，也无法监听ended事件 - 移动端几乎全部失效，连基础加载都不可靠
移动端适配和用户体验陷阱
iOS Safari 对自动播放限制最严：即使用户点过一次，后续刷新仍需再次交互才能播放。而且它不支持 audio.play() 在非用户手势回调外调用——哪怕你用 setTimeout 延迟 1ms 都会失败。
- 不要依赖“页面加载完就播”，iOS 下必失败
- 避免把音频放在
document.ready或window.onload里调用play() - 如果需要更平滑体验，可加一个半透明遮罩层 + “点击开始音乐”按钮，显式引导用户触发
- 记得提供关闭按钮，用
audio.pause()和audio.currentTime = 0重置
真正可靠的背景音乐，本质是“用户授权后的持续播放”，不是技术上强行塞进去的。静音策略不是 bug，是设计约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
