javascript - 在播放完毕之前再次点击播放音频文件

Question

我正在制作一个非常简单的音板类型网站(这实际上是我的第一个项目)。前提是用户加载页面，单击按钮，然后播放声音。

我遇到的问题是，如果用户单击按钮“A”，在播放按钮“A”声音所需的 x 时间内，单击按钮“A”不会启动其另一个实例声音。

因此，如果按钮“A”的声音需要 1 秒播放，并且用户在 1 秒内点击 10 次，则按钮“A”的声音仅播放一次，而不是 10 次。

不确定此链接是否有效...但这是 fiddle 的链接？请注意， fiddle 上没有附加任何音频，因此当您单击按钮时实际上不会播放声音。 https://jsfiddle.net/pmqr9L0s/

这就是我的 js 到目前为止的样子:

$(document).ready(function(){
    var kickBass1 = new Audio("audio/kickbass1.mp3");
    $(".kickbass1").click(function(){
        kickBass1.play();
    });

    var hihat1 = new Audio("audio/hihat1.mp3");
    $(".hihat1").click(function(){
        hihat1.play();
    });

    var snare1 = new Audio("audio/snare1.mp3");
    $(".snare1").click(function(){
        snare1.play();
    });

    //add record feature later?
    var record = function(){
    }
});

Answer 1

尝试在点击处理程序中移动变量，以便每次单击其中一个按钮时都会创建一个新的 Audio 元素。

$(document).ready(function(){        
    $(".kickbass1").click(function(){
        var kickBass1 = new Audio("audio/kickbass1.mp3");
        kickBass1.play();
    });    

    $(".hihat1").click(function(){
        var hihat1 = new Audio("audio/hihat1.mp3");
        hihat1.play();
    });    

    $(".snare1").click(function(){
        var snare1 = new Audio("audio/snare1.mp3");
        snare1.play();
    });
});