Question

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

示例：Hi-Hat声音仅在播放完整个wav文件后再次播放。

我需要声音能够重叠以创造节拍。这可以用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>

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

我不确定，但我认为当音频播放完毕后，这些元素将被垃圾收集。

是否有可能使jQuery单击事件触发播放声音重叠的功能？

1 个答案: