php - 通过拖放将声音分配给元素

Question

我有一个有趣的想法(值得商榷)。基本上我想制作一个类似于 https://www.youtube.com/watch?v=3vC5TsSyNjU 的打击垫不需要 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>

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

Answer 1

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

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 标记创建音频，但这种方式更优雅。所以我会坚持这种方式。然后对于每个按键，关联来自相应音频数组的音频。在我的示例中，我使用 Canvas 将图像关联到音频文件。然而，这仅用于视觉外观。请注意，为简单起见，我只使用了 Enter 键。每按一次按键，您都会听到另一声蜂鸣声。

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

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

如果没有，你可以使用 fallback 来刷入: Adding sound on clicking a image in HTML 5

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