现代浏览器默认阻止audio自动播放，必须满足用户交互、muted、playsinline及同步调用play()四条件才能成功。
audio 标签自动播放被浏览器阻止的常见原因
现代浏览器（Chrome、Firefox、Safari、Edge）默认禁止 autoplay，除非满足“用户已与页面交互”这一条件。直接写 <audio autoplay></audio> 几乎必然静音且不播放，控制台常报错：DOMException: play() failed because the user didn't interact with the document first。
这不是 bug，而是策略——防止骚扰性音频自动触发。所以“加个 autoplay 属性就完事”这条路走不通。
绕过自动播放限制的实操方法
核心思路：用用户首次点击/触摸作为触发点，调用 play() 方法。不能靠定时器或 onload 自动调，必须由真实用户手势（click、touchstart）启动。
- 在页面加载后，监听一次
click或touchstart事件（任意可点击区域），然后立即调用audio.play() - 建议把音频元素设为
muted（静音），这样即使未交互也能触发播放，后续再取消静音（但注意：部分浏览器如 Safari 对muted autoplay也有限制） - 避免在
window.onload或DOMContentLoaded里直接调play()，此时无用户上下文，必失败
示例代码：
<audio id="bgm" src="music.mp3" muted></audio><button id="start-btn">开始播放</button>
<script>
const audio = document.getElementById('bgm');
const btn = document.getElementById('start-btn');
btn.addEventListener('click', () => {
audio.muted = false; // 先取消静音
audio.play().catch(e => console.warn('播放失败:', e));
});
</script>
移动端 iOS Safari 的特殊坑
iOS Safari 对 audio 的限制最严：即使用户点了按钮，如果音频未设置 playsinline，也可能被强制全屏播放；且 play() 必须在事件处理函数内同步调用，不能包在 Promise 或 setTimeout 里。
- 务必添加
playsinline属性，否则可能跳转到系统音乐播放器 - 不要用
async/await等异步逻辑包裹play()，它必须是事件回调里的第一行可执行语句（或紧随其后） - 避免使用
loop+autoplay组合，iOS 上容易卡住或反复报错
推荐写法：
<audio id="bgm" src="music.mp3" muted playsinline></audio>
背景音乐的实用优化建议
真正做背景音乐，不是“播起来就行”，还要考虑体验和兼容性：
- 音频格式优先用
.mp3（兼容性最好），辅以.ogg（开源项目可选），避免只用.wav（体积大、不压缩） - 设置
preload="metadata"，让浏览器只预加载时长、封面等信息，减少首屏加载压力 - 别依赖
loop实现循环——有些浏览器会因缓冲问题卡顿，可用ended事件手动重置currentTime = 0再play() - 提供关闭按钮，并保存用户偏好（如 localStorage），下次访问直接按上次选择状态初始化
自动播放这事，本质是跟浏览器策略打交道，不是写对语法就能跑通。最容易被忽略的，是以为“加了 muted 就万事大吉”，结果在 iOS 上仍失败——得同时满足 muted + playsinline + 用户手势触发 + 同步调用 play() 四个条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
