|
|
<!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 Demo</title> |
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../abcjs-audio.css"> |
|
|
<style> |
|
|
main { |
|
|
max-width: 770px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
.feedback { |
|
|
height: 600px; |
|
|
font-family: Arial, "sans-serif"; |
|
|
} |
|
|
.highlight { |
|
|
fill: #0a9ecc; |
|
|
} |
|
|
.abcjs-cursor { |
|
|
stroke: red; |
|
|
} |
|
|
.click-explanation { |
|
|
color: red; |
|
|
font-style: italic; |
|
|
} |
|
|
.beat { |
|
|
font-weight: bold; |
|
|
} |
|
|
.label { |
|
|
color: #888888; |
|
|
} |
|
|
.midi { |
|
|
margin-top: 20px; |
|
|
margin-left: 5px; |
|
|
} |
|
|
.seek-controls { |
|
|
margin-top: 5px; |
|
|
} |
|
|
.seek-controls.disabled { |
|
|
background-color: #cccccc; |
|
|
opacity: 0.5; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<script type="text/javascript"> |
|
|
|
|
|
function CursorControl() { |
|
|
var self = this; |
|
|
|
|
|
self.onReady = function() { |
|
|
var downloadLink = document.querySelector(".download"); |
|
|
downloadLink.addEventListener("click", download); |
|
|
downloadLink.setAttribute("style", ""); |
|
|
var clickEl = document.querySelector(".click-explanation") |
|
|
clickEl.setAttribute("style", ""); |
|
|
}; |
|
|
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) { |
|
|
if (!self.beatDiv) |
|
|
self.beatDiv = document.querySelector(".beat"); |
|
|
self.beatDiv.innerText = "Beat: " + beatNumber + " Total: " + totalBeats + " Total time: " + 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"); |
|
|
|
|
|
var el = document.querySelector(".feedback").innerHTML = "<div class='label'>Current Note:</div>" + JSON.stringify(ev, null, 4); |
|
|
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 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:|", |
|
|
|
|
|
"X:1\n" + |
|
|
"T:Bill Bailey\n" + |
|
|
"M:4/4\n" + |
|
|
"L:1/4\n" + |
|
|
"Q:1/4=210\n" + |
|
|
"K:C\n" + |
|
|
"\"C\"GA2c|e3/2^d/2eg|GA2c|e4|GA2c|e2g2|\"G7\"(gB3-|B4)|\n" + |
|
|
"GB2d|fefg|GB2d|f4|GB2d|g2\"G+\"a2|\"C\"(ae3-|e4)|\n" + |
|
|
"GA2c|e3/2^d/2eg|GA2c|e3G|GGce|g2_b2|\"F\"a2-a2-|a3c|\n" + |
|
|
"cc2c|\"F#dim7\"d2c2|\"C\"gg2a|\"A7\"e3e|\"D7\"ed^cd|\"G7\"f2e2|\"C\"c4-|czz2|]", |
|
|
|
|
|
"X:1\n" + |
|
|
"T:All Notes On Piano\n" + |
|
|
"M:4/4\n" + |
|
|
"Q:120\n" + |
|
|
"L:1/4\n" + |
|
|
"K:C clef=bass\n" + |
|
|
"A,,,,^A,,,,B,,,,C,,,|^C,,,D,,,^D,,,E,,,|F,,,^F,,,G,,,^G,,,|A,,,^A,,,B,,,C,,|\n" + |
|
|
"^C,,D,,^D,,E,,|F,,^F,,G,,^G,,|A,,^A,,B,,C,|^C,D,^D,E,|\n" + |
|
|
"K:C clef=treble\n" + |
|
|
"F,^F,G,^G,|A,^A,B,C|^CD^DE|F^FG^G|\n" + |
|
|
"A^ABc|^cd^de|f^fg^g|a^abc'|\n" + |
|
|
"^c'd'^d'e'|f'^f'g'^g'|a'^a'b'c''|^c''d''^d''e''|\n" + |
|
|
"f''^f''g''^g''|a''^a''b''c'''|^c'''4|]" |
|
|
]; |
|
|
|
|
|
var tuneNames = [ "Cooleys", "Bill Bailey", "All Notes On Piano" ]; |
|
|
|
|
|
var currentTune = 0; |
|
|
|
|
|
var synthControl; |
|
|
|
|
|
function clickListener(abcElem, tuneNumber, classes, analysis, drag, mouseEvent) { |
|
|
var output = "currentTrackMilliseconds: " + abcElem.currentTrackMilliseconds + "<br>" + |
|
|
"currentTrackWholeNotes: " + abcElem.currentTrackWholeNotes + "<br>" + |
|
|
"midiPitches: " + JSON.stringify(abcElem.midiPitches, null, 4) + "<br>" + |
|
|
"gracenotes: " + JSON.stringify(abcElem.gracenotes, null, 4) + "<br>" + |
|
|
"midiGraceNotePitches: " + JSON.stringify(abcElem.midiGraceNotePitches, null, 4) + "<br>"; |
|
|
document.querySelector(".clicked-info").innerHTML = "<div class='label'>Clicked info:</div>" +output; |
|
|
|
|
|
var lastClicked = abcElem.midiPitches; |
|
|
if (!lastClicked) |
|
|
return; |
|
|
|
|
|
ABCJS.synth.playEvent(lastClicked, abcElem.midiGraceNotePitches, synthControl.visualObj.millisecondsPerMeasure()).then(function (response) { |
|
|
console.log("note played"); |
|
|
}).catch(function (error) { |
|
|
console.log("error playing note", error); |
|
|
}); |
|
|
} |
|
|
|
|
|
var abcOptions = { |
|
|
add_classes: true, |
|
|
clickListener: self.clickListener, |
|
|
responsive: "resize" |
|
|
}; |
|
|
|
|
|
function load() { |
|
|
document.querySelector(".next").addEventListener("click", next); |
|
|
document.querySelector(".start").addEventListener("click", start); |
|
|
document.querySelector(".warp").addEventListener("click", warp); |
|
|
document.querySelector(".seek").addEventListener("click", seek); |
|
|
document.querySelector(".seek2").addEventListener("click", seek2); |
|
|
document.querySelector("#seek-units").addEventListener("change", seekExplanation); |
|
|
|
|
|
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 download() { |
|
|
if (synthControl) |
|
|
synthControl.download(tuneNames[currentTune] + ".wav"); |
|
|
} |
|
|
|
|
|
function start() { |
|
|
if (synthControl) |
|
|
synthControl.play(); |
|
|
} |
|
|
|
|
|
function seek() { |
|
|
synthControl.seek(0.50) |
|
|
} |
|
|
|
|
|
function seekExplanation() { |
|
|
var explanation = document.getElementById("unit-explanation"); |
|
|
if (!synthControl.visualObj.noteTimings) { |
|
|
explanation.innerText = "First start playing to load audio before seeking."; |
|
|
return; |
|
|
} |
|
|
var units = this.value; |
|
|
var max = 1; |
|
|
switch (units) { |
|
|
case "seconds": |
|
|
max = synthControl.visualObj.getTotalTime(); |
|
|
break; |
|
|
case "beats": |
|
|
max = synthControl.visualObj.getTotalBeats(); |
|
|
break; |
|
|
} |
|
|
explanation.innerText = "Enter a number between 0 and {0}.".replace("{0}", max); |
|
|
} |
|
|
|
|
|
function seek2() { |
|
|
var amount = document.getElementById("seek-amount").value; |
|
|
var units = document.getElementById("seek-units").value; |
|
|
synthControl.seek(amount, units) |
|
|
} |
|
|
|
|
|
function warp() { |
|
|
var el = document.querySelector(".warp"); |
|
|
el.setAttribute("disabled", true) |
|
|
var amount = Math.random() |
|
|
console.log("warp", amount) |
|
|
synthControl.setWarp(amount*100).then(function () { |
|
|
el.removeAttribute("disabled") |
|
|
}) |
|
|
} |
|
|
|
|
|
function setTune(userAction) { |
|
|
var seekControls = document.querySelector(".seek-controls"); |
|
|
seekControls.classList.add("disabled"); |
|
|
synthControl.disable(true); |
|
|
var visualObj = ABCJS.renderAbc("paper", abc[currentTune], abcOptions)[0]; |
|
|
var midi = ABCJS.synth.getMidiFile(abc[currentTune]); |
|
|
var midiButton = document.querySelector(".midi"); |
|
|
midiButton.innerHTML = midi; |
|
|
|
|
|
|
|
|
var midiBuffer = new ABCJS.synth.CreateSynth(); |
|
|
midiBuffer.init({ |
|
|
|
|
|
visualObj: visualObj, |
|
|
|
|
|
|
|
|
|
|
|
options: { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
}).then(function (response) { |
|
|
console.log(response); |
|
|
if (synthControl) { |
|
|
synthControl.setTune(visualObj, userAction).then(function (response) { |
|
|
console.log("Audio successfully loaded.") |
|
|
seekControls.classList.remove("disabled"); |
|
|
seekExplanation(); |
|
|
}).catch(function (error) { |
|
|
console.warn("Audio problem:", error); |
|
|
}); |
|
|
} |
|
|
}).catch(function (error) { |
|
|
console.warn("Audio problem:", error); |
|
|
}); |
|
|
} |
|
|
|
|
|
function next() { |
|
|
currentTune++; |
|
|
if (currentTune >= abc.length) |
|
|
currentTune = 0; |
|
|
setTune(true); |
|
|
} |
|
|
|
|
|
|
|
|
</script> |
|
|
</head> |
|
|
<body onload="load()"> |
|
|
<header> |
|
|
<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
|
|
<h1>Full Synth</h1> |
|
|
</header> |
|
|
<div class="container"> |
|
|
<main> |
|
|
<p>This is a complete demo of what you can do with matching audio with the visual music.</p> |
|
|
<p>Different pieces of music are provided to demonstrate changing tunes. To toggle between the pieces, click "Next Tune".</p> |
|
|
<p>You are in control of the look of the cursor. Two different techniques are demonstrated: highlighting the note being played and putting a cursor on the page. The class CursorControl must be supplied by your program.</p> |
|
|
<p>As the piece is playing, there are callbacks when the note changes. The info returned in the callback is printed to the page as it is received.</p> |
|
|
<p>The visual control for playing music can look different. In this example, the abcjs-audio.css file has been loaded. You can supply your own css.</p> |
|
|
<button class="next">Next Tune</button> |
|
|
<button class="start">Start/Pause</button> |
|
|
<button class="warp">Rand. Warp</button> |
|
|
<button class="seek">Seek to Middle</button> |
|
|
<button class="download" style="display: none;">Download</button> |
|
|
<div class="seek-controls disabled"> |
|
|
<label>Seek: <input type="number" min="0" id="seek-amount"></label> |
|
|
<select aria-label="seek units" id="seek-units"> |
|
|
<option value="percent">Percent</option> |
|
|
<option value="seconds">Seconds</option> |
|
|
<option value="beats">Beats</option> |
|
|
</select> |
|
|
<button class="seek2">Seek</button> |
|
|
<span id="unit-explanation" class="click-explanation">First start playing to load audio before seeking.</span> |
|
|
</div> |
|
|
<div class="midi">MIDI</div> |
|
|
<div id="paper"></div> |
|
|
<div id="audio"></div> |
|
|
<p class="beat"></p> |
|
|
<p class="click-explanation" style="display:none;">Click on a note to play that note.</p> |
|
|
<pre class="clicked-info"></pre> |
|
|
<pre class="feedback"></pre> |
|
|
</main> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
