无法使用 Javascript 播放数组中的声音

Question

我正在尝试创建一个 Drum Kit 网站。我使用数组作为所有声音文件的占位符，并使用循环调用 play() 函数。 当我尝试加载时，调试控制台说：“未捕获 DOMException DOMException：加载失败，因为未找到支持的源。”

问题是如果我替换“audio.src = playlist[i];”通过“audio.src = playlist[1];”，网站可以找到文件的来源并播放所选的声音。但是如果我把[1]换成[i]，网站就找不到源文件了。那是为什么呢？

你知道为什么 Javascript 会这样吗？我可以找到另一种方法让网站正常运行，但这件事一直在我脑海中萦绕。

以下是我的 Javascript 代码：

var audio = new Audio();

var playlist = new Array("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 drum = document.querySelectorAll(".drum")

for (var i = 0; i < drum.length; i++) {
        drum[i].addEventListener("click", play);
        function play() {
            audio.src = playlist[i];
            audio.play();       
            }
    }

Answer 1

没有 HTML 很难说。但是document.querySelectorAll(".drum") 返回的项目数似乎大于playlist 返回的项目数。所以最终你用完了 playlist 项目并且 audio.src 被分配了未定义的值。