|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon"/> |
|
|
<link rel="stylesheet" href="examples-styles.css"/> |
|
|
|
|
|
<title>abcjs: Basic Demo</title> |
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<script type="text/javascript"> |
|
|
var abc = "X:1\n" + |
|
|
"T: Cooley's\n" + |
|
|
"M: 4/4\n" + |
|
|
"L: 1/8\n" + |
|
|
"R: reel\n" + |
|
|
"K: Emin\n" + |
|
|
"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" + |
|
|
"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" + |
|
|
"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" + |
|
|
"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|\n\n" + |
|
|
"X:2\n" + |
|
|
"T: Greensleeves\n" + |
|
|
"M: 6/8\n" + |
|
|
"L: 1/8\n" + |
|
|
"K: Ador\n" + |
|
|
"A|c2d e>fe|d2B G>AB|c2A A>GA|B2GE2|\n" + |
|
|
"A|c2d e>fe|d2B G>AB|c>BA ^G>FG|A3A2:|\n" + |
|
|
"z|g2g gfe|d2B G>AB|c2A A>GA|B6|\n" + |
|
|
"g2g gfe|d2B G>AB|c>BA ^G>FG|A3A2:|\n" + |
|
|
"A/B/|c2c cde|dBG GAB|cBA ABc|BGE E2 A/B/|\n" + |
|
|
"c2c cde|dBG GAB|cBA GE^G|A3A2:|\n" + |
|
|
"e/f/|gag gfe|dBG GBd|aba aba|gee e2e/f/|\n" + |
|
|
"gag gfe|dBG GAB|cBA GE^G|A3A2:|\n" |
|
|
|
|
|
function load() { |
|
|
var tuneBook = new ABCJS.TuneBook(abc) |
|
|
var select = document.getElementById("tune-selector") |
|
|
var option = document.createElement("option"); |
|
|
var optionContent = document.createTextNode("-- select tune --"); |
|
|
option.appendChild(optionContent); |
|
|
select.appendChild(option) |
|
|
for (var i = 0; i < tuneBook.tunes.length; i++) { |
|
|
option = document.createElement("option"); |
|
|
optionContent = document.createTextNode(tuneBook.tunes[i].title); |
|
|
option.appendChild(optionContent); |
|
|
option.setAttribute('value', i) |
|
|
select.appendChild(option) |
|
|
} |
|
|
select.addEventListener("change", setTune) |
|
|
} |
|
|
|
|
|
function setTune() { |
|
|
var index = this.value |
|
|
ABCJS.renderAbc("paper", abc, { startingTune: index}); |
|
|
} |
|
|
|
|
|
</script> |
|
|
</head> |
|
|
<body onload="load()"> |
|
|
<header> |
|
|
<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
|
|
<h1>Tune Selector</h1> |
|
|
</header> |
|
|
<div class="container"> |
|
|
<p>Select the tune you want to display. The tunes are in the same input string, so this is one way to display a tune collection.</p> |
|
|
<select id="tune-selector"></select> |
|
|
<div id="paper"></div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
