vexchords
Version:
Javascript Chord Charts
359 lines (333 loc) • 9.23 kB
HTML
<html>
<head>
<title>The Little Chord Chart</title>
<link
href="https://fonts.googleapis.com/css?family=Lobster+Two|Bowlby+One+SC|Swanky+and+Moo+Moo|Marvel"
rel="stylesheet"
type="text/css"
/>
<link href="demo.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="vexchords.dev.js"></script>
</head>
<body>
<div class="topbar" style="clear:left; padding-top: 1px;">
<center>
<a href="https://github.com/0xfe/vexchords">fork me on github</a>
</center>
</div>
<div id="wrapper">
<center>
<h1>The Little Chord Chart</h1>
<div>
a <a href="http://vexflow.com">VexFlow</a> demo by
<a href="https://github.com/0xfe">0xfe</a>
</div>
</center>
<div id="container"></div>
<div style="clear:left; padding-top: 70px; font-size: 15px;">
<center>
Comments? Criticism? Contact me at
<a href="https://twitter.com/11111110b">@11111110b</a>.
</center>
</div>
</div>
<script>
const ChordBox = vexchords.ChordBox;
const chordChart = [
{
section: 'Open Chords',
description:
'These chords are played in open position, and generally ' +
'include open strings.',
chords: [
{
name: 'C Major',
chord: [[1, 0], [2, 1, '1'], [3, 0], [4, 2, 2], [5, 3, 3]],
position: 0,
barres: []
},
{
name: 'D Major',
chord: [
[1, 2, 2],
[2, 3, 3],
[3, 2, '1'],
[4, 0, 'D'],
[5, 'x'],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'E Major',
chord: [
[1, 0, 'E'],
[2, 0],
[3, 1, 1],
[4, 2, 3],
[5, 2, 2],
[6, 0, 'E']
],
position: 0,
barres: []
},
{
name: 'G Major',
chord: [
[1, 3, 4],
[2, 3, 3],
[3, 0, 'G'],
[4, 0],
[5, 2, 1],
[6, 3, 2]
],
position: 0,
barres: []
},
{
name: 'A Major',
chord: [
[1, 0],
[2, 2, 3],
[3, 2, 2],
[4, 2, 1],
[5, 0, 'A'],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'D Minor',
chord: [
[1, 1, 1],
[2, 3, 3],
[3, 2, 2],
[4, 0, 'D'],
[5, 'x'],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'E Minor',
chord: [
[1, 0],
[2, 0],
[3, 0],
[4, 2, 3],
[5, 2, 2],
[6, 0, 'E']
],
position: 0,
barres: []
},
{
name: 'A Minor',
chord: [
[1, 0],
[2, 1, 1],
[3, 2, 3],
[4, 2, 2],
[5, 0, 'A'],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'C7',
chord: [
[1, 0],
[2, 1, 1],
[3, 3, 4],
[4, 2, 2],
[5, 3, 3],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'D7',
chord: [
[1, 2, 3],
[2, 1, 1],
[3, 2, 2],
[4, 0, 'D'],
[5, 'x'],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'E7',
chord: [
[1, 0],
[2, 3, 4],
[3, 1, 1],
[4, 0],
[5, 2, 2],
[6, 0, 'E']
],
position: 0,
barres: []
},
{
name: 'G7',
chord: [[1, 1, 1], [2, 0], [3, 0], [4, 0], [5, 2, 2], [6, 3, 3]],
position: 0,
barres: []
},
{
name: 'A7',
chord: [
[1, 0],
[2, 2, 3],
[3, 0],
[4, 2, 2],
[5, 0, 'A'],
[6, 'x']
],
position: 0,
barres: []
},
{
name: 'Dm7',
chord: [[3, 2, 2], [4, 0], [5, 'x'], [6, 'x']],
position: 0,
barres: [{ fromString: 2, toString: 1, fret: 1 }]
},
{
name: 'Em7',
chord: [
[1, 0],
[2, 3, 4],
[3, 0],
[4, 0],
[5, 2, 1],
[6, 0, 'E']
],
position: 0,
barres: []
},
{
name: 'Am7',
chord: [
[1, 0],
[2, 1, 1],
[3, 0],
[4, 2, 2],
[5, 0, 'A'],
[6, 'x']
],
position: 0,
barres: []
}
]
}
];
const chords = [];
function createChordElement(chordStruct) {
const chordbox = $('<div>').addClass('chord');
const chordcanvas = $('<div>');
const chordname = $('<div>').addClass('chordname');
chordbox.append(chordcanvas);
chordbox.append(chordname);
chordname.append(chordStruct.name);
chords.push({
el: chordcanvas[0],
struct: chordStruct
});
return chordbox;
}
function createSectionElement(sectionStruct) {
const section = $('<div>').addClass('section');
const sectionTitle = $('<div>').addClass('title');
const sectionDesc = $('<div>').addClass('description');
section.append(sectionTitle);
section.append(sectionDesc);
sectionTitle.append(sectionStruct.section);
sectionDesc.append(sectionStruct.description);
return section;
}
function createShapeChart(keys, container, shapes, shape) {
for (let i = 0; i < keys.length; i += 1) {
const key = keys[i];
const section = createSectionElement({
section: `${key} Chords (${shape} Shape)`,
description: `${shape}-Shaped barre chords in the key of ${key}.`
});
for (let j = 0; j < shapes.length; j += 1) {
const chordElem = createChordElement(
vexchords.build(key, shape, shapes[j])
);
section.append(chordElem);
}
container.append(section);
}
}
function init() {
var container = $('#container');
// Display preset chords (open chords)
for (var i = 0; i < chordChart.length; ++i) {
var section_struct = chordChart[i];
var section = createSectionElement(section_struct);
for (var j = 0; j < section_struct.chords.length; ++j) {
section.append(createChordElement(section_struct.chords[j]));
}
container.append(section);
}
// Display shape chords for all keys
var keys_E = ['F', 'F#', 'Gb', 'G', 'G#', 'Ab', 'A', 'A#', 'Bb', 'C'];
var keys_A = ['C#', 'Db', 'D', 'D#', 'Eb', 'F', 'F#', 'Gb', 'G'];
var shapes_E = [
'M E',
'm E',
'7 E',
'm7 E',
'M7 E',
'm7b5 E',
'dim E',
'sus4 E',
'7sus4 E',
'13 E'
];
var shapes_A = [
'M A',
'm A',
'7 A',
'm7 A',
'M7 A',
'm7b5 A',
'dim A',
'sus2 A',
'sus4 A',
'7sus4 A',
'9 A',
'7b9 A',
'7#9 A',
'13 A'
];
createShapeChart(keys_E, container, shapes_E, 'E');
createShapeChart(keys_A, container, shapes_A, 'A');
// Render chords
chords.forEach(chord => {
new ChordBox(chord.el, {
width: 130,
height: 150,
defaultColor: '#444'
}).draw(chord.struct);
});
}
$(function() {
init();
});
</script>
</body>
</html>