HTML5中autoplay属性受浏览器限制，通常无效；需添加muted属性或等待用户交互后调用play()方法才能实现自动播放。
在 HTML5 中，autoplay 属性确实可以实现音频加载完成后的自动播放，但实际行为受浏览器策略严格限制——**现代浏览器（Chrome、Firefox、Safari 等）默认禁止有声音的媒体自动播放，除非用户已与页面发生过交互（如点击、触摸）**。单纯写 autoplay 很可能无效。
基础写法（仅作声明，不保证生效）
语法上很简单：
或带 controls 的更友好形式：
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意：该写法在多数桌面 Chrome、Edge、新版 Safari 中会被静音拦截，音频不会播放；部分移动端（如 iOS Safari）甚至完全忽略 autoplay，除非同时设置 muted。
让 autoplay 实际生效的关键条件
-
添加 muted 属性：浏览器允许静音状态下的自动播放。适用于背景音乐、提示音等可接受初始静音的场景：
-
等待用户首次交互后触发播放：这是最可靠的方式。例如监听一次点击，再调用
play()方法：
JS 中：
document.getElementById('playBtn').onclick = () => {
document.getElementById('myAudio').play();
}; -
避免在页面加载时立即调用 play()：即使加了
autoplay，手动调用play()也必须发生在用户手势事件处理函数内，否则会抛出NotAllowedError异常。
兼容性与调试建议
- 使用
canplaythrough事件确认音频已足够缓冲再尝试播放（配合用户交互）：
audio.addEventListener('canplaythrough', () => {
if (userHasInteracted) audio.play();
}); - 捕获
play()的 Promise 返回值，处理失败情况：
audio.play().catch(e => console.warn('自动播放被阻止:', e)); - 移动端需特别注意：iOS Safari 要求
playsinline（防止全屏）+muted才可能启用 autoplay；Android Chrome 对muted autoplay支持较好。
替代方案：用 muted + 用户交互解除静音
若需要“先自动播放、再恢复声音”，可按如下流程设计：
- 音频元素带
autoplay muted - 监听用户点击后，先取消静音，再调用
play()（部分浏览器需再次调用）：
audio.muted = false;
audio.play().catch(() => audio.volume = 1);
