在完成播放之前再次单击播放音频文件

Question

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

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

因此，如果按钮“A”的声音播放时间为 1 秒，而用户在 1 秒内点击 10 次，则按钮“A”的声音只播放一次，而不是 10 次。

不确定此链接是否有效...但这是指向小提琴的链接？请注意，小提琴上没有附加音频，因此当您单击按钮时实际上不会播放声音。 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();
    });
});