5 June 2019

Introducing MoonPiano

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.

MoonPiano Logo! I take pride into designing that darkmoon Logo.

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

MIDI Access and other features’ browsers compatibility, benchmarks by Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/MIDIAccess#Browser_compatibility

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:

Day 1
Day 2
Day 4
Day 6, after trying many music notation rendering tools
Day 8, music notes are now highlighted in the virtual keyboard, and you have to press them to advance the cursor to next notes, and so on! (Yes that’s Moonlight Sonata 3rd Movement)

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 🙂

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *