Skip to Content

About

Over the years I developed various music representation tools for the web (e.g. fretboard.js ), that I used for tuition and self learning.

Finally I decided to gather and publish them as a monorepo in order to provide a shared build, release and type system.

Thanks to MDX  this documentation page serves directly as example showcase.

Rationale

The main reason behind the creation of the various keyboard, fretboard and score visualization libraries has been the authoring of music lessons and exercises, mostly in Markdown format.

There is so much quality video material nowadays, yet I think that we are losing the patience to gather information from a written source. Being able to listen to the music examples of an article can help filling the bridge between the printed and the digital medium.

Of course one can and should have the best of both worlds: videos where actual people show the physical articulation and how to phrase music and with whom one can bond over time, and curated text that is searchable and easy to maintain for the editors.

I opted mostly for a sober user interface without skeuomorphisms of sort, and I recommend to use the diagrams sparsely and not to build kitchen sinks that flood the user with all possible information at once (even though I needed to include some myself in the docs to show the software capabilities).

One last word to the learning musicians, and who isn’t one: focus on learning your major and minor scales inside out in all possible articulations (broken thirds, sixths, diatonic arpeggios, diatonic and chromatic enclosures…), before noodling over “exotic” scales, that I nevertheless included in the fretboard library.

The Author

My name is Diego, after a full-stack engineer career I am now both a programming and music educator.

You can learn more about me on my personal website .

Acknowledgments

  • abc.js  - the abc notation to SVG rendering engine;
  • Tonal.js  - the standard JavaScript music theory library;
  • Tone.js  - used for the playback engine.
Last updated on