Ever wanted to learn how to play the piano but either can't afford a real one? Well why not give jsPiano a try and unlock your hidden musical talents. Disclaimer: Does not actually teach you how to play the piano 😁.
The goals of this project were as follows:
- Using only HTML, CSS & JS, create a site that allows a user to play a musical instrument
- Demonstrate the ability to capture input and produce appropriate output
I picked the piano because I'm attempting to learn that myself (semi-successfully) so just felt appropriate. The challenge however was to be able to fit the necessary amount of keys in a way that would make sense to the user. I settled on using the middle row of keys on the keyboard (a-#) for the major keys, and using the above row for the minor keys (trying to match them to their major equivalent where possible). This resulted in a note range of e3 to b4. Admittedly not the deepest key range, but it is at least able to accomplish the aims of the project.
Special thanks to TEDAgame from Freesound for providing sample recordings that were used on the site which can be found here.