| <!DOCTYPE html> |
| <html> |
| <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 animation</title> |
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
| <style media="screen" type="text/css"> |
| .abcjs-cursor { |
| stroke: blue; |
| } |
| @media (prefers-color-scheme: dark) { |
| .abcjs-cursor { |
| stroke: #ffffff; |
| } |
| } |
| path { |
| transition: opacity 1s; |
| } |
| .abcjs-note.hidden, .abcjs-beam-elem.hidden { |
| opacity: 0; |
| } |
| .color { |
| stroke: red; |
| fill: red; |
| } |
| </style> |
| </head> |
|
|
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Animation</h1> |
| </header> |
| <div class="container"> |
| <div class="cursor-nav"> |
| <div> |
| <label><input type="checkbox" id="hide-finished-measures" checked>Hide Finished Measures</label> |
| <label><input type="checkbox" id="show-cursor" checked>Show Cursor</label> |
| <label><input type="checkbox" id="color-note" checked>Color Note</label> |
| <button id="do-animation">Start</button> |
| </div> |
| </div> |
| <div id="paper" class="paper"></div> |
| <div id="warnings"></div> |
| </div> |
|
|
| <script> |
| var abcString = "T: Cooley's\n" + |
| "M: 4/4\n" + |
| "L: 1/8\n" + |
| "R: reel\n" + |
| "K: Emin\n" + |
| "|:EBBA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" + |
| "EBBA B2 EB|B2 AB defg|afe^c dBAF|1 DEFD E2 D2:|2 DEFD E2 gf||\n" + |
| "|:eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" + |
| "eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2 gf:|"; |
| |
| function load() { |
| var visualObj = ABCJS.renderAbc("paper", abcString, {add_classes: true}); |
| var timingCallbacks = new ABCJS.TimingCallbacks(visualObj[0], { |
| beatCallback: beatCallback, |
| eventCallback: eventCallback, |
| }); |
| |
| function createCursor() { |
| var svg = document.querySelector("#paper svg"); |
| var cursor = document.createElementNS("http://www.w3.org/2000/svg", "line"); |
| cursor.setAttribute("class", "abcjs-cursor"); |
| cursor.setAttributeNS(null, 'x1', 0); |
| cursor.setAttributeNS(null, 'y1', 0); |
| cursor.setAttributeNS(null, 'x2', 0); |
| cursor.setAttributeNS(null, 'y2', 0); |
| svg.appendChild(cursor); |
| return cursor; |
| } |
| var cursor = createCursor(); |
| |
| var button = document.getElementById("do-animation"); |
| button.addEventListener("click", function() { startStop(); }); |
| var hideFinishedMeasures = document.getElementById("hide-finished-measures"); |
| var showCursor = document.getElementById("show-cursor"); |
| var colorNote = document.getElementById("color-note"); |
| |
| var isRunning = false; |
| var buttonText = ["Start", "Stop"]; |
| |
| var pauseButtonControl = function () { |
| isRunning = !isRunning; |
| button.innerText = buttonText[isRunning ? 1 : 0]; |
| }; |
| |
| var startStop = function() { |
| isRunning = !isRunning; |
| button.innerText = buttonText[isRunning ? 1 : 0]; |
| if (isRunning) |
| timingCallbacks.start(); |
| else |
| timingCallbacks.stop(); |
| } |
| |
| var restart = function() { |
| timingCallbacks.start(); |
| } |
| |
| function beatCallback(currentBeat,totalBeats,lastMoment,position, debugInfo) { |
| var x1, x2, y1, y2; |
| if (currentBeat === totalBeats) { |
| showAllMeasures(); |
| x1 = 0; |
| x2 = 0; |
| y1 = 0; |
| y2 = 0; |
| } else { |
| x1 = position.left - 2; |
| x2 = position.left - 2; |
| y1 = position.top; |
| y2 = position.top + position.height; |
| } |
| if (showCursor.checked) { |
| cursor.setAttribute("x1", x1); |
| cursor.setAttribute("x2", x2); |
| cursor.setAttribute("y1", y1); |
| cursor.setAttribute("y2", y2); |
| } |
| if (colorNote.checked) |
| colorElements([]); |
| } |
| |
| function hideMeasure(num) { |
| var els = document.querySelectorAll(".abcjs-mm"+num); |
| for (var i = 0; i < els.length; i++) |
| els[i].classList.add("hidden") |
| } |
| function showAllMeasures() { |
| var els = document.querySelectorAll(".hidden"); |
| for (var i = 0; i < els.length; i++) |
| els[i].classList.remove("hidden") |
| } |
| |
| var lastEls = []; |
| function colorElements(els) { |
| var i; |
| var j; |
| for (i = 0; i < lastEls.length; i++) { |
| for (j = 0; j < lastEls[i].length; j++) { |
| lastEls[i][j].classList.remove("color"); |
| } |
| } |
| for (i = 0; i < els.length; i++) { |
| for (j = 0; j < els[i].length; j++) { |
| els[i][j].classList.add("color"); |
| } |
| } |
| lastEls = els; |
| } |
| |
| var lastMeasure = -1; |
| function eventCallback(ev) { |
| if (!ev) { |
| pauseButtonControl(); |
| return; |
| } |
| if (ev.measureStart && hideFinishedMeasures.checked) { |
| if (lastMeasure > ev.measureNumber) |
| showAllMeasures(); |
| else if (lastMeasure >= 0) |
| hideMeasure(lastMeasure); |
| lastMeasure = ev.measureNumber; |
| } |
| if (colorNote.checked) { |
| colorElements(ev.elements); |
| } |
| } |
| } |
| |
| </script> |
| </body> |
| </html> |
|
|
