Kind of a nerdy music crossover...

Wanted to share a project I've been working on, more as a component of a larger one but largely a standalone. As an amateur musician, I've been looking for ways of displaying custom chord diagrams inline (for example, in TAB music charts). The `svguitar` library is pretty effective, but it requires a fair knowledge of js to implement it - not really a "plug and play option".

So I built the thing. With this, I can `<chord-diagram instrument="Standard Mandolin" chord="Dm7"></chord-diagram>` in the HTML and all the js contained. It includes some logic (lazy logic) to generate chords dynamically, but it also includes a chord editor - and the way I've built it, it looks first for a user override, then a system override, and only if it doesn't find those does it use the dynamic utility.

It's a Custom Web Component built with Lit.js, it can be standalone or used as part of a contextual system (so if a user is logged in, there can be a user context).

If any of y'all are interested, https://github.com/parent-tobias/chord-component - feel free to beat on it and use it if you have an application for it.

0 comments