全平台音频播放需组合声明、服务配置与JS补丁：MP3用type="audio/mpeg"，OGG须Vorbis编码并写type="audio/ogg"，WAV禁用IEEE Float；多格式按mp3→opus→wav顺序静态声明；file://协议必失败，须HTTP服务；iOS/微信需用户手势触发play()且逐个预激活。
只写 就想全平台播放，基本等于放弃 iOS Safari、旧版 Firefox 和微信 iOS WebView。真正能响起来的方案，不是“换格式”，而是“组合声明 + 服务配置 + JS 补丁”三者缺一不可。
为什么 type 属性漏写或写错就静默失败
浏览器不解析文件内容，只按 type 值匹配 MIME 类型。漏掉 type 或写成 type="audio/mp3"，Safari 和 Edge 就直接跳过该 duration 为 NaN、canplay 不触发、控件也不显示。
-
MP3必须写type="audio/mpeg"（不是audio/mp3） -
OGG必须是 Vorbis 编码（用ffprobe a.ogg确认输出含Audio: vorbis），再写type="audio/ogg" -
WAV仅作短提示音兜底，禁用 IEEE Float 编码（Chrome 直接拒）
多格式
浏览器从上到下尝试每个 canPlayType() 返回非空字符串的就停。JS 动态插入反而增加失败概率，静态声明才是唯一可靠路径。
- 推荐顺序：
- 别把
ogg放最后：Firefox/Chrome 能播，但 Safari 完全跳过，等于白写 - MP3 放第一不是因为“最好”，而是因为兼容最广；Opus 放第二是因为体积比 MP3 小 30%～50%，且 Chrome/Firefox 已原生支持
本地开发时 file:// 协议下音频必失败
Chrome、Firefox、Edge 在 file:// 协议下会静默屏蔽所有音频加载——连 Network 面板都看不到请求。这不是路径问题，是协议级限制。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须启用 HTTP 服务：Python 用户运行
python3 -m http.server 8000，VS Code 用户装 Live Server 插件 - 路径统一用相对 URL，如
src="audio/click.mp3"，禁用中文、空格、括号 - 检查 Network 面板中音频请求的响应头：
Content-Type必须是audio/mpeg（MP3）、audio/ogg（OGG）等，不能是text/plain或为空
play() 被拒绝不是 JS 写错了，是没过用户手势关
iOS Safari 和微信 iOS WebView 要求：① 页面已获得用户真实交互（click 或 touchstart），② play() 必须在该事件回调中同步调用。放在 DOMContentLoaded、setTimeout 或 Promise 里，100% 被拒。
- 可靠写法：
button.addEventListener('click', () => audio.play().catch(e => console.warn('play blocked:', e)), { once: true }) - 多个
元素需分别预激活：每个都执行一次new Audio().play().catch(() => {})，iOS 不共享媒体上下文 - 务必加
.catch()：常见错误包括NotAllowedError（策略拦截）、NotSupportedError（格式不支持）、AbortError（网络中断）
最容易被忽略的点：服务器响应头 Content-Type 和 HTML 中 type 值必须严格一致，且跨域音频还需 Access-Control-Allow-Origin: * ——否则 Safari 连解码器都不调用，静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
