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

Playing audio file on click again before it's finished playing

本文关键字：播放 单击 文件 音频      更新时间：2023-09-26

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

我遇到的问题是，如果用户单击按钮"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(){
    }
});

尝试在单击处理程序中移动变量，以便在每次单击其中一个按钮时创建一个新的 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();
    });
});
相关文章：