JS实现网页鼓组时重复按键无法触发音效，如何停止正在播放的Audio？

现有代码为每个鼓点音效仅预创建了1个Audio实例，当该实例处于播放状态时，重复调用play()方法不会触发重新播放，也不会生成新的播放进程，因此连续按同一按键无法触发新的音效。

方案1：重置播放进度（打断前一次音效，适合不需要音效重叠的场景） #

仅需要在每次调用play()前，将对应音频的播放进度重置为0即可，修改后的JS代码如下：

let snare = new Audio (`snare.mp3`);
let kick = new Audio (`kick.mp3`);
let hihat = new Audio (`hihat.mp3`);
let arr =[snare,kick,hihat];
let divs = document.querySelectorAll(`div`);
let body = document.querySelector(`body`);


body.addEventListener(`keydown`,(e)=>{
    if(e.key ===`d`){
        console.log(`ITS ${e.key}`);
        e.stopPropagation();
        arr[0].currentTime = 0;
        arr[0].play()
    }
    if(e.key ===`f`){
        console.log(`ITS ${e.key}`)
        arr[1].currentTime = 0;
        arr[1].play()
    }
    if(e.key ===`g`){
        console.log(`ITS ${e.key}`);
        arr[2].currentTime = 0;
        arr[2].play()
    }
})

该方案改造成本极低，不需要调整原有结构，缺点是前一次播放的音效会被直接打断，不会保留尾音。

方案2：每次触发新建Audio实例（允许音效重叠，更适合鼓组使用场景） #

如果需要实现连续按键时前一次的音效和新音效同时发声的效果（贴近真实鼓组的演奏体验），可以每次按键时新建对应的音频实例播放，代码如下：

const audioMap = {
  d: 'snare.mp3',
  f: 'kick.mp3',
  g: 'hihat.mp3'
}
let divs = document.querySelectorAll(`div`);
let body = document.querySelector(`body`);

body.addEventListener(`keydown`,(e)=>{
  const key = e.key;
  if(audioMap[key]) {
    console.log(`ITS ${key}`);
    e.stopPropagation();
    new Audio(audioMap[key]).play();
  }
})

该方案可以实现多轨音效重叠，连续快速敲击的体验更自然，同时代码逻辑更简洁，不需要维护多个预创建的实例数组。

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