Php 通过拖放将声音指定给元素_Php_Javascript_Jquery_Html_Css

Php 通过拖放将声音指定给元素

php javascript jquery html css

Php 通过拖放将声音指定给元素,php,javascript,jquery,html,css,Php,Javascript,Jquery,Html,Css,我有一个有趣的想法（值得商榷）。基本上，我想制作一个类似于out-of jQuery的节拍板和一个键盘 <script type="text/javascript" src="js/jquery.playSound.js"></script> <script type="text/javascript" src="js/jquery.hotkeys.js"></script> <script type="text/javascrip

我有一个有趣的想法（值得商榷）。基本上，我想制作一个类似于out-of jQuery的节拍板和一个键盘

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

给键盘上的键分配声音并不难

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


$（文档）.ready（函数（）{
jQuery（document.bind）(
“按下键”，
"q",，
功能（ect）{
$.playSound（'tracks/basses/bass01.ogg'）；
});
jQuery（document.bind）(
“按下键”，
“w”，
功能（ect）{
$.playSound（'tracks/drums/clap04.ogg'）；
});         
jQuery（document.bind）(
“按下键”，
"e",，
功能（ect）{
$.playSound（'tracks/beats/rave_hihat2.ogg'）；
});
jQuery（document.bind）(
“按下键”，
“r”，
功能（ect）{
$.playSound（'tracks/4.wav'）；
});
}); // 终点

如何将声音拖放到键盘上的键上？

好的，我理解你的问题。以下是我将继续进行的方式：

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

           }
      }
    }
}

如果没有，您可以使用回退闪存：

示例：

这就是我使用的

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


你好
.钥匙{
宽度：50px；
高度：50px；
边框：实心1px#000；
}
宋先生{
宽度：50px；
高度：50px；
边框：实心1px#f0f；
浮动：对；
}
$（文档）.ready（函数（）{
$（“.song”）.draggable（）；
$（“.key”）.droppable({
drop：函数（事件、用户界面）{
$（本）
var title=ui.draggable.attr（'title'）；
$（this.attr）({
//文字：“北京毛笔销售商”，
标题:标题,，
});
//警报（“下降！”）；
}
});
$（此）.bind(
“按下键”，
"q",，
功能（ect）{
var track=$（'.key'）.attr（“title”）；
//警报（跟踪）；
var snd=新音频（曲目）；//创建时自动缓冲
snd.play（）；
});
$（此）.bind(
“按下键”，
“w”，
功能（ect）{
var track=$（'.key'）.attr（“title”）；
//警报（跟踪）；
var snd=新音频（曲目）；//创建时自动缓冲
snd.play（）；
});
$（此）.bind(
“按下键”，
“a”，
功能（ect）{
var track=$（'.key'）.attr（“title”）；
//警报（跟踪）；
var snd=新音频（曲目）；//创建时自动缓冲
snd.play（）；
});
}); // 终点
钥匙
歌曲
歌曲
歌曲

你所说的“如何将声音拖放到键盘上的某个键上？”是什么意思？如果我的网页上有一个由css和html制作的虚拟键盘和一个声音目录，我如何将声音拖放到某个键上。因此，当我按下键盘上的键时，它会播放声音。