本文介绍一种轻量级方法：通过 JavaScript 监听 Audio 的 ended 事件，在点击图片触发音频播放时临时禁用其交互并添加视觉反馈（如模糊效果），播放完毕后自动恢复可用状态。全程无需第三方库，仅需几行 CSS 和 JS 即可实现。
本文介绍一种轻量级方法：通过 javascript 监听 audio 的 `ended` 事件，在点击图片触发音频播放时临时禁用其交互并添加视觉反馈（如模糊效果），播放完毕后自动恢复可用状态。全程无需第三方库，仅需几行 css 和 js 即可实现。
要实现“点击图片播放声音 → 播放中禁用点击 → 播放结束自动启用”的行为，关键在于两点：状态控制（禁用/启用）和时机同步（与音频生命周期对齐）。原代码中每次点击都新建 Audio 实例，但未处理播放过程中的交互锁定——这会导致用户快速连点多次，触发重复播放或逻辑错乱。
推荐采用以下简洁可靠的方案：
✅ 正确做法：绑定 ended 事件 + CSS 类控制状态
首先，在 CSS 中定义一个禁用态样式（例如视觉降级 + 阻止指针事件）：
.blurry {
filter: blur(4px);
opacity: 0.6;
pointer-events: none; /* 关键：彻底禁用鼠标交互 */
cursor: not-allowed;
}
然后更新 JavaScript 函数，接收图片元素引用，并在音频播放开始时添加类、结束时移除：
function playSound(mysound, img) {
// 点击即禁用，防止重复触发
if (img) img.classList.add("blurry");
const theSound = new Audio(mysound);
// 监听播放结束事件，自动恢复
theSound.addEventListener('ended', () => {
if (img) img.classList.remove("blurry");
}, { once: true }); // ? 使用 once 确保事件只执行一次，避免内存泄漏
// 可选：监听 error 事件增强健壮性
theSound.addEventListener('error', () => {
if (img) img.classList.remove("blurry");
}, { once: true });
theSound.play().catch(e => {
console.warn("音频播放失败：", e);
if (img) img.classList.remove("blurry");
});
}
HTML 调用保持极简，只需传入 this 引用当前 <img> 元素：
<img onclick="playSound('ch.m4a', this)" alt="播放按钮">
⚠️ 注意事项
-
务必使用
{ once: true }：避免重复绑定导致内存泄漏或多次触发恢复逻辑； -
.catch()处理播放异常：现代浏览器对自动播放有策略限制（如需用户手势），play()可能返回 Promise 并 reject，不捕获会导致静默失败； -
不要仅依赖
disabled属性：<img>元素原生不支持disabled，必须用pointer-events: none或tabindex="-1"+ JS 拦截； - 若需兼容老版本 iOS Safari（不触发
ended），可补充定时轮询theSound.ended或theSound.currentTime === theSound.duration作为兜底。
该方案兼顾简洁性、可维护性与兼容性，是实现音效按钮防重点击的标准实践。
