Проблемы с JavaScript и связывание ключей - PullRequest
Новая
       21

Проблемы с JavaScript и связывание ключей

0 голосов
/ 31 января 2012

Итак, я пытаюсь сделать (супер) простой программный инструмент для нового проекта, над которым я работаю. То, как я это делал, похоже на «музыкальный набор текста» в Garageband, когда определенные ноты связаны с определенными клавишами на клавиатуре. То, что я пытался сделать, - это связать супер маленькие mp3 (~ 100 КБ каждый) с кнопками и клавишами. То, как я это сделал, выглядит следующим образом: 

    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.

Вещи работают (в основном), но есть несколько проблем:

  1. В Chrome при нажатии клавиши или кнопки звук пропускается, а затем, кажется, перезапускается очень быстро. Firefox не работает (firebug говорит, что это как-то связано с .currentTime), но Safari работает отлично.

  2. Удерживая нажатой клавишу, я бы не хотел продолжать выполнять эту функцию. В настоящее время нажатие на клавишу продолжает воспроизводить бит, в результате чего звучит звук "Дун Дун Дун Дун Дун Дун Дун Дун Дун Дун Дун Дун Дун".

Любые предложения о том, как исправить следующее, приветствуются. Я пробовал обычные способы связывания ключей в javascript, и я получаю те же результаты, поэтому я знаю, что это не jKey.

Также - если у кого-нибудь есть какие-либо предложения, как сделать это совершенно другим / лучшим способом, не стесняйтесь, сообщите мне! Спасибо!

Я должен также упомянуть, что текущее время таково, что оно начинает воспроизводить заметку, как только нажимается кнопка.

1 Ответ

0 голосов
/ 31 января 2012

Я не знаком с jKey, но я полагаю, что большинство браузеров генерируют множественные события нажатия клавиш, если удерживать клавишу нажатой, поэтому я думаю, что это объясняет звук "dun dun dun dun", который вы упоминаете.В общем смысле, если вы хотите сделать что-то ровно один раз при нажатии клавиши, я думаю, вам понадобится какой-то флаг, который вы сбрасываете при нажатии клавиши.Я бы предложил что-то вроде этого, чтобы сохранить порядок: 

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

(Вам нужно будет проверить это на наличие синтаксических ошибок, но я надеюсь, что общая идея очевидна.)

...