Generating guitar chord diagrams
One day I wanted to add a feature to Guitar Unleashed which exists in some of the better guitar tab sites. When a user hovers over a chord, they are shown a diagram representing the guitar fret with overlaid finger positions required to produce this chord. Many of the most popular sites do this by showing a crude, plain-text representation of the chord.
For example, a C chord is shown as follows:
e ---|---|---|---|---| B -x-|---|---|---|---| G ---|---|---|---|---| D ---|-x-|---|---|---| A ---|---|-x-|---|---| E ---|---|-o-|---|---|
Typeset guitar chord representation looks very different. Two most popular variants of the C chord would appear above the staff with small symbols that look something like this:
Such images have many benefits as compared to the plain text version:
- Convention: many guitar players are used to learning from sheet music, so this chord notation is familiar to them.
- Readability: the image representation is more compact and more pleasant to read.
- Completeness: the image version has an easy way to display barre chords and specify fingerings (not pictured)
From some brief research, I decided that lilypond fret diagrams are the most elegant way of creating such images. The alternative was to use GCHORDS whose output I liked less, and which required depending on TeX. Typically lilypond typesets an entire piece of sheet music on a staff, with clefs, key signatures, etc. After discovering a really great lilypond bundle for textmate, I managed to get rid of these unnecessary features and display just a fret diagram. The following python-parametrized lilypond template does the trick:
\include "lilypond-book-preamble.ly" \version "2.10.0" \markup \fret-diagram-terse #"%(chord_markup)s"
Then, using lilypond's fret diagram encoding, a python script replaces
%(chord_markup)s with the desired markup. Lilypond's markup is very
terse but mostly manageable. Sample markup for a C chord looks like
x;3;2;o;1;o;, while the barre version looks a little bit more
bizarre, like this:
My python program contains a list of chord shapes for the most popular chords, encoded in the manner above, then outputs images for each chord and variant into a directory. I've made it available for download, in case your next project needs generated fret diagrams with a highly customizable look. You can also see the diagrams live at guitarunleashed.com.