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