Estimated date of creation: December 2022
Status: Online 🟢
This is a playable piano keyboard for your browser. But it is pretty simple. It’s pretty much the same onClick button system as I used in the meme soundboard. I did also use event listeners though, which wait for a key to be pressed. So you can use your text keyboard to play the piano. But I also didn’t map every key, it seems. And also, for some reason, when the note is pressed with your computer keyboard key, it doesn’t visually go down. But it visually goes down if you use your mouse to click on the key. So that’s weird.
In the Javascript, everything that isn’t the first 4 lines in that file was about mapping the computer keyboard so it would play the piano.
For some reason, I have an AJAX/JQuery download in my html head, but I don’t think those were used in this at all.
The piano shape was based on the piano we had to draw out of CSS in the FreeCodeCamp course. They don’t teach about how to turn it into an instrument, though. That was just putting rectangles next to each other. I had to learn about event listeners from StackOverflow quite a bit. And I spent a lot of time reading about them on MDN.
Leave a Reply