0

私は面白いアイデアを持っています（議論の余地があります）。基本的には、jQueryとキーボードからhttps://www.youtube.com/watch?v=3vC5TsSyNjUに似たビートパッドを作成したいと思います。

キーボードのキーにサウンドを割り当てるのは難しくありませんでした。

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

キーボードのキーにサウンドをドラッグ/ドロップするにはどうすればよいですか？

4

2 に答える 2

0

これは私が使ったものです

<!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>
于 2013-02-12T07:54:11.640 に答える