| <!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: Synth Player Demo</title> |
|
|
| <link rel="stylesheet" type="text/css" href="../abcjs-audio.css"> |
| <style> |
| .highlight { |
| fill: #0a9ecc; |
| } |
| .abcjs-cursor { |
| stroke: red; |
| } |
| |
| </style> |
|
|
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| |
| var abc = |
| "T: Cooley's\n" + |
| "M: 4/4\n" + |
| "Q: 1/4=120\n" + |
| "L: 1/8\n" + |
| "R: reel\n" + |
| "K: Emin\n" + |
| "|:{E}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:|" |
| |
| |
| var abcOptions = { |
| add_classes: true, |
| responsive: "resize" |
| }; |
| |
| function CursorControl() { |
| var self = this; |
| |
| self.onReady = function() { |
| }; |
| self.onStart = function() { |
| 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); |
| |
| }; |
| self.beatSubdivisions = 2; |
| self.onBeat = function(beatNumber, totalBeats, totalTime) { |
| }; |
| self.onEvent = function(ev) { |
| if (ev.measureStart && ev.left === null) |
| return; |
| |
| var lastSelection = document.querySelectorAll("#paper svg .highlight"); |
| for (var k = 0; k < lastSelection.length; k++) |
| lastSelection[k].classList.remove("highlight"); |
| |
| for (var i = 0; i < ev.elements.length; i++ ) { |
| var note = ev.elements[i]; |
| for (var j = 0; j < note.length; j++) { |
| note[j].classList.add("highlight"); |
| } |
| } |
| |
| var cursor = document.querySelector("#paper svg .abcjs-cursor"); |
| if (cursor) { |
| cursor.setAttribute("x1", ev.left - 2); |
| cursor.setAttribute("x2", ev.left - 2); |
| cursor.setAttribute("y1", ev.top); |
| cursor.setAttribute("y2", ev.top + ev.height); |
| } |
| }; |
| self.onFinished = function() { |
| var els = document.querySelectorAll("svg .highlight"); |
| for (var i = 0; i < els.length; i++ ) { |
| els[i].classList.remove("highlight"); |
| } |
| var cursor = document.querySelector("#paper svg .abcjs-cursor"); |
| if (cursor) { |
| cursor.setAttribute("x1", 0); |
| cursor.setAttribute("x2", 0); |
| cursor.setAttribute("y1", 0); |
| cursor.setAttribute("y2", 0); |
| } |
| }; |
| } |
| |
| var cursorControl = new CursorControl(); |
| |
| var synthControl; |
| |
| function load() { |
| if (ABCJS.synth.supportsAudio()) { |
| synthControl = new ABCJS.synth.SynthController(); |
| synthControl.load("#audio", cursorControl, {displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true}); |
| } else { |
| document.querySelector("#audio").innerHTML = "<div class='audio-error'>Audio is not supported in this browser.</div>"; |
| } |
| setTune(false); |
| } |
| |
| function setTune(userAction) { |
| synthControl.disable(true); |
| var visualObj = ABCJS.renderAbc("paper", abc, abcOptions)[0]; |
| |
| var midiBuffer = new ABCJS.synth.CreateSynth(); |
| midiBuffer.init({ |
| visualObj: visualObj, |
| }).then(function (response) { |
| console.log(response); |
| if (synthControl) { |
| synthControl.setTune(visualObj, userAction).then(function (response) { |
| console.log("Audio successfully loaded.") |
| }).catch(function (error) { |
| console.warn("Audio problem:", error); |
| }); |
| } |
| }).catch(function (error) { |
| console.warn("Audio problem:", error); |
| }); |
| } |
| |
| </script> |
| </head> |
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Synth Player</h1> |
| </header> |
| <div class="container"> |
| <main> |
| <p>Demo of using the built in synth player control.</p> |
| <div id="paper"></div> |
| <div id="audio"></div> |
| </main> |
| </div> |
| </body> |
| </html> |
|
|
