audio标签无法在DOMContentLoaded或onload后直接播放，因浏览器强制要求首次play()必须由用户手势（如click）同步触发，否则被拒绝；需将创建和play()收束于同一用户事件回调，并确保资源已加载或使用preload="metadata"。
audio 标签不能靠 DOMContentLoaded 或 window.onload 后直接 appendChild 就“安全播放”——浏览器策略会拒绝无用户交互的 play()，哪怕 DOM 已就绪、音频已加载完成。
为什么 onload 后 new Audio().play() 会失败
Chrome/Firefox/Safari 都强制要求：首次调用 play() 必须发生在用户手势（click、touchstart）触发的同步执行流中。在 window.onload 里创建并调用，属于“被动触发”，会被静默拒绝，控制台报错：DOMException: play() failed because the user didn't interact with the document first。
即使你加了 muted，Safari 还可能因页面未获得焦点而拦截；移动端更严格，setTimeout 延迟哪怕 1ms 也会断开“手势信任链”。
所以，“页面加载完就播”本质是伪需求——必须等用户点一下，才能解锁播放权限。
立即学习“前端免费学习笔记（深入）”；
如何让音频在用户首次点击后延迟插入并播放
核心是把“插入 audio 元素”和“调用 play()”都收束在同一个用户事件回调内，并确保音频资源已加载或能快速加载。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
new Audio(src)创建实例，比动态document.createElement('audio')更轻量，且自带预加载逻辑 -
src必须是有效 URL（相对路径需正确，如"./sound.mp3"），不能是本地file://路径 - 不要设
autoplay属性——它在 JS 控制场景下无意义，还可能干扰状态判断 - 调用
play()后必须.catch()，否则失败静默，你根本不知道卡在哪
示例代码：
document.body.addEventListener('click', function handler() {
const audio = new Audio('./notify.mp3');
audio.play().catch(e => console.warn('Audio play blocked:', e.message));
document.body.removeEventListener('click', handler); // 只响应第一次点击
});
preload="metadata" 是延迟插入时最稳的加载策略
如果你用的是 <audio></audio> 标签而非 new Audio()，且希望插入后尽快播放（比如点击按钮才显示播放器），preload 的取值直接影响体验：
-
preload="none"：插入后首次play()才发请求 → 用户点击到出声有明显延迟，4G 下可能 >500ms -
preload="auto"：不可控，移动端常退化为metadata，别依赖 -
preload="metadata"：插入即拉取时长、码率等元信息，主体音频按需加载 → 点击播放时缓冲极短，兼容性好，推荐
注意：即使设了 preload="metadata"，仍要等用户点击才调用 play()，否则照样被拦。
音频文件格式与路径错误是最常被忽略的硬伤
很多“播放失败”根本不是策略问题，而是基础路径或格式没对：
-
src写成"sound.mp3"（缺 ./）或"C:\music\alert.wav"（本地路径）→ 404 或ERR_FAILED - 只提供
.mp3，但在 Firefox 或旧 Safari 上不支持 → 页面静音无提示，控制台也无报错（<source></source>未匹配时静默跳过） - 服务器没配对 MIME 类型（如返回
text/plain而非audio/mpeg）→ 即使路径对，Chrome 也会拒绝加载
验证方式很简单：把 src 地址单独粘贴进浏览器地址栏，看能否直接下载或播放。不能，就先修路径和服务器配置，再谈 JS 播放逻辑。
