vexchords
Version:
Javascript Chord Charts
71 lines (53 loc) • 2.1 kB
HTML
<html>
<head>
<title>The Little Chord Chart</title>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two|Bowlby+One+SC|Swanky+and+Moo+Moo|Marvel' rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>
<script src="js/support/jquery-1.6.2.min.js"></script>
<script src="js/support/raphael-min.js"></script>
<script src="js/chord.js"></script>
<script src="js/chart.js"></script>
<script>
function init() {
var container = $("#container");
// Display preset chords (open chords)
for (var i = 0; i < chord_chart.length; ++i) {
var section_struct = chord_chart[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");
}
$(function() { init() });
</script>
</head>
<body>
<div class="topbar" style="clear:left; padding-top: 1px;">
<center><a href="http://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="http://0xfe.blogspot.com">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="http://0xfe.blogspot.com">0xfe.blogspot.com</a>.</center>
</div>
</div>
</body>
</html>