Chords.io is a small jQuery plugin to display guitar chords using Raphaël SVG library.
Chords.io does not know any chord shapes or names so you will have to provide it with all the data.
HTML
<div data-code="xo221o" data-name="Am" />
<div data-code="x32o1o" data-name="C" />
<div data-code="133211_3" data-name="G" />
JS
$('div').chordsIO();
Result
Check out http://guitarparty.github.com/chords.io/
- Consider using something other than
data-attributes. The name of the chords should probably be a text within the element. - Listen for changes on elements and redraw the chords