allardquek / hit-the-right-note

Effortless piano playing.

hit the right note

hit (or strike) the right (or wrong) note: to say or do something in exactly the right (or wrong) way.

Always wanted to play the piano but never know what notes to hit? It's simple 😌

1. Use the 8 s to l keys on your keyboard ⌨️ to play the piano.

2. Hold the space bar 🌌 to sustain the notes (It's your sustain pedal!)

3. Play any note, in any order, and enjoy the music 🎶

Inspiration

I've always wanted to play the piano (well), but never had the time or talent to do it 😔 At the same time, I wanted this project to also have a deeper meaning behind it, which I'll explain below.

What it does

Generates piano notes according to the keys the user presses.

How I built it

This project is a remix of Piano Genie. The music generation is implemented using a pre-trained Magenta model that was trained on a set of ~1400 virtuosic performances from the International Piano-e-Competition.

Specifically, I worked on redesigning the colour scheme and adding my own (simplified) image of a 'piano':

1. Colours: The colours chosen represent 8 of the colours of the new Pride Flag
2. Symbol: The choice of symbol as the unicorn stems from unicorns being a symbol of LGBT culture.

Challenges I ran into

1. Learning / doing everything on my own as I wasn't able to find teammates who were able to commit to this project.
2. Managing time constraints. Only started working on the project really late (around 10pm) due to other commitments.
3. CSS! It was difficult trying to align the elements and getting the effect I really wanted, and had to come up with some workarounds at some points.
4. Understanding code. As this project builds on a previous implementation, I had to read and understand what the previous author had written and remove any unnecessary or irrelevant parts to my project.
5. Version control with Glitch. It was my first time developing in Glitch and I only realised later on that there was no branching feature like in Git. When things went wrong, this resulted in me 'rewinding' (i.e. resetting) my code a few times and having to redo some parts of the project.

Accomplishments that I'm proud of

1. Completing some MVP despite the limited time and resources I had :)
2. Getting some sleep..?

What I learned

1. CSS! Picked up a couple of cool CSS tricks along the way
2. Developing in Glitch
3. Some understanding on how Music Generation works

What's next for Hit The Right Note

1. Providing support for different instruments.
2. Implementing Tone Transfer for output generated
3. Providing UI support for more piano notes (Unicorns) so that users can see the notes rising even higher and even lower.