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

好的，我明白你的问题。这是我将继续的方式：

function drawImage(e) {    
    e = e || window.event;   

    if (e.keyCode == 13) {           
       if (counter < images.length) {            
            counter ++;

           if(playable) {
               audio.src = sounds[counter-1];
               audio.controls = false;
               audio.load();
               audio.play();
           }

           var img = new Image();
           img.src = images[counter-1];
           img.onload = function() {
                ctx.drawImage(img, 0, 0, WIDTH, HEIGHT); 

           }
      }
    }
}

首先，您需要为每个按下的键分配一个存储到数组中的音频文件。您可以从 html 标记创建音频，但这种方式更优雅。所以我会坚持这种方式。然后对于每个按键，关联来自相应音频阵列的音频。在我的示例中，我使用画布将图像关联到音频文件。然而，这仅用于视觉外观。请注意，为简单起见，我只使用了Enter密钥。每按一次键，您将听到另一次哔声。

您必须考虑的另一件事是使用测试用例，因为并非每个浏览器都可以播放音频。您可以测试浏览器是否支持音频，如下所示：

var audio = document.createElement('audio');
var canPlay = !!(audio.canPlayType && audio.canPlayType('audio/mpeg;').replace(/no/, ''));
var playable = canPlay ? true : false;

如果不是，您可以使用回退到 flash： 在 HTML 5 中单击图像时添加声音

示例：http: //jsfiddle.net/N9Q6S/1/

于 2013-01-26T07:56:08.880 回答
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 回答