我的播放声音按钮循环不起作用

Question

我有一些按钮，每次单击它们都会播放乐器声音。因此，开始理解这个过程，我创建了一个包含所有声音的数组，然后为按钮中的每个项目创建了一个新的 Audio () 和音调数组。这意味着创建一个循环，对每个数组的位置重复该过程。 我尝试过但没有成功。 你能帮我回答这个问题吗？ 谢谢！

第一步：

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[0].addEventListener("click",function (){
        var crash = new Audio(tones[0]);
        return crash.play();
    })
    instruments[1].addEventListener("click",function (){
        var kickBass = new Audio(tones[1]);
        return kickBass.play();
    })
    instruments[2].addEventListener("click",function (){
        var snare = new Audio(tones[2]);
        return snare.play();
    })    
    instruments[3].addEventListener("click",function (){
        var tom1 = new Audio(tones[3]);
        return tom1.play();
    })
    instruments[4].addEventListener("click",function (){
        var tom2 = new Audio(tones[4]);
        return tom2.play();
    })
    instruments[5].addEventListener("click",function (){
        var tom3 = new Audio(tones[5]);
        return tom3.play();
    })
    instruments[6].addEventListener("click",function (){
        var tom4 = new Audio(tones[6]);
        return tom4.play();
    })

//i created a var with the instrument name for every button, but it works with the same var name only changing the position for the array tones, example var audio = new Audio(tones[0]),var audio = new Audio(tones[1]),var audio = new Audio(tones[2]),var audio = new Audio(tones[3]);....

第二步：

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(i = 0; i < instruments.length; i++){
    instruments[i].addEventListener("click",function (){
        var audio = new Audio(tones[i]);
        return audio.play();
    });
}

在第 2 步之后，我希望用音调 [0] 演奏乐器 [0]，用音调 [1] 演奏乐器 [1].....

结果是...什么都没有xD，它没有播放任何按钮。

Answer 1

如果不使用

var

或

let

，

i

将成为全局变量。

当事件侦听器执行时（单击按钮时），它会捕获

i

。然而，循环之后，其值为

instruments.length

，超出了数组范围。这会导致

tones[i]

变为

undefined

，从而导致没有声音播放。

要解决此问题，请使用

i

:

 声明 

let

for (let i = 0; i < instruments.length; i++){
    instruments[i].addEventListener("click",function (){
        var audio = new Audio(tones[i]);
        return audio.play();
    });
}