Obviously there are a lot of piano apps already in the app store, but it's not the same as making your own. We couldn't use Scratch for this project since we wanted to run it on the iPad, so I decided that it would be interesting to see how easy it would be to implement it with web technologies (which I'm already familiar with) and let Kaisla see what "real" code is like. This meant that I did most of the actual coding, but it was still a fun project we did together and I learned some new things along the way and Kaisla seemed to enjoy working on the app also.
We made a few different color schemes for the keys, one with the same colors as the xylophone, so she could play the songs she had learned right away. It's actually almost a year already since we made the first version of the app, but Kaisla and her little sister have enjoyed playing it so we have added more songs to it every now and then. Kaisla has even composed one song of her own, and of course wanted that we add it to the app.
 |
| Toy Piano app |
You can try it out at: http://cvuorinen.github.io/react-toy-piano
Works best on a touch screen device with a large screen, such as iPad or other tablet. Also works on phones, but has less keys (only one octave) so it's not possible to play all the songs. Add to homescreen for a better experience. Works also on computer, but it's not really fun to play with the mouse.
For anyone interested in the technical side, here is a summary of the technologies used in this project: The user interface is built with React and sounds are produced with Tone.js. The notes are regular UTF-8 characters, the font is FreeSerif and the layout is constructed using CSS flexbox.
Source code available at https://github.com/cvuorinen/react-toy-piano
