Code Self Study Forum

Displaying Guitar Chord Diagrams with JavaScript and Python

I'm looking around for libraries for music notation, especially guitar chord diagrams. I'll post some links to ones I've found so far.

I’m writing for the browser, so most of these use JS, but something that renders them as SVG images before sending them to the browser would also work. Edit: I added some Python libraries too.

JavaScript

Vex Chords

This one outputs SVG and seems to have a lot of options available.

An excerpt of some sample code:

chord.draw({
  // array of [string, fret, label (optional)]
  chord: [
    [1, 2],
    [2, 1],
    [3, 2],
    [4, 0], // fret 0 = open string
    [5, 'x'], // fret x = muted string
    [6, 'x']
  ],

  // optional: position marker
  position: 5, // start render at fret 5

  // optional: barres for barre chords
  barres: [
    { fromString: 6, toString: 1, fret: 1 },
    { fromString: 5, toString: 3, fret: 3 }
  ],

Code: GitHub - 0xfe/vexchords: JavaScript Chord Charts
Demo: The Little Chord Chart

raphael.chord.js

This one renders the chords as SVG using Raphael.js.

Sample code:

Raphael.chord('div1', [-1,  3,  2,  0,  1,  0], 'C maj');
Raphael.chord('div1', [-1, -1,  0,  2,  3,  2], 'D maj');
Raphael.chord('div1', [ 0,  2,  2,  1,  0,  0], 'E maj');
Raphael.chord('div1', [ 1,  3,  3,  2,  1,  1], 'F maj');
Raphael.chord('div1', [ 3,  2,  0,  0,  0,  3], 'G maj');
Raphael.chord('div1', [-1,  0,  2,  2,  2,  0], 'A maj');
Raphael.chord('div1', [-1,  2,  4,  4,  4,  2], 'B maj');

Code: http://github.com/justindarc/raphael.chord.js
Demo: raphael.chord.js Demo

MUSIQ

This open-source MIT-licensed library is your swiss knife of musical analysis. It allows you to descibe notes, intervals, chords, scales and other concepts used in musical theory.

This one looks pretty comprehensive. I don’t see sample output, but the docs for the guitar chords are here. The screenshot is from their interactive guitar tool.

An interesting thing about the fretboard diagrams is that the intervals are represented by shapes with the number of edges as their interval. 3rds are triangles, 5ths are pentagons, etc. In the image above, a 4th is a square, and a ♭5 is a square is a square rotated to a diamond. (Should it be a rotated pentagon? B to F is five note names. :thinking:)

Website: http://musiqlab.alexrulkens.com/

ChordJS

This one uses HTML5 canvas.

ChordJS

Sample code:

<chord name="D" positions="xx0232" fingers="---132" size="3"></chord>
<chord name="A" positions="x02220" fingers="--123-" size="3"></chord>
<chord name="A_5" positions="577655" fingers="134211" size="3"></chord>
<script>ChordJS.replace();</script>

Code: GitHub - acspike/ChordJS: Draw guitar chord diagrams on HTML5 canvas

Vue Chords

This library works with Vue.js. The chords are rendered as HTML (divs) or images.

Vue Chords

The chords are Vue components:

<vc-chord-diagram /> 

Website: https://vc-chord-diagram.wemakesites.net/

jTab

This is a library for tablature and SVG guitar chords. It uses Raphael.js under the hood.

jTab

Sample format:

%Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger.Fret/Finger[Name]

which would be this for a Bm7♭5 chord:

%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]

Website: https://jtab.tardate.com/

ChordSheetJS

This is a JS library to interact with ChordPro, a Perl program that generates sheets of lyrics with chords.

Sample code:

const chordSheet = `
       Am         C/G        F          C
Let it be, let it be, let it be, let it be
C                G              F  C/E Dm C
Whisper words of wisdom, let it be`.substring(1);

const parser = new ChordSheetJS.ChordSheetParser();
const song = parser.parse(chordSheet);

Code: GitHub - martijnversluis/ChordSheetJS: A JavaScript library for parsing and formatting ChordPro chord sheets

ChordialJS

Creates chord charts for the Web using HTML5 canvas.

image

Sample code:

var defs= [];
for (var note in ChordialJS.data.scales.major) {
    var ch= ChordialJS.data.scales.major[note];
    defs.push({ note: ch[0][0] });
    defs.push({ note: ch[3][0] });
    defs.push({ note: ch[4][0] });
}
ChordialJS.renderChords(container, defs);

Code: GitHub - laher/ChordialJS: Chord chart utility for web. Make progressions and interactive tabluation apps
Demo: ChordialJS

SVGuitar

A TypeScript library that outputs SVG with a lot of available options.

Sample code:

import { SVGuitarChord } from 'svguitar'

const chart = new SVGuitarChord('#chart')
    
// draw the chart
chart.configure({/* configuration */})
      .chord({/* chord */})
      .draw();

Code: GitHub - omnibrain/svguitar: Create beautiful SVG guitar chord charts

Fretboards

Creates SVG fretboards.

Sample code:

// Layout a specific scale
var fb = fretboard.Fretboard();
fb.add("a phrygian").paint();

// Use alternative tunings
var fbDropD = fretboard.Fretboard({ tuning: fretboard.Tunings.guitar6.Drop_D });
fbDropD.add("a phrygian").paint();

// Place specific notes on specific strings, e.g. for chord voicings
var c7add9 = fretboard.Fretboard({ frets: 5 });
c7add9.add("5:c3 4:e3 3:bb3 2:d4 1:g4").paint();

Code: GitHub - txels/fretboards: Display fretboards on a browser using Javascript
Demo: https://fretboard.txels.com/demos/dynamic.html

Python

Lilypond

I was hoping that Lilypond had a way to do it, because Lilypond output tends to look great, but I could only find examples of printing chord names. Edit: see “fret diagrams” below.

lilypond output with chords

Sample code:

chordmusic = \relative {
  <c' e g>2 <f bes c>
  <f c' e g>1
  \chordmode {
    c2 f:sus4 c1:/f
  }
}
<<
  \new ChordNames {
    \chordmusic
  }
  {
    \chordmusic
  }
>>

http://lilypond.org/doc/v2.19/Documentation/notation/displaying-chords

Edit: See this page.

Lilypond Fretboards

Check out this repo for some Lilypond code examples.

The FretBoards section says “not documented”, but there are some pages with information here and here. There’s also a page that mentions integrating it with Python here.

Fretboardgtr

This Python library generates SVG files.

Python Fretboard chord

Sample code:

from fretboardgtr import ScaleGtr

F = ScaleGtr(scale=["G","A","B","C","D","E","F#"],root="G")
F.customtuning(['E','A','D','G','B','E'])
F.draw()
F.save()

Code: GitHub - antscloud/fretboardgtr: Python package for creating fretboard and chord diagram image in svg format

Python Fretboard

This Python library generates SVG files.

Sample code:

# D major
chord = fretboard.Chord(positions='xx0232', fingers='---132')
chord.save('svg/D.svg')

# pentatonic scale shape
fb = fretboard.Fretboard(frets=(5, 8), style={'marker': {'color': 'dodgerblue'}})
fb.add_marker(string=0, fret=5, label='A', color='chocolate')
fb.add_marker(string=1, fret=5, label='D')
fb.add_marker(string=2, fret=5, label='G')
fb.add_marker(string=3, fret=5, label='C')
fb.add_marker(string=4, fret=5, label='E')
fb.add_marker(string=5, fret=5, label='A', color='chocolate')

fb.add_marker(string=0, fret=8, label='C')
fb.add_marker(string=1, fret=7, label='E')
fb.add_marker(string=2, fret=7, label='A', color='chocolate')
fb.add_marker(string=3, fret=7, label='D')
fb.add_marker(string=4, fret=8, label='G')
fb.add_marker(string=5, fret=8, label='C')
fb.save('svg/pentatonic-shape.svg')

Code: GitHub - dmpayton/python-fretboard

ThatChord

A Python script for generating chords.

It outputs text:

   x
   ===========        x           
   | | | | O |      5 | | | O | O      8 O | | | | | 
   | | O | | |        | | | | | |        | | | O | O 
   | O | | | |        | | O | | |        | | | | | | 
   | | | | | |        | O | | O |        | | | | | | 
   | | | | | |        | | | | | |        | | | | | |  

or simple PNG images:

ThatChord

Code: GitHub - tomcontileslie/ThatChord: ThatChord shows you how to play any chord, on any instrument.

After looking at them for a while, trying to condense them down to just a few choices, these ones look the most interesting:

Vex Chords

The Vex Chords code examples look easy to write, the output looks great, and it has many configuration options.

Fretboards

For frontend-generated JS-based fretboards, Fretboard looks good.

Fretboardgtr

For SVG fretboards, the Fretboardgtr Python library looks good.


These other ones aren’t quite what I’m looking for, but they look like they would be useful for certain tasks:

Lilypond

For sheet music, Lilypond produces great output.

ChordPro

ChordPro looks great for text-based lyrics with chords.

This MuseScore plugin was mentioned in chat: