原生 + 是最轻量无障碍折叠面板， 必须置于 后、 前，配 controls 和有效 src；多格式用 回退，末尾加文字兜底；移动端无法可靠自动播放，需用户手势触发 play()；CSS 设 width: 100% 防控件溢出。
折叠面板用
HTML 原生的 元素完全合法，浏览器会正常解析和渲染控件。
常见错误是把 放在 controls 却没给 src（页面显示空白控件但点不了）。
-
必须放在之间，且**不能在 - 确保
src指向可访问的音频路径，相对路径以当前 HTML 文件为基准 - 加上
controls属性才显示播放按钮、进度条等；不加的话默认不显示任何 UI（但可通过 JS 控制）
<details><summary>点击展开听音频</summary><audio src="sound.mp3" controls></audio></details>
音频加载失败时怎么提示用户
当 src 错误、路径 404 或格式不被支持， 不会报错，只是控件变灰或不响应。用户不知道问题出在哪。
靠 HTML 自身只能用 文字兜底 —— 这是语义正确且无需 JS 的做法。
- 每个
.mp3和.ogg），浏览器自动选第一个能播的 -
内部最后放一段普通文本，作为所有格式都失败时的降级提示 - 不要用
onerror写内联 JS：它对的 error 事件触发时机不可靠
<details><summary>环境音效</summary><audio controls><source src="ambience.mp3" type="audio/mpeg"><source src="ambience.ogg" type="audio/ogg">
您的浏览器不支持播放此音频，或文件丢失。
</source></source></audio></details>
移动端点一下就自动播放？别指望 autoplay
现代浏览器（Chrome、Safari、Firefox 移动版）基本都禁用了无用户交互的 autoplay，尤其带声音的媒体。加了也大概率静音或直接忽略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
如果你真需要“点开面板就播”，得用 JS 在 toggle 事件后调用 play()，但注意：必须是用户手势触发的上下文（比如 click 后立刻调），否则仍会被拦截。
-
autoplay+muted在部分安卓 Chrome 上可能生效，但 iOS Safari 连静音都不行 - 不要在
open属性上做文章 —— 它只是初始状态，不触发播放 - 更稳妥的做法是让用户自己点播放按钮，而不是试图绕过策略
样式微调：让音频控件不撑宽面板
默认是 inline 元素，宽度由浏览器控件决定，在窄容器（比如侧边栏折叠面板）里容易溢出或换行。
只需一行 CSS 就能约束宽度，且不影响功能：
- 给
加width: 100%，它会自适应父容器（即 - 避免设固定像素宽，否则在小屏上会横向滚动或裁剪控件
- 如果想隐藏原生控件、用自定义按钮，那就得用 JS +
AudioContext，复杂度陡增，一般没必要
details audio {
width: 100%;
}
细节上最容易被忽略的是：音频文件路径是否真能被服务器返回 200，以及 type 值是否拼写准确（比如写成 audio/mp3 是无效的，必须是 audio/mpeg）。这些地方一错，整个音频就静默失效，还查不出明显报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
