Question

所以我正在尝试为我正在研究的新项目制作一个（超级）简单的软件工具。我这样做的方式类似于Garageband的“音乐打字”，其中某些音符绑定到键盘上的某些键。我一直试图将超小mp3（每个~100kb）绑定到按钮和按键。我这样做的方式就像休耕一样：

    var a = document.createElement('audio');
    var s = document.createElement('audio');
    var d = document.createElement('audio');
    var f = document.createElement('audio');

    a.setAttribute('src', 'Sounds/a.mp3');

    $('.a').click(function() {
       a.currentTime = 0;
       a.play();
    });

    $(document).jkey('a',function(){
       a.currentTime = 0;
       a.play();
       return false;
    });

对于键绑定，我使用的是jKey jquery插件。

事情很有效（主要是）但有一些问题：

在Chrome中，当按下按键或按钮时，声音会跳过，然后似乎再次快速重启。 Firefox不起作用（firebug说它与.currentTime有关），但Safari工作得很好。
当持有keydown时，我希望它不继续执行该功能。目前，按住按键不断重播该位，导致出现“d d d d d d d d d d”的声音。

非常感谢有关如何修复以下内容的任何建议。我尝试了在javascript中绑定键的常规方法，我得到了相同的结果，所以我知道它不是jKey。

另外 - 如果有人有任何建议如何以完全不同/更好的方式这样做，请随时告诉我！谢谢！

我还应该提到.current时间是按下按钮后立即开始重放音符。

Answer 1

我不熟悉jKey，但我相信大多数浏览器确实会生成多个keydown事件，如果按下一个键，我想这就解释了你提到的“dun dun dun dun”声音。在一般意义上，如果你想在按下某个键时只做一次，我认为你需要某种在keyup上重置的标志。我建议像这样做以保持整洁：

var keyNotes = {
       addNote : function(key, audioSrc) {
           var el = document.createElement('audio');
           el.setAttribute('src', audioSrc);
           // any other element init here, presumably you
           // append it to some container, then:

           this[key] = {
               audio   : el,
               canPlay : true
           };
       },
       play : function(key) {
           var note = this[key];
           // if note has been defined for this key, and can be played
           if (note && note.canPlay) {
               note.canPlay = false;
               note.audio.currentTime = 0;
               note.audio.play();
           }
       },
       stop : function(key) {
           var note = this[key];
           if (note && !note.canPlay) {
              note.canPlay = true;
              note.audio.pause(); // or should this be .stop()?
           }
       }
    };

keyNotes.addNote("a", "Sounds/a.mp3");
keyNotes.addNote("s", "Sounds/b.mp3");
keyNotes.addNote("d", "Sounds/c.mp3");
keyNotes.addNote("f", "Sounds/d.mp3");

$(document).keydown(function(e){
    keyNotes.play(noteFromKeyCode(e.which));
    return false;
}).keyup(function(e){
    keyNotes.stop(noteFromKeyCode(e.which));
});

function noteFromKeyCode(keyCode) {
    return String.fromCharCode(keyCode).toLowerCase();
}

（你需要检查一下是否存在语法错误，但我希望这个概念很明显。）

javascript和绑定键的问题

1 个答案: