vexchords
Version:
Javascript Chord Charts
128 lines (118 loc) • 2.85 kB
HTML
<html>
<head>
<title>
VexChords Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link
href="http://fonts.googleapis.com/css?family=Lobster+Two|Bowlby+One+SC|Swanky+and+Moo+Moo|Marvel"
rel="stylesheet"
type="text/css"
/>
<script src="vexchords.dev.js"></script>
</head>
<body>
<div id="drawing" style="text-align: center;"></div>
<div id="drawing2" style="text-align: center;"></div>
<script>
const sel = document.getElementById('drawing');
const draw = vexchords.draw;
draw(sel, {
chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x']]
});
draw(
sel,
{
chord: [[1, 0], [2, 0], [6, 0]],
position: 0,
barres: [{ fromString: 5, toString: 3, fret: 2 }]
},
{ bridgeColor: '#8a8', textColor: '#8a8' }
);
// Tiny
draw(
sel,
{
chord: [],
position: 1,
barres: [
{ fromString: 6, toString: 1, fret: 1 },
{ fromString: 5, toString: 3, fret: 3 }
]
},
{
width: 30,
height: 40,
strokeColor: '#745',
showTuning: false
}
);
draw(
sel,
{
chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x']]
},
{
width: 50,
height: 60,
showTuning: false
}
);
draw(
sel,
{
chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x']]
},
{
width: 30,
height: 40,
showTuning: false
}
);
// 7 string
draw(
sel,
{
chord: [[1, 2], [2, 1], [3, 2], [4, 0], [5, 'x'], [6, 'x'], [7, 1]],
tuning: ['B', 'E', 'A', 'D', 'G', 'B', 'E']
},
{ numStrings: 7 }
);
// Stretch chord
draw(
sel,
{
chord: [[3, 3], [4, 5], [5, 7], [6, 'x']],
position: 5,
barres: [{ fromString: 6, toString: 1, fret: 1 }]
},
{ height: 140, numFrets: 8, strokeColor: '#8a8' }
);
// Big
draw(
'#drawing2',
{
chord: [[1, 2, 2], [2, 1, 1], [3, 2, 3], [4, 0], [5, 'x'], [6, 'x']]
},
{ width: 180, height: 220, defaultColor: '#745' }
);
// Bass
draw(
'#drawing2',
{
chord: [[1, 2, 'F#'], [2, 3, 'D'], [3, 2, 'A'], [4, 0]]
},
{
width: 180,
height: 220,
numStrings: 4,
defaultColor: '#37a',
strokeWidth: 2,
fretWidth: 2,
fontWeight: 'normal'
}
);
</script>
</body>
</html>