I've been working on an interactive online piano that takes keyboard input, but I'm encountering a problem where sometimes it registers two events instead of one when a key is pressed.
To address this issue, I attempted to use e.repeat (with e representing the keyboard event) in order to only capture the initial keydown event.
If you'd like to test it out, you can visit the temporary link here:
As someone who is relatively new to JavaScript and web development, any feedback or advice on my code would be greatly appreciated.
if (!e.repeat && isValidInput(e.key)) {
let pitch = keysMap.get(e.key);
playNote(pitch);
document.getElementById(pitch).classList.add("key-bkg-color"); // change color of key
}
Here's the relevant snippet of code:
let notes = document.getElementsByClassName("note");
let soften = document.getElementById("soften");
// other variable assignments and mapping details...
// remainder of the existing JavaScript code...