Javascript: triggering button on keydown

Question

I'm building a musical e-learning thing, and wish to trigger an input button using the keyboard, which will play an assigned note. Just like a piano! Except this one will make your ears bleed, but that's beside the point.

The onclick() itself works when pressing the button manually, but binding to the keyboard is proving difficult.

HTML:

<input type="button" id="pgC" value="C" onClick="pgC()">
<input type="button" id="pgCsharp" value="C#" onClick="pgCsharp()">

Script to bind to keyboard:

$(function() {
$(document).keydown(function(e) {
    switch (e.keyCode) {
    case 65:
        $('#pgC')[0].onclick();
        break;
    case 87:
        $('#pgCsharp')[0].onclick();
        break;
    }
 });
});

Which I attempted to modify from this: Binding Keyboard to Onclick Event

My understanding is that $('#pgC')[0].onclick(); should find the assigned id, and trigger the onclick based on which key is pressed, in this case a lower case "a".

Any and all help is greatly appreciated! :D

possible duplicate of http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript — Robin-Hoodie, Mar 29 '15 at 19:11
@nicael The issue is that nothing happens when I press the assigned key. — Kyrre, Mar 29 '15 at 20:51

nickytonline · Accepted Answer · 2015-03-31T12:00:34.450

Here is an answer that handles the simple case, but you need to take into account other stuff, e.g. what if a user wants to play a chord etc.

You can see the simple demo here and edit it to fit your needs, http://plnkr.co/edit/ZfcHdM?p=preview .

However, before going down the road your currently starting on, just look around on GitHub or the Net. I have a feeling someone has already done what you're trying to accomplish.

Here's a snippet.

(function() {
  var KeyboardSimulator = (function () {
    function KeyboardSimulator() {
    }

    KeyboardSimulator.prototype.keyPressed = function (key) {
        // Add some logic to check if the particular key is registered.
        console.log('The musician pressed the "' + key + '" key.');
    };

    return KeyboardSimulator;
  })();

  $(document).ready(function() {
    var simulator = Object.create(KeyboardSimulator.prototype);
    var intrumentSimulatorContext = $('#instrumentSimulator');

    intrumentSimulatorContext.on('click', '.key', function(e) {
      var key = $(this).val();

      e.preventDefault();
      simulator.keyPressed(key);
    });

    $(document.body).on('keydown', function(e) {
      var key = String.fromCharCode(e.keyCode).toUpperCase(),
        keyMap = {
          // keyboard key -> musical note
          'A': 'C',
          'W': 'CSharp',
          'S': 'D'
        }

      if (key in keyMap) {
        $('#pg' + keyMap[key]).trigger('click');
      }

    })
  });
})();

I would vote up if I could! Accidentals will be a challenge, but this works very well for showing off major scales and the other church scales. — Kyrre, Mar 29 '15 at 21:21
@Kyrre, you don't need to upvote, you can just accept the answer ;) — nickytonline, Mar 30 '15 at 16:22
Well, it doesn't exactly answer my problem. What I was looking for was a way to make a=C, w=C#, s=D, etc. Your solution works, but it is not precisely what I was looking for. Attention seems to have died down here though, so I will give you your points. — Kyrre, Mar 30 '15 at 22:20
@Kyrre, I updated the demo to reflect what you need from your last comment. — nickytonline, Mar 30 '15 at 22:39
Holy smokes, that is cool. You inspire me to keep learning, thank you very much :D — Kyrre, Mar 31 '15 at 11:54

Javascript: triggering button on keydown

1 Answers1