controls属性必须显式声明，否则浏览器不渲染任何音频控件；src路径需正确且服务端返回匹配MIME类型；使用时type值须准确（如audio/mpeg）；移动端自动播放需autoplay与muted共存。

controls 属性没写，音频就真“隐身”了

不是加载失败，也不是静音，是浏览器压根不渲染任何界面——播放按钮、进度条、音量滑块全都不出现。哪怕你写了 autoplay 或 loop，用户也点不了、拖不了、甚至不知道页面里藏了个音频。

它必须作为属性显式存在：<audio src="bgm.mp3" controls></audio>。只写 <audio src="bgm.mp3"></audio> 就等于没放控件。

• controls 是布尔属性，值可以为空（controls）或任意字符串（controls="anything"），只要出现就行
• 别和 CSS 的 visibility: hidden 混淆——这是 HTML 层级的开关，不写就是不生成 DOM 控件节点
• 如果想隐藏控件再用 JS 自定义 UI，那就主动去掉 controls，但得自己绑定 click、监听 timeupdate、处理 loadedmetadata 等事件，否则交互直接断掉

src 路径对了，但控制条显示“加载中”或空白

常见现象：控件出来了，点播放没反应，Network 面板里请求状态是 200 但 Content-Type 错了，或者干脆是 404/403。根源不在 HTML 写法，而在路径解析或服务端配置。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 本地双击打开 HTML 文件时，file:// 协议下 Chrome/Firefox 会拒绝加载音频，必须起本地服务（如 python -m http.server）
• src 必须是相对路径（如 "./audio/intro.mp3"）或绝对 URL（如 "https://cdn.example.com/song.ogg"），不能是 "C:\music\song.mp3" 或纯文件名 "song.mp3"
• 服务器必须返回正确的 MIME 类型：audio/mpeg 对应 MP3，audio/ogg 对应 OGG；Python 的 http.server 和 GitHub Pages 默认不设，会导致 Safari 或 Firefox 跳过该 <source></source>

用了 却还是播不了 MP3？type 属性写错或漏了

只写 <source src="song.mp3"></source> 不够。浏览器靠 type 属性预判能否解码，不写或写错（比如 "audio/mp3"）会让 Safari 直接跳过该源，哪怕文件本身完全合法。

立即学习“前端免费学习笔记（深入）”；

• MP3 对应的合法值是 type="audio/mpeg"，不是 "audio/mp3" 或 "mp3"
• OGG 对应 type="audio/ogg"，WAV 对应 type="audio/wav"
• 顺序很重要：浏览器从上到下尝试，第一个 type 匹配且可访问的就用，后面的忽略。推荐把 MP3 放前面（兼容性广），OGG 放后面（Firefox 友好）
• 完整结构示例：

  <audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
  </audio>

移动端点不动、自动播放被拦截？autoplay 和 muted 必须成对出现

Chrome、Safari、Edge 等现代浏览器默认拦截“有声 autoplay”。单独写 autoplay 会被静默忽略，控制台可能连警告都不报。

• 要自动播放，必须同时加 autoplay muted：<audio src="intro.mp3" controls autoplay muted></audio>
• 移动端尤其严格：iOS Safari 要求首次播放必须由用户手势触发（click/touchstart），即使加了 muted，若之前从未成功播过，仍可能失败
• 如果目标是“用户点一次后，后续自动续播”，建议首次用 muted 播放建立媒体会话，之后再调 audio.muted = false 解除静音
• 别依赖 preload="auto" 强行提前加载——它不会绕过 autoplay 策略，且在 iOS 上常被忽略

最麻烦的从来不是写几行 HTML，而是路径大小写在 Linux/macOS 上出错、服务端缺 MIME 头导致 Safari 跳过 OGG、或是 iOS 对非用户手势的零容忍——这些没法靠重写标签解决，得靠 Network 面板查响应头、用 DevTools 模拟移动设备测试、以及在真实机型上验证首次播放行为。