使用JavaScript多次播放声音文件（在第一次播放完成之前）？

我正在编写一个教程来改进我的JavaScript。我需要制作一个“鼓套件”，按键可以发出声音

我这里有一支代码笔，但它不能完全工作，因为我无法引用音频文件：

如果你慢慢地按一下键，我就能让它工作了。但是，如果您快速点击同一个键，在第一个实例完成播放之前，声音不会播放多次

 <div class="keys">
    <div data-key="65" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>

  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

<script>

  'use strict';

  const keyElems = document.getElementsByClassName('key');
  const soundElems = document.getElementsByTagName('audio');

  const highlight = function(elem) {
    elem.classList.add('playing');
    setTimeout(function(){
        elem.classList.remove('playing');
    }, 300);
  }

  const makeSound = function(val){
    for (const soundsElem of soundElems) {
      const soundsElemVal = soundsElem.getAttribute('data-key');
      if (val === soundsElemVal) {
        soundsElem.play();
      }
    }
  }

  const keyPressedSoundVal = function(obj) {
    //console.log('keyPressedSoundVal');
    const keyPressed = obj.key;
    for (const keyElem of keyElems) {
      const val = keyElem.getElementsByTagName('kbd')[0].textContent.toLowerCase();
      if (keyPressed === val) {
        highlight(keyElem);
        const val = keyElem.getAttribute('data-key');
        makeSound(val);
      }
    }
  }

  document.addEventListener("keypress", keyPressedSoundVal);

</script>

A.
鼓掌
s
hihat
D
踢
F
敞篷帽
G
繁荣
H
骑
J
陷阱
K
汤姆
L
叮当声
"严格使用",；
const keyElems=document.getElementsByClassName（'key'）；
const soundElems=document.getElementsByTagName（'audio'）；
常量高亮显示=功能（元素）{
元素classList.add（'playing'）；
setTimeout（函数（）{
elem.classList.remove（'playing'）；
}, 300);
}
const makeSound=函数（val）{
用于（常数声元素的声元素）{
const soundsElemVal=soundsElem.getAttribute（'data-key'）；
if（val==soundsElemVal）{
soundsElem.play（）；
}
}
}
const keyPressedSoundVal=功能（obj）{
//console.log（'keyPressedSoundVal'）；
按下常量键=对象键；
用于（常数键元素或键元素）{
const val=keyelm.getElementsByTagName（'kbd'）[0].textContent.toLowerCase（）；
如果（按键===val）{
突出显示（keyElem）；
const val=keyElem.getAttribute（'data-key'）；
makeSound（val）；
}
}
}
文件。添加了EventListener（“按键”，keyPressedSoundVal）；

音频元素在播放结束之前不会再次播放，因此解决方案是在播放音频元素之前倒带它：

soundsElem.currentTime = 0;
soundsElem.play();

---

可能是因为

makeSound

只调用相应的音频元素

play

方法。当元素仍在播放时调用它没有效果-请参阅-如果您想高效地并行播放声音，请查看Web音频API。@le_m是对的，如果您正在制作鼓套件，请使用WebAudio API，媒体元素并不用于此目的。您可以在中找到一个实现。