点击新图片时停止当前音频的实现（不使用HTML audio标签）

核心问题是你每次点击图片都会新建一个Audio实例，之前的音频没有被终止，所以会同时播放。我们只需要加个全局变量跟踪当前播放的音频，每次点击先停掉旧的再播新的就行，完全不用HTML的<audio>标签，符合你的挑战需求。

修改后的JavaScript代码 #

// 全局变量存当前正在播放的音频
let currentPlayingAudio = null;

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

function playAudio(event) {
    // 先停掉之前的音频
    if (currentPlayingAudio) {
        currentPlayingAudio.pause();
        currentPlayingAudio.currentTime = 0; // 重置到开头，下次播放从头来
    }

    const imgId = event.currentTarget.id;
    const newAudio = new Audio(`./sounds/${imgId}.wav`);
    
    newAudio.loop = true;
    newAudio.play();

    // 更新当前播放的音频实例
    currentPlayingAudio = newAudio;
}

关键改动说明 #

• 新增currentPlayingAudio全局变量，专门记录当前在播的音频对象，这样每次点击都能找到之前的音频。
• 每次点击新图片时，先检查这个变量：如果有正在播的，就暂停并重置进度，避免下次播放从中间开始。
• 创建新音频、设置循环并播放后，把新实例赋值给全局变量，更新跟踪对象。

可选优化：同一图片点击切换播放/暂停 #

如果想让同一个图片点击时能暂停/继续播放，而不是每次都重新播放，可以改成这样：

let currentPlayingAudio = null;
let currentPlayingId = '';

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

function playAudio(event) {
    const imgId = event.currentTarget.id;

    // 如果点的是当前正在播的图片，切换播放/暂停
    if (currentPlayingId === imgId && currentPlayingAudio) {
        if (currentPlayingAudio.paused) {
            currentPlayingAudio.play();
        } else {
            currentPlayingAudio.pause();
        }
        return;
    }

    // 否则停掉旧的，播放新的
    if (currentPlayingAudio) {
        currentPlayingAudio.pause();
        currentPlayingAudio.currentTime = 0;
    }

    const newAudio = new Audio(`./sounds/${imgId}.wav`);
    newAudio.loop = true;
    newAudio.play();

    currentPlayingAudio = newAudio;
    currentPlayingId = imgId;
}

内容的提问来源于stack exchange，提问作者yeraki