2016-01-01 5 views
0

Я разрабатываю онлайн-сайт ударной площадки, и у меня есть несколько проблем, один из которых: Я хочу повторить удар, когда пользователь нажимает более одного раза в одно и то же время », щелчок щелчком и пин повторяется каждый раз быстрее « как настоящий drumpad! мой код Javascript является:Looping sound onclick just

<script> 

var kick1 = new Audio("kick1.mp3"); 
var kick2 = new Audio("kick2.mp3"); 
document.onkeydown = function (e) { 
    var keyCode = e.keyCode; 
    if(keyCode == 81) { 
     kick1.play(); 

    } 
     var keyCode = e.keyCode; 
    if(keyCode == 87) { 
     kick2.play(); 
    } 
}; 

</script> 

Мой Html это:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Loops pad online</title> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<header> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsebar" aria-expanded="true"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="collapsebar"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</header> 
<div class="clear"> 
<div class="container"> 
    <div class="jumbotron fixed-jmb"> 
    <div class="container" id="padpa"> 
    <button type="button" onclick="kick1.play();" 
    class="btn btn-default cube-call">808Kick<br><kbd>Q</kbd></button> 
    <button type="button" onclick="kick2.play();" class="btn btn-default cube-call">Chromo Kick<br><kbd>W</kbd></button> 

</div> 
    </div> 
</div> 

<!-- scripts --> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
</html> 

Мой CSS: Bootstrap

+0

Что он сейчас делает? – GAntoine

+0

Например, если вы нажмете на Q, это сделает звук звука, моя проблема в том, что я хочу нажать больше, а затем один раз на Q, чтобы сделать больше звука звука, как это для других ... –

ответ

0

Quick реорганизовать, может исправить вы выдаете:

document.onkeydown = function (e) { 
    switch(e.keyCode) { 
    case 81: 
     var kick1 = new Audio("kick1.mp3"); 
     kick1.play(); 
     break; 
    case 87: 
     var kick2 = new Audio("play.mp3"); 
     kick2.play(); 
     break; 
    default: 
     console.log("Key not bound!"); 
    } 
}; 

Взятые из this SO answer.

+0

Ничего не меняется. –

+0

Сделал смену, сделай снимок. – GAntoine