Safari静默跳过audio/mp3因MIME类型错误，正确应为audio/mpeg；多格式fallback需按浏览器解码能力排序；服务器Content-Type配置错误和iOS手势授权缺失是音频不响的两大主因。
audio/mpeg 与 audio/mp3 的 type 值写错直接导致 Safari 静默跳过
浏览器只认标准 MIME 类型，type="audio/mp3" 是常见手误，Safari（尤其 iOS）会彻底忽略该 canplay 不触发、duration 为 NaN。Chrome 可能碰巧播，但不能当依据。
正确写法只有：type="audio/mpeg"（MP3）、type="audio/ogg"（Vorbis 编码 OGG）、type="audio/wav"（PCM 编码 WAV）。ffprobe 可验证实际编码：ffprobe your-file.mp3 输出中必须含 mpegaudio，而非 aac 或 mp4a。
多格式 fallback 不是堆数量，而是按浏览器解码能力排顺序
浏览器从上到下逐个尝试 canPlayType() 返回非空字符串就停。顺序错，等于白写。
-
-
-
- OGG 不要放最后：Firefox/Chrome 能播，但 Safari 完全跳过，放最后等于放弃它
服务器返回 text/plain 就算 HTML 写对也白搭
HTTP 响应头 Content-Type 错了，浏览器连解码器都不调用，静默当文本扔掉。Network 面板里状态码是 200，不代表音频真被接受。
实操检查路径：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 打开 Network 面板 → 点击音频请求 → 查看 Response Headers → 确认
Content-Type精确匹配后缀和编码 - Apache：在
.htaccess加AddType audio/mpeg .mp3、AddType audio/ogg .ogg - Nginx：在
types块加audio/mpeg mp3;、audio/ogg ogg; - 本地开发别双击 HTML：必须用
python3 -m http.server 8000启服务，file://协议下 Chrome/Firefox 直接屏蔽音频加载
autoplay 失效不是代码问题，是浏览器策略强制拦截
现代浏览器（Chrome ≥70、Firefox ≥66、Safari ≥12.1）默认阻止有声自动播放。写了 autoplay 却没声音？不是 JS 错了，是浏览器在等用户“动手”。
可行路径只有两条：
- 静音自动播：必须同时满足
autoplay muted+volume === 0且未被后续 JS 改写 - 有声播放：只能由用户手势触发，例如按钮点击后调
audio.play()，且需处理 Promise 拒绝：audio.play().catch(e => console.warn('play rejected:', e)) - iOS Safari 还额外要求页面已获用户手势授权（比如用户点过任意区域），否则即使
muted也静默失败
最容易被忽略的点是：服务器 MIME 配置错误和 iOS 手势授权链路——这两处出问题，哪怕所有 HTML 和 JS 都写对，音频也永远不会响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
