How do I make the multiple keydown event work without breaking?

Question

    $(document).on('keydown', function(event) {
            const current = audios[Number(event.key) // audios is array of music files
            current.currentTime = 0;
            current.play();
    });

I'm creating a drum application. If I press the number 2 with the keydown event, it will be activated. And while I hold down the number 2 and press 3, the number 2 will stop sounding. How can I make it happen? And Why do not this?

How to play multiple audios: https://stackoverflow.com/questions/11652197/play-multiple-sound-at-the-same-time — MauriceNino, Oct 10 '19 at 13:54
How to detect multiple key presses: https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript — MauriceNino, Oct 10 '19 at 13:55

score 0 · Answer 1 · answered Oct 10 '19 at 15:20

It looks like there's a syntax error in your code. const current = audios[Number(event.key) is missing a closing ].

Here is how I would approach it.

const pressedKeys = {};

$(document.body).keydown(function (evt) {
  pressedKeys[Number(evt.key)] = true;
  playSongs(pressedKeys);
});

$(document.body).keyup(function (evt) {
  pressedKeys[Number(evt.key)] = false;
});

function playSongs(dict) {
  for (let song in dict) {
    if (dict[song] === true) {
      audios[song].currentTime = 0;
      audios[song].play();
    }
  }
}

This code keeps track of keys in a dictionary. Whenever a keydown is registered it adds it to the dictionary. Right afterwards, playSongs finds all keys that are true and plays that song.

How do I make the multiple keydown event work without breaking?

1 Answers1