File size: 2,072 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 74 75 76 |
<!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> |