A JavaScript- & synesthetic-based client-side app for rendering a digital piano and tablature in color, suitable for teaching and learning music theory and piano
synesthesia: a cross-wiring of different senses in the brain, sometimes experienced as seeing different notes as different colors (for example, composer Franz Liszt)
vexflow by 0xfe is the basis for the tablature-rendering code for HTML5 canvas; my own work from vexflow-syn was re-used here to add the synesthetic effects
Navigator-MIDI-Visuals by ScottMorse is the basis for the visual keyboard I'm using but I'm so many commits ahead that I've broken away from that fork, to be honest
The Chrome browser has a bleeding-edge feature that allows access to a MIDI device. As of this version, there is no support in any other browser so this is a requirement.
First create an alias so that you can run Chrome URLs from the command line. Make sure that you've installed Chrome, of course.
nano ~/.bash_profile
Add this:
alias cchrome='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security'
...and start a new Terminal session to have this new alias available.
cd ~/sites
git clone --depth=1 https://github.com/OutsourcedGuru/syn-midi.git
cd syn-midi
cchrome index.html
- The underlying vexflow library has a problem displaying two sharps in the same chord which are close to each other, for what it's worth.
The underlying vexflow-syn code fully supports some great-looking tablature, as seen below.
| Description | Version | Author | Last Update |
|---|---|---|---|
| syn-midi | v1.4 | OutsourcedGuru | May 23, 2019 |
| Donate | Cryptocurrency | |
|---|---|---|
 |
 |
|
| Ethereum | Bitcoin |