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

Question

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

我这里有一支代码笔，虽然它不能完全工作，因为我无法引用音频文件：https://codepen.io/anon/pen/vmzjPy

如果你慢慢地敲击按键，它就会起作用。但是，如果您快速点击同一个键，声音不会多次播放，直到第一个实例完成播放。

 <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>

Answer 1

音频元素在播放完之前不会再次播放，因此解决方案是在播放之前将音频元素倒回：

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