audio标签需显式写controls（空字符串有效，controls="false"会误触发显示）；source必须带正确type且按浏览器解码能力排序；服务器须返回匹配Content-Type；autoplay需muted或用户手势触发；preload推荐metadata。
audio 标签必须显式写 controls 才能显示控件
不写 controls，浏览器就默认隐藏全部界面，哪怕音频在后台播放你也看不到按钮。空字符串 controls="" 有效，但 controls="false" 是典型陷阱——浏览器会把它当真值处理，反而强制显示控件，且后续 JS 无法通过 removeAttribute("controls") 可靠隐藏。
常见错误现象：
- 页面没出现播放器，控制台无报错，但 DOM 里漏写了
controls - 写了
controls="false"，结果控件意外出现，且点击“暂停”后无法再触发播放（因控件状态与实际 audio 实例脱节）
source 必须带 type 且顺序按浏览器解码能力排列
浏览器从上到下尝试每个 <source></source>，遇到第一个 canPlayType() 返回非空字符串的就停。省略 type 属性，Chrome 可能碰巧加载成功，但 Safari（尤其 iOS）直接跳过该源，导致 canplay 不触发、duration 为 NaN，且控制台静默失败、无报错。
正确写法必须配对 MIME 类型与后缀：
立即学习“前端免费学习笔记（深入）”；
-
<source src="a.mp3" type="audio/mpeg"></source>（不是audio/mp3） -
<source src="a.opus" type="audio/opus"></source>（Chrome/Firefox 支持，体积比 MP3 小 30%～50%，Safari 仍不支持） -
<source src="a.wav" type="audio/wav"></source>（Safari（尤其 iOS）对 WAV 支持最稳，适合短提示音；别用 IEEE Float 编码，Chrome 直接拒）
别把 ogg 放最后——Firefox/Chrome 能播，但 Safari 完全跳过，等于白写。
服务器必须返回正确的 Content-Type 响应头
即使 <source></source> 写得再全，如果响应头里 Content-Type 是 text/plain 或为空，浏览器就当普通文本扔掉，连解码器都不调用。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
配置方式：
- Apache 用户：在
.htaccess或虚拟主机配置中加AddType audio/mpeg .mp3、AddType audio/ogg .ogg、AddType audio/wav .wav - Nginx 用户：在
types块里补audio/mpeg mp3;、audio/ogg ogg;、audio/wav wav;
本地开发别双击 HTML：用 python3 -m http.server 8000 启服务。file:// 协议下 Chrome/Firefox 会屏蔽音频加载，Network 面板里能看到请求被 cancel。
autoplay 必须配合 muted + 用户手势才能生效
Chrome ≥70、Firefox ≥66、Safari ≥12.1 默认阻止有声自动播放。写了 autoplay 却没声音？不是 JS 写错了，是浏览器在等用户“动手”。
可行方案只有两种：
- 静音自动播：
autoplay+muted，且确保 JS 没后续改写audio.muted = false - 有声自动播：必须由用户手势触发，例如按钮点击后调
audio.play()，并捕获拒绝错误：audio.play().catch(e => { if (e.name === 'NotAllowedError') console.log('需用户交互后才能播放') })
preload 推荐设为 metadata：只读时长、采样率等元数据，不下载音频体，兼顾首帧响应与流量节省；auto 在移动端常被忽略，部分 Android WebView 直接降级为 metadata。
最容易被忽略的是服务器 MIME 配置和 iOS Safari 对 type 的严格校验——这两项出问题，其他所有设置都白搭。
