三行代码可实现基础播放，但需确保src路径经HTTP服务托管、提供mp3/ogg双格式fallback、autoplay必须搭配muted才生效。

直接用 <audio></audio> 标签，配合 controls 属性和 src，三行就能播，但文件路径、格式兼容性、自动播放限制这三点不处理好，代码写了也白放。

audio 标签必须带 controls 才能显示播放器

没加 controls 属性时，<audio></audio> 是个“隐形”元素，页面上完全看不到按钮或进度条，用户无法操作。它默认静默加载，只提供 API 接口，不是“即插即用”的播放器。

• controls 是布尔属性，写出来就生效，不用赋值（controls="true" 反而多余）
• 如果想自定义 UI，得用 JavaScript 操作 play()、pause() 等方法，同时监听 canplay、ended 事件
• 移动端 Safari 和 Chrome 都强制要求用户手势触发播放（比如点击按钮），autoplay 即使加上也会被忽略，除非配 muted

src 必须指向可访问的音频文件，且格式要兼顾浏览器支持

src 值不是“随便一个 .mp3 路径就行”，它受跨域、MIME 类型、编码格式三重约束：

DeepBI DHTML 页面生成器

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

下载

• 本地双击 HTML 文件打开时，Chrome 会因安全策略拒绝加载 file:// 协议下的音频，必须起一个本地服务（如 python3 -m http.server）
• 推荐同时提供 .mp3 和 .ogg 两种格式，用 <source></source> 标签 fallback：

  <audio controls>
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
  </audio>

• 避免用采样率过高或含 DRM 的音频，某些老旧 Android WebView 会静音或报 DOMException: The element has no supported sources

autoplay + muted 是唯一靠谱的“自动播放”组合

单纯写 autoplay 在绝大多数现代浏览器里都会失效，控制台可能显示 Failed to load because no supported source was found 或静默失败。真正起效的只有：

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

• autoplay 必须搭配 muted，缺一不可（<audio autoplay muted controls src="beep.mp3"></audio>）
• 即使 muted，iOS Safari 仍要求首次用户交互后才能解除静音并调用 setVolume(1)，否则后续 play() 仍被拒
• 不要依赖 autoplay 做关键逻辑，比如语音引导开场——改用显式按钮更稳

最简能跑通的三行，是底线；但真要进生产环境，src 路径是否经 HTTP 服务托管、是否备了 fallback 格式、是否绕开了 autoplay 限制——这些才是实际卡住人的地方。