javascript和绑定键的问题

Posted 2023-03-06

【中文标题】javascript和绑定键的问题

【英文标题】：Problems with javascript and binding keys

【发布时间】：2012-01-31 04:20:36

【问题描述】：

我正在尝试为我正在进行的一个新项目制作一个（超级）简单的软件工具。我这样做的方式类似于 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 工作正常。

按住按键时，我希望它不要继续执行该功能。目前，按住键不断重播位，产生“咚咚咚咚咚咚咚咚”的声音。

非常感谢任何有关如何解决以下问题的建议。我尝试了在 javascript 中绑定键的常规方法，并且得到了相同的结果，所以我知道这不是 jKey。

另外 - 如果有人对如何以完全不同/更好的方式进行此操作有任何建议，请随时告诉我！谢谢！

我还应该提到.current 时间是这样的，它会在按下按钮后立即开始重播音符。

【问题讨论】：

几周前我尝试过这样的研究，结果发现 html5 音频 API 现在在所有浏览器之间确实是一团糟。我放弃了，因为没有一个浏览器始终支持所有能够做到这一点的东西。也许其他人有一些见解，但 AFAIK，他们只是还没有为此做好准备。

【参考方案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();

（您需要检查是否有语法错误，但我希望总体思路是显而易见的。）

【讨论】：

这实际上效果很好！它不能解决 chrome 中的口吃问题，但我没想到会这样！谢谢！

酷。我从来没有使用过 html5 音频，所以我不知道 Chrome 是怎么回事（尽管我在使用 Chrome 进行一般浏览时注意到它在视频方面也不是很好 - 响应尝试的速度往往很慢停止视频。）关于上/下键，使用一个对象来跟踪每个键的状态似乎总是最简单的方法——它也应该同时处理几个按键，这在做游戏或音乐时很方便。