This web app is designed as a toolkit for midi-guitar playalong and reharmonization 🌟
Both the fretboard and midi note editor components render through a custom webgl2 implementation. Check out (and/or steal for your own usage) the Midi Piano Roll component here:
Try it out with this midi file: Debussy: Arabesque
The interface is designed to be as intuitive as possible. All aspects of the fretboard including scale length and string count are controllable with the settings in the left sidebar. All sections of the app can be resized at the dividers. The center section is a simple text endpoint listing the selected notes in order.
Keyboard shortcuts for the Midi Piano Roll:
| Action | Shortcut |
|---|---|
| Add Note | Double Click Canvas |
| Select All | Ctrl + A |
| Select Notes | Click Canvas + Drag Cursor |
| Translate Selected Notes | Click Note + Drag Cursor |
| Turn Off Snap to Grid | Shift + Drag Cursor |
| Delete Selected Notes | Del |
| Add/Remove Note from Selection | Ctrl or Shift + Click Note |
| Clone | Ctrl + Drag selected notes |
| Copy | Ctrl + C |
| Cut | Ctrl + X |
| Paste | Ctrl + V |
| Undo | Ctrl + Z |
| Redo | Ctrl + Y |
| Zoom to Cursor | Scrollwheel or Trackpad |
| Zoom X | Shift + Scrollwheel or Trackpad |
| Zoom Y | Ctrl + Scrollwheel or Trackpad |
To do: -implement mac-friendly keyboard shortcuts. -rewrite and optimize scale lookup function -add midi and fretboard audio playback -centralize surface-layer UI state management: presently the app will prioritize selected notes on piano roll, and you need to deselect notes to be able to change the marker stylings for the non-selected intervals
