最简单可靠的方式是在点击事件中同步调用预创建的 Audio 实例的 play() 方法；需提前创建实例、设置 preload='auto' 和 src，点击时重置 currentTime=0 并调用 play()，避免动态创建或异步调用。
点击事件里直接 new Audio().play() 最简单可靠
别用 标签，它在点赞交互里毫无意义——浏览器会拦截无用户手势的播放，而且你根本不需要一个可见播放器。直接用 JS 创建音频实例，在点赞按钮的 click 回调里调 play()，这是目前兼容性最好、代码最轻、行为最可控的方式。
常见错误现象：DOMException: play() failed because the user didn't interact with the document first，说明你把 play() 写在了页面加载时、setTimeout 里，或者绑定到了非可信事件（比如 mousemove）上。
- 音频文件建议用 MP3 格式（兼容性最广），体积控制在 100KB 以内，避免高频点击时加载延迟
- 不要每次点击都
new Audio('sound.mp3')，应提前创建并复用实例，否则 iOS Safari 可能拒绝后续播放 - 必须在 click/touchstart 事件处理器**同步执行**
play()，不能包在 Promise.then 或 setTimeout 里
音频实例得提前创建，不能动态 new
移动端（尤其是 iOS Safari）对音频资源的初始化非常敏感：如果在 click 里才 new Audio('like.mp3')，哪怕只晚几毫秒，也可能因资源未就绪导致 play() 被拒。正确做法是页面加载时就创建好实例，并设好 preload = 'auto'，让它静默加载。
const likeSound = new Audio();
likeSound.preload = 'auto';
likeSound.src = 'sounds/like.mp3';
<p>document.querySelectorAll('.like-btn').forEach(btn => {
btn.addEventListener('click', () => {
likeSound.currentTime = 0; // 重置到开头，支持连续点击
likeSound.play().catch(e => console.debug('点赞音效未播放:', e));
});
});
</p>
-
currentTime = 0必须加，否则第二次点击可能从上一次结束位置继续播 - 如果音频本身很短（loop 和
volume设置；需要调节音量就写likeSound.volume = 0.7 - 别指望
canplay事件来“等加载完再绑定”，iOS 下它可能根本不触发，直接播更稳
为什么不能用
标签本质是媒体容器，不是音效触发器。给它加 autoplay 属性等于白写，浏览器会在无用户交互时静音或中断；加 controls 则多出一堆 UI 元素，和点赞动作完全无关，还可能被用户误操作打断状态。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 如果你试图监听按钮 click 后去调
document.getElementById('like-audio').play()，那和直接用new Audio()没区别，反而多了 DOM 查询开销 - 用
- 不要给 audio 标签设
muted再配合 autoplay，点赞音效必须有声，静音等于功能失效
移动端 click 不生效？检查事件绑定时机和类型
iOS Safari 要求播放必须发生在「可信用户手势」的事件处理器内，且该事件监听必须在页面加载完成前就存在（不能靠 innerHTML 插入按钮后再绑定）。部分 Android 浏览器对 click 响应延迟，改用 touchstart 更稳妥。
- 确保按钮是 HTML 中静态存在的，不是 JS 动态插入后才
addEventListener - 对移动端，推荐同时绑定
click和touchstart，并用e.preventDefault()防止双触发 - 如果按钮是通过 Vue/React 渲染的，确保事件绑定发生在组件挂载（mounted / useEffect）之后，而非模板编译阶段
音频文件路径、事件绑定时机、实例复用这三点，漏掉任何一个，点赞音效在真实设备上大概率静音或报错。别想着“先让声音响起来再说”，浏览器的播放策略是硬性限制，绕不过，只能适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
