Home/ Questions/Q 9273343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T16:05:32+00:00

I have a interesting idea(debatable). Basically I would like to make a beat pad

  • 0

I have a interesting idea(debatable). Basically I would like to make a beat pad similar to https://www.youtube.com/watch?v=3vC5TsSyNjU out of jQuery and a keyboard.

It wasn’t hard assigning sounds to keys on the keyboard.

<script type="text/javascript" src="js/jquery.playSound.js"></script>   
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 

<script type="text/javascript">

$(document).ready(function(){

        jQuery(document).bind(
            'keydown', 
            'q',
            function(ect){
                $.playSound('tracks/basses/bass01.ogg');
            });

        jQuery(document).bind(
            'keydown', 
            'w',
            function(ect){
                $.playSound('tracks/drums/clap04.ogg');
            });         

        jQuery(document).bind(
            'keydown', 
            'e',
            function(ect){
                $.playSound('tracks/beats/rave_hihat02.ogg');
            });

        jQuery(document).bind(
            'keydown', 
            'r',
            function(ect){
                $.playSound('tracks/4.wav');
            });


}); // End
</script>

How can I drag/drop sounds to a key on the keyboard?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what I used

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello</title>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.23.min.js"></script>   
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 

<link rel="stylesheet" href="" />
<style>

.key{
    width: 50px;
    height: 50px;
    border: solid 1px #000;
}

.song{
    width: 50px;
    height: 50px;
    border: solid 1px #f0f;
    float: right;
}

</style>
<script src=""></script>

<script type="text/javascript">

$(document).ready(function(){


    $( ".song" ).draggable();

    $( ".key" ).droppable({
        drop: function( event, ui ) {
            $( this )
        var title = ui.draggable.attr('title');
                $(this).attr({
                    //text: 'Beijing Brush Seller',
                    title: title,
                });
                    //alert("Dropped!");
        }
    });

    $(this).bind(
        'keydown', 
        'q',
        function(ect){
            var track = $('.key').attr("title");
            //alert(track);
            var snd = new Audio(track); // buffers automatically when created
            snd.play();
    });

    $(this).bind(
        'keydown', 
        'w',
        function(ect){
            var track = $('.key').attr("title");
            //alert(track);
            var snd = new Audio(track); // buffers automatically when created
            snd.play();
    });

    $(this).bind(
        'keydown', 
        'a',
        function(ect){
            var track = $('.key').attr("title");
            //alert(track);
            var snd = new Audio(track); // buffers automatically when created
            snd.play();
    });

}); // End
</script>

<style type="text/css">

</style>
</head>
<body>

<div class="key" title="">Key</div>

<div class="song" id="" title="tracks/basses/bass01.ogg">Song</div>
<div class="song" id="" title="tracks/bassloopes/rave_bass01.ogg">Song</div>
<div class="song" id="" title="tracks/basses/synth_acid02.ogg">Song</div>
</body>
</html>
    • 0