Piano Player
The piano is a cool instrument. Creating its virtual world sibling is a cool experience too. Again being a UI application, a lot of thought has to go into making small usability enhancements that uplift the user engagement.
I’ll cover some of the crucial technical takeaways I had while making an app like the following.
The look
Giving a piano-like look, you would need two different colored blocks, the white ones, and the black ones.
The white blocks need to be placed next to each other. One way to make something like this is to have multiple equal dimension divs placed next to each other using the flexbox row layout.
The black blocks are the slightly tricky ones. They need to be floating on the top of the white divs at the specific intervals. To achieve this we can make use of the ‘absolute’ positioning.
A good bit of border and background will complete the rest of the look.
Key Assist
Showing the key names on the piano is a matter of personal preference. Some users prefer to have the key names displayed on them at the time of learning the piano. We can give a toggle option to let the user make this choice.
KeyPress
The keypress UX can be made a little more intuitive by something like the following.
Get Mehul Gala’s stories in your inbox
Join Medium for free to get updates from this writer.
When a key is pressed, and the display key option is OFF, we can momentarily display the key name on the div, and change the background color to give a ‘pressed’ feeling.
When a key is pressed, and the display key option is ON, we can momentarily scale the name of the key, and change the background color to give a ‘pressed’ feeling.
A similar thing can also be done on the black keys.
Playing a tune
Simplest of the task really. Every key is associated with a tune corresponding to that note.
We need to hook up the ‘click’ event on every block, make the Audio object on the fly, pass in the ‘note’ tune, and play it.
Playing a recorded Song
This one proved a little bit tricky for me.
White when the user is playing the piano on his own, he will press the keys one by one, and the tunes will be played synchronously. The developer is not supposed to design the playback speed. The user will do that.
But when a recorded song is being played, the developer has to decide the playback rate of every tune. We need to take into account a suitable pause between the notes.
You will venture into the amazing world of asynchronous Javascript.
JS has a timeout feature to do an action after a certain delay. But to handle so many keypresses using timeouts alone would result in the callback hell. So, I fell back to the async/await actions to solve this problem.
My Github repository of this app,
Here’s the Demo Link
Note: Unfortunately the Github page is not able to play the audio since it is meant for static hosting. To listen to music, you would need to download the app source code from the repository and run the index.html file locally in your browser.
As always, all contributors are welcomed. You can play around with this app, and add new features, new songs, whatever you wish to. All suggestions are welcomed too.
