Raphaël is a small JavaScript library that simplifies work with vector graphics on the web. The raphael.chord.js plugin provides a simple interface for drawing guitar chords in a familiar notation to all guitarists. This plugin also includes a database of all of the common chords and a large number of uncommon chords with several variations of each.
raphael.chord.js can be downloaded from a .zip or .tar archive here:
or
Download the source or fork it from the GitHub project page here.
The only pre-requisite for using raphael.chord.js is the Raphaël library itself which can be found here.
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="raphael.chord.js"></script>
These <script/> tags should be included within the <head/> section of the page.
Any chord can be specified by providing an array of six numbers indicating the fret values for the six strings (E, A, D, G, B, E). A "-1" value indicates a muted string and a "0" value indicates an open string. In addition, a string should be specified to indicate the name of the chord that appears on the label.
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');
To ensure the Raphaël library and the raphael.chord.js plugin have loaded and the DOM is ready, these calls should be encapsulated in a function bound to the window.onload event.
The six fret values can be looked up in the database using the Raphael.chord.find() method. This method takes the name of the chord and the type as its arguments and returns an array of six numbers. This approach still requires that a string is provided for the chord's label.
Raphael.chord('div2', Raphael.chord.find('C#', 'maj'), 'C# maj');
Raphael.chord('div2', Raphael.chord.find('D#', 'maj'), 'D# maj');
Raphael.chord('div2', Raphael.chord.find('F#', 'maj'), 'F# maj');
Raphael.chord('div2', Raphael.chord.find('Ab', 'maj'), 'Ab maj'); // Ab == G#
Raphael.chord('div2', Raphael.chord.find('G#', 'maj'), 'G# maj'); // G# == Ab
Raphael.chord('div2', Raphael.chord.find('Bb', 'maj'), 'Bb maj'); // Bb == A#
Raphael.chord('div2', Raphael.chord.find('A#', 'maj'), 'A# maj'); // A# == Bb
Notice that in the case of sharp or flat chords, the chord can be looked up either way and will still yield the same result.
In most cases, any given chord has several variants. The Raphael.chord.find() method takes an optional third argument that is a number indicating the variant. The default value for this argument is "1" and the maximum value depends on the number of possible variants.
Raphael.chord('div3', Raphael.chord.find('C#', 'maj', 1), 'C# maj'); // 1st variant
Raphael.chord('div3', Raphael.chord.find('C#', 'maj', 2), 'C# maj'); // 2nd variant
Raphael.chord('div3', Raphael.chord.find('C#', 'maj', 3), 'C# maj'); // 3rd variant
Raphael.chord('div3', Raphael.chord.find('C#', 'maj', 4), 'C# maj'); // 4th variant
Raphael.chord('div3', Raphael.chord.find('C#', 'maj', 5), 'C# maj'); // 5th variant
If the number specified for the variant exceeds the total number of variants, the highest-numbered variant is returned.
Unless the desired chord is not in the database, this is the preferred way of interfacing with the plugin. Instead of manually looking up the chord data and providing a label, you simply provide the name and type of the chord as a single string.
Raphael.chord('div4', 'C min');
Raphael.chord('div4', 'D min');
Raphael.chord('div4', 'E min');
Raphael.chord('div4', 'F min');
Raphael.chord('div4', 'G min');
Raphael.chord('div4', 'A min');
Raphael.chord('div4', 'B min');
Ensure that there is a space between the name and type. For example, 'Cmin' would not yield a result but, 'C min' would.
Raphael.chord('div5', 'C# min');
Raphael.chord('div5', 'D# min');
Raphael.chord('div5', 'F# min');
Raphael.chord('div5', 'Ab min'); // Ab == G#
Raphael.chord('div5', 'G# min'); // G# == Ab
Raphael.chord('div5', 'Bb min'); // Bb == A#
Raphael.chord('div5', 'A# min'); // A# == Bb
To access the variants using the preferred method, simply pass the numeric variant value in as the third argument.
Raphael.chord('div6', 'A# min', 1);
Raphael.chord('div6', 'A# min', 2);
Raphael.chord('div6', 'A# min', 3);
Raphael.chord('div6', 'A# min', 4);
Raphael.chord('div6', 'A# min', 5);
Raphael.chord('div6', 'A# min', 6);
Raphael.chord('div6', 'A# min', 7);
The same rules apply for accessing the variants this way as they do when accessing them by manual look-up.
Here is a comprehensive list of all the other possible types that are available in the database. Any chords absent from the database can still be drawn by manually providing the fret values using the first method.
Raphael.chord('div7', 'C 5');
Raphael.chord('div7', 'D 6');
Raphael.chord('div7', 'E 7');
Raphael.chord('div7', 'F maj7');
Raphael.chord('div7', 'G 9');
Raphael.chord('div7', 'A maj9');
Raphael.chord('div7', 'B 11');
Raphael.chord('div8', 'C# 13');
Raphael.chord('div8', 'D# maj13');
Raphael.chord('div8', 'F# min6');
Raphael.chord('div8', 'G# min7');
Raphael.chord('div8', 'A# min9');
Raphael.chord('div9', 'C min11');
Raphael.chord('div9', 'D min13');
Raphael.chord('div9', 'E min(maj7)');
Raphael.chord('div9', 'F sus2');
Raphael.chord('div9', 'G sus4');
Raphael.chord('div9', 'A dim');
Raphael.chord('div9', 'B aug');
Raphael.chord('div10', 'C# 6/9');
Raphael.chord('div10', 'D# 7sus4');
Raphael.chord('div10', 'F# 7b5');
Raphael.chord('div10', 'G# 7b9');
Raphael.chord('div10', 'A# 9sus4');
Raphael.chord('div10', 'C add9');
Raphael.chord('div10', 'D aug9');
Here is a demonstration of some chords rendered at various sizes.
Raphael.chord('div11', 'C maj').element.setSize(800, 800);
Raphael.chord('div11', 'C maj').element.setSize(275, 275);
Raphael.chord('div11', 'C maj').element.setSize(200, 200);
Raphael.chord('div11', 'C maj').element.setSize(150, 150);
Raphael.chord('div11', 'C maj').element.setSize(75, 75);