The problem with every other piano website was that they were just too unnatural. They were cluttered with popups and ads, lacking any composing tools, and, worst of all, the keyboard-to-piano mapping felt awkwardly…wrong.
My initial goal for creating this website was to overcome these problems and create
a website I could use regularly. I needed to build a simple piano website with intuitive
key mapping and some trusty composing supports.
my plan
Every good project starts with a hurriedly jotted-down plan. Here's mine.
A piano with keys that actually fit!
Note history: a log of notes that are played, solving the inevitable tragedy of forgetting that amazing melody you just played.
Chord identifier: so you don't have to work out that it's an A# M9sus4/C by yourself.
Scale indicator: highlights the diatonic notes of your chosen scale (we all forget sometimes…)
problems faced and lessons learnt
My first problem was getting the layout correct. Getting just the right widths and
margins took me longer than I'd like to admit… However, I'm a lot more comfortable
with positioning things using CSS than I was before that gruelling experience.
At one point, there was a bug where holding a note for long enough would make the
note history rapidly log the same note over and over (and make everyone stressed).
Figuring out the logic needed to fix this taught me about objects in JavaScript,
a variable type I had completely ignored before this!
I learnt a lot about Tonaljs, which was instrumental in making the
chord identifier and scale indicator.
to-do
Add a metronome
Add a recording + export feature
I’ll keep adding to this; in the meantime, go check out the site!