|
|
<!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: Analysis Demo</title> |
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<script type="text/javascript"> |
|
|
var abc = "%%staffwidth 600\n" + |
|
|
"\n" + |
|
|
"X:100\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:101\n" + |
|
|
"T: Mary\n" + |
|
|
"M: 4/4\n" + |
|
|
"L: 1/4\n" + |
|
|
"K: D\n" + |
|
|
"fede|fff2|eee2|ffa2|\n" + |
|
|
"fede|ffff|eefe|d4|@\n" + |
|
|
""; |
|
|
|
|
|
function load() { |
|
|
var tuneBook = new ABCJS.TuneBook(abc) |
|
|
|
|
|
var el = document.querySelector(".abc-string"); |
|
|
el.innerHTML = abc; |
|
|
|
|
|
el = document.querySelector(".header"); |
|
|
el.innerHTML = tuneBook.header; |
|
|
|
|
|
el = document.querySelector(".num-tunes"); |
|
|
el.innerHTML = tuneBook.tunes.length; |
|
|
|
|
|
el = document.querySelector(".names"); |
|
|
var names = []; |
|
|
for (var i = 0; i < tuneBook.tunes.length; i++) |
|
|
names.push(tuneBook.tunes[i].title) |
|
|
el.innerHTML = names.join("<br>") |
|
|
|
|
|
el = document.querySelector(".ids"); |
|
|
var ids = []; |
|
|
for (var i = 0; i < tuneBook.tunes.length; i++) |
|
|
ids.push(tuneBook.tunes[i].id) |
|
|
el.innerHTML = ids.join("<br>") |
|
|
|
|
|
el = document.querySelector(".tune-101"); |
|
|
el.innerHTML = JSON.stringify(tuneBook.getTuneById(101), null, " "); |
|
|
|
|
|
el = document.querySelector(".tune-cooleys"); |
|
|
el.innerHTML = JSON.stringify(tuneBook.getTuneByTitle("Cooley's"), null, " "); |
|
|
|
|
|
el = document.querySelector(".parse"); |
|
|
var visualObj = ABCJS.parseOnly(abc) |
|
|
el.innerHTML = "<h3>Cooley's</h3>" + visualObj[0].warnings + "<h3>Mary</h3>" + visualObj[1].warnings; |
|
|
} |
|
|
|
|
|
</script> |
|
|
<style> |
|
|
.cmd { |
|
|
color: #1136f5; |
|
|
font-weight: bold; |
|
|
} |
|
|
pre { |
|
|
background: #f0f0f0; |
|
|
white-space: pre-wrap; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body onload="load()"> |
|
|
<header> |
|
|
<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
|
|
<h1>Analyze tune book string</h1> |
|
|
</header> |
|
|
<div class="container"> |
|
|
<p>Given the following ABC string, the following information can be gleaned from it.</p> |
|
|
<h2>ABC String</h2> |
|
|
<pre class="abc-string"></pre> |
|
|
<h2>Creation</h2> |
|
|
<p class="cmd">var tuneBook = new ABCJS.TuneBook(abc)</p> |
|
|
<h2>Header</h2> |
|
|
<p class="cmd">tuneBook.header</p> |
|
|
<pre class="header"></pre> |
|
|
<h2>Number Of Tunes</h2> |
|
|
<p class="cmd">tuneBook.tunes.length</p> |
|
|
<pre class="num-tunes"></pre> |
|
|
<h2>Tune Names</h2> |
|
|
<p class="cmd">tuneBook.tunes[i].title</p> |
|
|
<pre class="names"></pre> |
|
|
<h2>Tune Ids</h2> |
|
|
<p class="cmd">tuneBook.tunes[i].id</p> |
|
|
<pre class="ids"></pre> |
|
|
<h2>Tune "101"</h2> |
|
|
<p class="cmd">tuneBook.getTuneById(101)</p> |
|
|
<pre class="tune-101"></pre> |
|
|
<h2>Tune "Cooley's"</h2> |
|
|
<p class="cmd">tuneBook.getTuneByTitle("Cooley's")</p> |
|
|
<pre class="tune-cooleys"></pre> |
|
|
<h2>Parse Only - warnings</h2> |
|
|
<p class="cmd">var visualObj = ABCJS.parseOnly(abc)</p> |
|
|
<pre class="parse"></pre> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
