ios safari要求audio标签必须是body的直接子元素且muted与autoplay需同时在html中声明无值，用户首次交互后方可取消静音并播放。
移动端 audio 标签必须写在 直系子节点才能自动播放
iOS Safari 会拒绝播放任何被包裹在 div、section 或隐藏容器里的 audio 元素，哪怕加了 muted 和 autoplay。它只信任直接挂载在 body 下的媒体元素。
常见错误写法：<div class="player"><audio muted autoplay></audio></div>
正确做法是：把 audio 标签提一层，确保它是 body 的直接子元素；若必须结构嵌套，可用 CSS 控制显隐（如 visibility: hidden），但不能用 display: none 或 opacity: 0 配合 pointer-events: none —— 这些都会让 Safari 认为“不可交互”，从而拒绝初始化音频上下文。
muted 属性必须无值，且和 autoplay 同时出现在初始 HTML 中
浏览器只在解析 HTML 阶段检查是否具备自动播放资格。JS 后设 audio.muted = true 或 audio.setAttribute('muted', '') 都无效——尤其在 iOS 上，play() 会直接抛出 DOMException: play() failed because the user didn't interact with the document first。
- ✅ 正确：
<audio muted autoplay src="notify.mp3"></audio> - ❌ 错误：
<audio autoplay src="notify.mp3"></audio>（缺muted） - ❌ 错误：
<audio muted="true" autoplay src="notify.mp3"></audio>（带值，Safari 和 Chrome 严格模式不认） - ❌ 错误：
<audio autoplay src="notify.mp3"></audio>+audio.muted = true（JS 补属性晚了）
用户首次交互后才能解除静音并恢复声音
muted 是策略通行证，不是音量开关。它只解决“能不能播”的问题，不解决“有没有声”。一旦用户点击过页面任意位置（哪怕只是空 div），你就可以安全执行：
audio.muted = false;
audio.volume = 1;
audio.play().catch(e => console.warn('恢复声音失败:', e.name));
但注意：这个操作必须发生在用户手势触发的回调里（比如 click、touchstart），不能放在 setTimeout 或 loadeddata 事件中——后者会被浏览器判定为“非可信源”。
另外，iOS 不允许 JS 在未交互前调用 play()，哪怕 muted 已存在；而 Android WebView 表现更宽松，容易掩盖问题，上线前务必真机测 iOS。
audio 元素必须有合法 src 且 MIME 类型正确
开发时 localhost 能播，上线后黑屏无声？大概率不是代码问题，而是 CDN 或 Nginx 把视频/音频响应头改成了 Content-Type: application/octet-stream 或 text/plain。浏览器无法识别媒体资源，连元数据都加载失败，muted 策略自然失效。
排查方法：
- 打开 DevTools → Network → 找到音频请求 → 检查 Response Headers 中的
Content-Type - 应为
audio/mpeg（MP3）、audio/ogg或audio/wav；若为application/octet-stream，需配置服务器返回正确类型 - 同时确认没有被 WAF 或缓存层 strip 掉
muted属性（某些老旧代理会过滤未知布尔属性）
最稳妥的做法是：用 FFmpeg 导出纯音频文件时指定 -vn（禁用视频流），并确保服务端对 .mp3 文件返回 audio/mpeg。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
