It has been a while since my last article. Well, I have been busy working and all. But meanwhile, I am finally doing something a bit different this time! I wanted to go back to piano practice, sight reading, etc.
A new idea sparked into my mind, why not make a piano learning app? Bunch of ideas started sparking till my brain was full of fireworks and had to light down some ideas and maintain the ones I can prototype faster.
I have been trying to build a proof of concept for this app, and decided that it will be based on web technologies (even desktop apps are web pages right now, right slack? right VS Code?), thus I went for Electron and React.
Interfacing with my Piano
The main reason I wanted to app to be based on electron, is to be able to use native modules. Obviously the most important thing is MIDI I/O. Turns out, there is a web standard for that. Oh lord web is taking over. Still, it is extremely cool and easy. The specification for web midi is available here: http://webaudio.github.io/web-midi-api/. It is not 100% supported by all platforms,
Before we dive into details, let check its compatibility with the browsers
Since I am using Electron which is chrome based, I can stop worrying about this issue.
making web apps that works only specific browsers and rejecting others is a bad thing for me. If it is non-standard, I would rather make it a desktop app. I use only Mozilla Firefox browser, at least it cares about my privacy 🙂
Development Progress
Here is the development progress:
Here is a demo I’ve recorded on day 7. Pressing the virtual keyboard wont do not anything, you have to press the right keys on your Piano (or a virtual keyboard on your android, if you connect it as a Midi device)
And the newest audio playback feature! Still need auto-scrolling and better, more natural sound.
Unfortunately, the app is still in its early stages, will not be available until a couple of months. This is only a proof of concept, coded in my spare time. Hope I justified all this time I spent away from my blog 🙂
