audio标签必须同时具备src和controls属性才可正常交互使用；仅写会导致完全不可见、无控件、无法操作；需用source提供MP3+OGG双格式回退并声明正确type，autoplay须配合muted。
audio标签必须带src和controls才能用起来
不加controls，音频就完全不可见——不是静音，是没界面、没按钮、用户点不了。只写<audio src="song.mp3"></audio>，在所有现代浏览器里都等于没放。
最简可用结构必须同时满足三点：
-
src值是相对路径（如"./audio/intro.mp3"）或绝对 URL（如"https://cdn.example.com/sound.ogg"），不能是"intro.mp3"这种裸文件名，也不能是file:///本地路径（Chrome/Firefox 直接拒绝） - 显式加上
controls属性，否则无法交互 - 音频文件实际存在且服务器返回正确 MIME 类型（
audio/mpeg对应 MP3，audio/ogg对应 OGG）
只放MP3会丢掉Firefox和部分旧Safari用户
Firefox 默认不支持 MP3 解码，只认 audio/ogg 或 audio/wav；Safari 对 OGG 支持不稳定，但对 MP3 和 AAC 更友好。靠单一格式等于主动放弃兼容性。
正确做法是用<source></source>提供回退：
立即学习“前端免费学习笔记（深入）”；
<audio controls> <source src="song.mp3" type="audio/mpeg"> <source src="song.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio>
注意：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
type属性不能省，"audio/mp3"是无效值，必须写"audio/mpeg"（MP3）、"audio/ogg"（OGG） - 浏览器按
<source></source>顺序尝试，加载第一个能解码且可访问的 - OGG 文件推荐用
ffmpeg -i input.mp3 -c:a libvorbis output.ogg转，免费且 Firefox 原生支持
autoplay必须配合muted才可能生效
Chrome、Safari、Edge 等主流浏览器默认拦截“有声 autoplay”。哪怕写了autoplay，只要没muted，就会静音失败或直接报错。
可行写法只有两种：
-
<audio src="bgm.mp3" controls autoplay muted></audio>—— 页面打开即静音播放，后续可由 JS 取消静音 - 去掉
autoplay，改用用户点击触发：button.addEventListener('click', () => audio.play())
别信“加了 autoplay 就能响”——这是策略限制，不是代码 bug。iOS Safari 最严格：首次播放必须由真实点击触发，且建议先以muted=true播一次，再调audio.muted = false。
JS控制play()报错DOMException的真正原因
错误信息DOMException: play() failed because the user didn't interact with the document first不是你代码写错了，是浏览器强制要求播放必须由用户手势发起。
常见踩坑点：
- 在
DOMContentLoaded、load事件或setTimeout里直接调audio.play()→ 必然失败 -
audio.src动态改完没调audio.load()，就直接play()→ 可能因元数据未加载而卡住 - 移动端 iOS Safari 中，即使有 click，若音频从未成功播放过，仍可能拒绝；加
preload="metadata"+ 首次muted播放更稳
真正安全的做法：绑定在click或touchstart事件回调里，且确保该回调是同步响应、未被 Promise 或异步逻辑包裹。
