点击播放音效的按钮循环实现失败，请求技术支援

你遇到的问题核心是循环里的i是全局变量：当点击事件触发时，循环已经执行完毕，i的值变成了数组的长度（也就是7），而tones[7]不存在，创建Audio对象时传入了undefined，导致无法播放音效。

下面是几种可行的解决方法：

方法1：用let声明循环变量（ES6+） #

把循环里的i用let声明，每次循环会创建一个块级作用域的i，每个点击回调会捕获当前循环的i值：

var tones = ["sounds/crash.mp3","sounds/kick-bass.mp3","sounds/snare.mp3","sounds/tom-1.mp3","sounds/tom-2.mp3","sounds/tom-3.mp3","sounds/tom-4.mp3"];
var instruments = document.querySelectorAll(".drum");
for(let i = 0; i < instruments.length; i++){
    instruments[i].addEventListener("click",function (){
        var audio = new Audio(tones[i]);
        audio.play();
    });
}

方法2：用闭包保存当前索引 #

通过立即执行函数（IIFE）封装每个循环的i，形成独立作用域：

var tones = ["sounds/crash.mp3","sounds/kick-bass.mp3","sounds/snare.mp3","sounds/tom-1.mp3","sounds/tom-2.mp3","sounds/tom-3.mp3","sounds/tom-4.mp3"];
var instruments = document.querySelectorAll(".drum");
for(var i = 0; i < instruments.length; i++){
    (function(index){
        instruments[index].addEventListener("click",function (){
            var audio = new Audio(tones[index]);
            audio.play();
        });
    })(i);
}

方法3：用forEach遍历元素 #

querySelectorAll返回的NodeList支持直接用forEach，回调函数会自动传入当前元素的索引：

var tones = ["sounds/crash.mp3","sounds/kick-bass.mp3","sounds/snare.mp3","sounds/tom-1.mp3","sounds/tom-2.mp3","sounds/tom-3.mp3","sounds/tom-4.mp3"];
var instruments = document.querySelectorAll(".drum");
instruments.forEach(function(instrument, index){
    instrument.addEventListener("click",function (){
        var audio = new Audio(tones[index]);
        audio.play();
    });
});

方法4：利用元素自定义属性 #

给每个按钮添加自定义属性存储音效路径，点击时直接读取：

<!-- 给每个.drum按钮添加data-sound属性 -->
<button class="drum" data-sound="sounds/crash.mp3">Crash</button>
<button class="drum" data-sound="sounds/kick-bass.mp3">Kick</button>
<!-- 其他按钮同理 -->

var instruments = document.querySelectorAll(".drum");
instruments.forEach(function(instrument){
    instrument.addEventListener("click",function (){
        var soundPath = this.getAttribute("data-sound");
        var audio = new Audio(soundPath);
        audio.play();
    });
});

内容的提问来源于stack exchange，提问作者Gabriel Landinez Gabolandi