制作仿YouTube音效板时，添加停止音效按钮致JS代码失效求助

你的问题核心在于每次播放音效时都创建了新的局部Audio实例，函数执行完后就再也没法引用这些实例，自然没法调用停止方法。下面是具体的修改方案：

步骤1：添加全局数组追踪所有音效实例 #

先在全局作用域定义一个数组，用来存储所有正在播放的Audio对象：

// 全局数组，保存所有正在播放的音效实例
var actieveGeluidsbestanden = [];

步骤2：修改播放函数，加入追踪逻辑 #

更新speelGeluid函数，把创建的Audio对象存入数组，同时监听音效结束事件，自动从数组中移除已播放完的实例（避免内存占用）：

function speelGeluid(welkGeluid){
    var audiootje = "Audio/" + welkGeluid;
    var audio = new Audio(audiootje);
    
    // 将实例加入全局数组
    actieveGeluidsbestanden.push(audio);
    
    // 音效播放完毕后，从数组中移除该实例
    audio.addEventListener('ended', function() {
        var index = actieveGeluidsbestanden.indexOf(audio);
        if (index !== -1) {
            actieveGeluidsbestanden.splice(index, 1);
        }
    });
    
    audio.play();
}

步骤3：编写停止所有音效的函数 #

新增一个函数，遍历全局数组中的所有Audio实例，调用pause()停止播放，同时重置播放进度到开头：

function stopAlleGeluiden(){
    actieveGeluidsbestanden.forEach(function(audio) {
        audio.pause();
        audio.currentTime = 0; // 重置到音效开头，下次播放从头开始
    });
    // 清空数组，避免残留已停止的实例
    actieveGeluidsbestanden = [];
}

步骤4：添加停止按钮的HTML代码 #

在页面中加入一个触发停止函数的按钮：

<button onclick="stopAlleGeluiden()">停止所有音效</button>

这样修改后，既保留了你原本的播放功能，又能实现一键停止所有正在播放的音效，不会导致代码失效。

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