| <!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> |
|
|
