This originally started out as a small project shortly after I finished my coding bootcamp. I wanted to play around with the Web Audio API and realized that you could target SVG elements just like you could HTML elements. I then toyed around with the idea of adding the capability of recording inputs on the piano, but coming up with a data structure that could capture the richness of music and an appropriate user experience for editing music eluded me at the time.
Almost exactly six years later, my coworkers and I were setting up some cloud infrastructure and we talked about netmasks. They mentioned bitmasks so I went to look that up and found out about bit manipulation. It's not used so much today unless you're really trying to optimize things, do data compression, implement codecs, and so on. I thought about writing a JPEG decoder but I think that might be a bit beyond me at the moment. I then settled on writing a MIDI parser. While this MIDI parser is far inferior to freely-available libraries, it does successfully deserialize simple MIDI files and is integrated into this keyboard. I've found the MIDIs by Terry Smythe to work (naturally so, as I used those MIDI files to validate my work). The MIDIs by Smythe on kunstderfuge.com also work.
Piano sounds from https://theremin.music.uiowa.edu/MISpiano.html
Piano SVG Copyright 2005 by Lauri Kaila and licensed under the GNU Free Documentation License, Version 1.2. The original version covered one octave and was extended by me to an 88-key keyboard.
The preselected MIDIs are the ones I mentioned above by Terry Smythe.
You can see the very early proof-of-concept of this piano here.