Online Piano
A one-octave piano (C to B, including sharps) built with plain HTML, CSS and JavaScript. Play it by clicking the keys or with your computer keyboard.
- HTML
- CSS
- JavaScript
This project is a practice run of a sample front-end interview question I found online: "Build a playable piano in the browser using only vanilla HTML, CSS and JavaScript." The question forbids frameworks, libraries and build tools, so it tests DOM layout, event handling and a bit of state management with nothing to lean on.
Some notes: this project was completed in a very limited timeframe and therefore isn't as polished as it could be. The piano is only one octave, and the keys are a bit small on mobile. The audio is generated with the the JS Audio API without preloading any of the sound files, so the first note played may be delayed while the browser fetches the audio.