blur事件不能直接插入音频，只能作为触发播放的信号；必须先获得用户手势授权（如点击），再在blur时检查授权状态并调用play()，否则会因浏览器自动播放策略而失败。
blur 事件本身不能直接“插入音频”，它只是个信号——告诉你输入框（textarea 或 input）刚失去焦点。真正插入音频，得靠 标签或 Audio 对象创建并加载资源。关键不是“在 blur 时插入”，而是“在 blur 时触发播放”，且必须满足浏览器的播放策略。
为什么 blur 后调用 play() 常失败？
现代浏览器（Chrome、Safari、Edge）严格限制自动播放：若页面尚未获得用户手势（如点击、触摸），任何非静音的 play() 调用都会被拒绝，控制台报错 DOMException: play() failed because the user didn't interact with the document first。blur 不算用户手势，它只是 DOM 状态变化。
- 即使输入框是
autofocus的，首次blur也不代表用户已交互 - 用户可能用 Tab 键离开输入框，这不算有效手势（尤其 Safari）
- 直接在
blur回调里写audio.play()几乎必然失败，除非音频此前已被静音播放过
可靠做法：把 blur 当作“准备就绪”信号，而非“立即播放”指令
你真正能做的，是在 blur 时做初始化或状态标记，等后续真实用户操作（比如点按钮）再触发播放。或者，利用“首次交互已发生”这个事实——只要用户点过页面任意地方，之后所有 blur 都可安全调用 play()（仍需处理 Promise）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在
document上监听一次click或touchstart，设全局标记let userInteracted = true - 输入框
blur时检查userInteracted，为true才调audio.play().catch(...) - 音频元素建议初始设
muted，首次播放成功后再audio.muted = false（iOS Safari 更稳妥） - 不要用
autoplay属性——它和blur无关，且基本失效
实际代码示例：输入框失焦 + 用户已交互 → 播放提示音
<textarea id="input_tr"></textarea><audio id="notify-sound" preload="auto"><source src="notify.mp3" type="audio/mpeg"><source src="notify.ogg" type="audio/ogg"></source></source></audio>
JS：
const textarea = document.getElementById('input_tr');
const audio = document.getElementById('notify-sound');
let userInteracted = false;
document.addEventListener('click', () => {
userInteracted = true;
}, { once: true });
textarea.addEventListener('blur', () => {
if (!userInteracted) return;
// 先确保静音状态可播，再尝试取消静音
audio.muted = true;
audio.play().then(() => {
audio.muted = false;
}).catch(e => {
console.warn('提示音播放失败:', e);
});
});
真正的难点不在 blur 绑定，而在于浏览器对媒体播放的上下文要求——它不认“逻辑上的用户操作”，只认“明确的、同步的、由用户发起的事件”。漏掉这个前提，所有代码都只是在等待一个永远不来的 resolve。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
