javascript - 是否可以使jQuery click事件触发一个播放声音重叠的功能？

Question

我正在尝试使用简单的javascript和jQuery制作一个非常简单的鼓采样器。我有jQuery点击事件，还有键盘输入事件触发了播放所需声音的功能。但是当声音仍在播放时，该功能将不会再次触发。

示例:只有在播放整个wav文件后，Hi-Hat声音才会再次播放。

我需要声音能够重叠在自身上以产生节拍。 jQuery有可能吗？

代码示例:

$(document).ready(function() {

    var hh = document.createElement('audio');
    hh.setAttribute('src', 'assets/sounds/hh.wav');


    function rubyTrigger() {
        hh.play();
        $("#ruby-cover").animate({opacity: "0.5"}, 50);
        $("#ruby-cover").animate({opacity: "1"}, 75);
    }


    $("#ruby").click(function() {
        rubyTrigger();
    });


    $(document).keypress(function(e) {
        if (e.which == 106) {
            rubyTrigger();
        } 
    });

}

Answer 1

将document.createElement('audio')移到rubyTrigger函数中。

function rubyTrigger() {
  var hh = document.createElement('audio');
  hh.setAttribute('src', 'http://www.soundjig.com/mp3/soundfx/drumkits/CY0010.mp3');

  hh.play();
}


$("#ruby").click(function() {
  rubyTrigger();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="ruby">
  CLICK
</button>

每次您单击按钮时，都会创建一个新的音频元素，而不会影响任何仍在播放的音频元素。

我不确定，但是我假设在音频播放完毕时将对这些元素进行垃圾收集。