|
|
<!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" /> |
|
|
<style> |
|
|
.lyrics { |
|
|
font-family: 'Courier New', Courier, monospace; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<title>abcjs: Basic Demo</title> |
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<script type="text/javascript"> |
|
|
var abc = "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" + |
|
|
"T: Subtitle\n" + |
|
|
"w:Here are some ly- rics\n" + |
|
|
"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" + |
|
|
"w:Un- der some notes\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:|"; |
|
|
|
|
|
function load() { |
|
|
var visualObj = ABCJS.renderAbc("paper", abc); |
|
|
var words = [] |
|
|
for (var i = 0; i < visualObj[0].lines.length; i++) { |
|
|
var line = visualObj[0].lines[i] |
|
|
if (line.staff) { |
|
|
for (var j = 0; j < line.staff.length; j++) { |
|
|
var staff = line.staff[j]; |
|
|
for (var k = 0; k < staff.voices.length; k++) { |
|
|
var voice = staff.voices[k] |
|
|
for (var l = 0; l < voice.length; l++) { |
|
|
var element = voice[l] |
|
|
if (element.lyric) { |
|
|
for (var m = 0; m < element.lyric.length; m++) { |
|
|
var lyric = element.lyric[m] |
|
|
words.push(lyric.syllable) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
var el = document.querySelector('.lyrics') |
|
|
el.innerHTML = words.join("<br>") |
|
|
console.log(words) |
|
|
} |
|
|
|
|
|
</script> |
|
|
</head> |
|
|
|
|
|
<body onload="load()"> |
|
|
<header> |
|
|
<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
|
|
<h1>Basic abcjs</h1> |
|
|
</header> |
|
|
<div class="container"> |
|
|
<p>This extracts lyrics from a tune</p> |
|
|
<div id="paper"></div> |
|
|
<p>The lyrics found:</p> |
|
|
<div class="lyrics"></div> |
|
|
</div> |
|
|
</body> |
|
|
|
|
|
</html> |
