如何在点击新图片时自动停止前一个音频播放-html教程-PHP中文网

如何在点击新图片时自动停止前一个音频播放

本文介绍如何通过 JavaScript 动态管理音频实例，实现“点击图片播放对应音效，再次点击其他图片时自动暂停前一个音频”的交互逻辑，避免多音频同时播放，并避免直接在 HTML 中使用标签。

本文介绍如何通过 javascript 动态管理音频实例，实现“点击图片播放对应音效，再次点击其他图片时自动暂停前一个音频”的交互逻辑，避免多音频同时播放，并避免直接在 html 中使用 `

在实际开发中，常需为多个元素（如图片）绑定独立音效，但若不加控制，每次点击都会创建新 Audio 实例并播放，导致多个音频重叠干扰。核心解决思路是全局维护一个当前播放的音频引用，并在新音频触发前主动暂停旧音频。

以下是完整、可直接运行的解决方案：

✅ 正确实现逻辑

let currentAudio = null;

window.addEventListener('load', function () {
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        img.addEventListener('click', playAudio);
    });
});

function playAudio(event) {
    // 若已有音频正在播放，则先暂停并清空引用
    if (currentAudio) {
        currentAudio.pause();
        currentAudio = null;
    }

    const imgName = event.currentTarget.id;
    const audio = new Audio(`./sounds/${imgName}.wav`);

    // 等待元数据加载完成后再设置 loop 并播放
    audio.onloadedmetadata = function () {
        audio.loop = true;
        audio.play()
            .catch(err => console.warn('Audio playback failed:', err));
        currentAudio = audio; // 保存当前活跃音频实例
    };
}

⚠️ 注意事项

onloadedmetadata 是关键：确保在音频元数据就绪后再调用 play()，避免因浏览器策略（如未用户交互触发）导致静音或失败；
.catch() 错误处理：现代浏览器对自动播放有严格限制（尤其移动端），添加错误捕获有助于调试；
避免内存泄漏：每次新点击都会创建新 Audio 对象，旧对象由 GC 自动回收（只要无其他引用），无需手动 removeEventListener；
文件路径需匹配：确保 ./sounds/beach.wav 等资源路径真实存在，且服务器支持 .wav MIME 类型；
兼容性提示：Audio() 构造函数在所有现代浏览器中均受支持；如需支持 .mp3 或多格式回退，可扩展为检查文件是否存在或使用 canPlayType()。