Javascript 在循环运行阵列时，如何在每个音效之间添加间距

我是Javascript新手，遇到了一个我找不到答案的问题。我试图将用户按下的任何东西存储到阵列记录中，然后从那里重放用户先前按下的声音效果。我的问题是，当我运行for循环时，它会同时播放所有内容。有人能给我指引正确的方向来解决我的问题吗

var drumButton=document.queryselectoral（“.drum”）.length；
var记录=[]；
对于（var i=0；i

正文{
文本对齐：居中；
背景色：#283149；
}
h1{
字体大小：5rem；
颜色：#DBEDF3；
字体系列：“Arvo”，草书；
文本阴影：3px0#DA0463；
}
页脚{
颜色：#DBEDF3；
字体系列：无衬线；
}
w{
背景：url（'images/tom1.png'）；
}
.a{
背景：url（'images/tom2.png'）；
}
s{
背景：url（'images/tom3.png'）；
}
博士{
背景：url（'images/tom4.png'）；
}
j{
背景：url（'images/snare.png'）；
}
k{
背景：url（'images/kick.png'）；
} 
l{
背景：url（'images/crash.png'）；
}
.设置{
利润率：10%自动；
}
.比赛结束了{
背景色：红色；
不透明度：0.8；
}
.按{
盒影：0 3px 4px 0#DBEDF3；
不透明度：0.5；
}
瑞德先生{
颜色：红色；
}
.鼓{
大纲：无；
边框：10px实心#404B69；
字体大小：5rem；
字体系列：“Arvo”，草书；
线高：2；
字号：900；
颜色：#DA0463；
文本阴影：3px0#DBEDF3；
边界半径：15px；
显示：内联块；
宽度：150px；
高度：150像素；
文本对齐：居中；
利润率：10px；
背景色：白色；
}

鼓套件
鼓您可以使用
setTimeout（）
功能延迟音频播放。为此，您需要对
relay（）
函数进行如下更改：

function replay() {
  duration = 0;

  for (var i = 0; i < record.length; i++) {
    /* Delay playback of audio */

    setTimeout(() => {
      makeSound(record[i]);
    }, duration);

    /* Add the duration of current audio to the total duration */

    duration += record[i].duration
  }
}

函数回放（）{
持续时间=0；
对于（变量i=0；i{
制造声音（记录[i]）；
}，持续时间）；
/*将当前音频的持续时间添加到总持续时间中*/
持续时间+=记录[i]。持续时间
}
}

这里我们使用
setTimeout（）
根据变量
duration
延迟音频播放，而不是直接播放音频。每个音频元素的持续时间被迭代地添加到
持续时间中，以延迟连续音频的播放。
在尝试代码并测试不同的可能性后，它仍然一次播放所有音频元素，但在开始时略有延迟。如果我添加您编写的以下代码，则表明持续时间未定义。