Audio标签无声需先检查muted和autoplay是否被浏览器拦截；必须移除muted、绑定用户手势（如按钮点击）调用play()并catch错误；确认音频路径、格式兼容性及CORS配置；iOS Safari还需添加playsinline且首次交互后resume AudioContext。
Audio 标签没声音，先检查 muted 和 autoplay 是否被浏览器拦截
现代浏览器（Chrome、Edge、Safari）默认禁止自动播放带声音的媒体，即使写了 autoplay，只要没同时满足「用户手势触发 + 未静音」，就会静音或直接暂停。常见现象是页面一加载音频就“卡住”、play() 报错 NotAllowedError，或进度条不动但控制台无报错。
- 必须移除
muted="true"（除非你真要静音） -
autoplay单独使用基本无效；需配合用户交互（如点击按钮）再调用play() - Safari 还额外要求
playsinline（针对 iOS 视频/音频内联播放）
JavaScript 播放前必须由用户手势触发
不能在 window.onload 或 DOMContentLoaded 里直接调 audio.play()，浏览器会拒绝。正确做法是把播放逻辑绑定到明确的用户操作上，比如按钮点击、空格键、或触摸事件。
<button id="playBtn">播放</button>
<audio id="myAudio" src="sound.mp3"></audio>
<script>
const audio = document.getElementById('myAudio');
document.getElementById('playBtn').addEventListener('click', () => {
audio.play().catch(e => console.warn('播放失败:', e));
});
</script>
注意：play() 返回 Promise，失败时会 reject，务必用 catch 捕获，否则控制台可能不报错但无声。
检查音频源路径、格式兼容性与 CORS
没声音也可能是根本没加载成功。Chrome 控制台 Network 面板里看音频请求是否 200，有没有 net::ERR_BLOCKED_BY_CLIENT 或 404。
立即学习“前端免费学习笔记（深入）”；
- HTML5 音频推荐用双格式兜底：
<source src="a.mp3" type="audio/mpeg"><source src="a.ogg" type="audio/ogg"></source></source> - 本地文件（
file://协议）下 Chrome 会因 CORS 拒绝加载音频，必须走本地服务器（如python3 -m http.server） - 跨域音频需服务端返回
Access-Control-Allow-Origin: *，否则play()可能静默失败
移动端 iOS Safari 的特殊限制
iOS Safari 不允许 JS 在非用户手势下调用 play()，且对 volume 属性只读（设了也无效），还强制要求音频上下文处于“激活”状态。
- 确保
<audio></audio>标签有playsinline属性（否则可能跳全屏） - 避免在
touchstart外的事件（如touchend）中调play()，部分 iOS 版本会失效 - 如果用了 Web Audio API，需在首次用户交互后调用
audioContext.resume()，否则所有节点静音
最稳妥的方案永远是：等用户点一下，再播。别试图绕过这个限制——它不会消失，只会变得更严格。
