再生を終了する前にもう一度クリックしてオーディオファイルを再生する

Question

私はかなり簡単なサウンドボード型のウェブサイトを作っています（これは実際に私の最初のプロジェクトです）。前提は、ユーザーがページをロードし、ボタンをクリックし、サウンドが再生されることです。

問題は、ユーザーがボタン「A」をクリックすると、ボタン「A」のサウンドを再生するのにかかる時間のうちにボタン「A」をクリックしても、その音。

したがって、ボタン「A」の音が再生に1秒かかり、ユーザーが1秒間に10回クリックすると、ボタン「A」の音は10回ではなく1回再生されます。

このリンクが動作するかどうかわかりませんが、これはフィドルへのリンクですか？注意してください、オーディオはフィドルに接続されていないので、ボタンをクリックするとサウンドは実際には再生されません。 https://jsfiddle.net/pmqr9L0s/

これは、これまでにかかわらず、どのように見えるか、私のjsです：あなたはあなたのいずれかのボタンがクリックされるたびに新しいAudio要素を作成するよう

$(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

は、あなたのクリックハンドラ内で、あなたの変数を移動してみてください。

$(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(); 
    }); 
});