File size: 2,394 Bytes
af6912c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!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>
|