iOS Safari音频播放失败主因是格式/编码/MIME不匹配或未通过用户手势激活：需用CBR MP3或AAC封装的M4A，确保服务器返回audio/mpeg，按Safari能力排序source，JS播放必须在用户点击后触发并监听loadedmetadata事件。
苹果端（尤其是 iOS Safari）音频播放失败，90% 不是代码写错了，而是格式选错、type 写错、或没过“首次用户手势”这一关。MP3 单源在 Safari 上可能静默跳过，OGG 直接不支持，WAV 体积大还容易被 MIME 配置拖垮。
为什么 <source src="a.mp3" type="audio/mpeg"></source> 在 Safari 上仍不播
iOS Safari 对 audio/mpeg 的支持依赖实际编码——它只认标准 CBR MP3，遇到 VBR 编码（常见于 Audacity 导出或某些在线转码器）会直接拒绝解码，canplay 不触发、duration 为 NaN，控制台也无报错。更隐蔽的是：若服务器返回的 Content-Type 是 text/plain 或缺失，Safari 就当文本丢弃，连尝试解码都不会做。
- 用
ffprobe a.mp3检查是否含codec_name=mp3且bit_rate_mode=CBR - Apache 用户加
AddType audio/mpeg .mp3到.htaccess；Nginx 用户在types块补audio/mpeg mp3; - 本地开发别双击 HTML：必须用
python3 -m http.server 8000启服务，file://协议下 Safari 拒绝加载音频
<source></source> 顺序必须按 Safari 实际能力排，不是按“通用性”
把 MP3 放第一位看似稳妥，但在 Safari 上反而容易因路径错误、VBR 或 MIME 不匹配导致整个 <audio></audio> 无可用源。正确 fallback 顺序应优先满足 Safari 的硬性偏好：
- 第一位：
<source src="a.m4a" type="audio/mp4"></source>—— Safari 原生首选，但必须确认封装为 MP4 容器 + AAC 编码（ffprobe a.m4a看codec_name=acc） - 第二位：
<source src="a.mp3" type="audio/mpeg"></source>—— 仅限 CBR 编码，且确保服务器 MIME 正确 - 第三位：
<source src="a.wav" type="audio/wav"></source>—— 保底用，短提示音可接受；别用 IEEE Float 编码（Chrome/Safari 都拒） - 避免放
audio/ogg—— Safari 完全不支持，写了也白写，还可能干扰 DOM 解析顺序
JS 播放必须等“用户手势激活”，且不能依赖 autoplay
iOS Safari 要求音频上下文必须由真实用户交互（点击、触摸、空格键）首次触发后才解锁。哪怕你写了 autoplay muted，后续 JS 调 audio.play() 仍可能被拒，尤其在页面刚加载完就调用时。
立即学习“前端免费学习笔记（深入）”；
- 按钮点击后立即调用：
button.addEventListener('click', () => audio.play().catch(e => console.warn(e.name))) - 别在
DOMContentLoaded或load事件里调play()—— 此时无用户手势上下文 - 解除静音要分两步：先
audio.muted = false，再audio.volume = 1；直接设volume不生效 - 检查
audio.networkState === 0（NETWORK_EMPTY）说明根本没加载源，不是播放逻辑问题
跨域音频和 CORS 配置常被忽略，但 Safari 最敏感
从其他域名加载音频时，Safari 对 CORS 要求比 Chrome 更严格：即使响应头有 Access-Control-Allow-Origin: *，若服务器没返回 Access-Control-Allow-Headers: Range，iOS Safari 也会卡在 networkState === 2（NETWORK_NO_SOURCE），表现为加载图标转圈、无声、无错误。
- 服务端需额外允许
Range请求头：Access-Control-Allow-Headers: Range - 验证方式：打开 Safari 开发者工具 → Network → 点音频请求 → 查看 Response Headers 是否含完整 CORS 头
- 若用 CDN，确认其默认开启 CORS 支持（如 Cloudflare 的 “Cache Level” 设为 “Cache Everything” 会屏蔽 CORS 头，需关掉）
最易被忽略的点：iOS Safari 不允许 JS 修改 currentTime 直到 loadedmetadata 事件触发；没等这个事件就设 currentTime，会导致后续 play() 静默失败。务必监听该事件后再操作时间轴。
