|
|
<!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: Basic Demo</title> |
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../abcjs-audio.css"> |
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<style> |
|
|
#audio { |
|
|
margin-top: 20px; |
|
|
max-width: 760px; |
|
|
} |
|
|
</style> |
|
|
<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" + |
|
|
"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:|"; |
|
|
|
|
|
function load() { |
|
|
|
|
|
var showPlayer = document.querySelector('#show-player'); |
|
|
var transposeHalfSteps = document.querySelector(".transpose-half-steps"); |
|
|
var transposeVisual = document.querySelector(".transpose-visual"); |
|
|
var transposeAudio = document.querySelector(".transpose-audio"); |
|
|
var visualObj = ABCJS.renderAbc("paper", abc); |
|
|
var createSynth; |
|
|
var synthControl; |
|
|
|
|
|
|
|
|
showPlayer.addEventListener('click', () => { |
|
|
|
|
|
if (ABCJS.synth.supportsAudio()){ |
|
|
createSynth = new ABCJS.synth.CreateSynth(); |
|
|
synthControl = new ABCJS.synth.SynthController(); |
|
|
|
|
|
|
|
|
createSynth.init({ visualObj: visualObj[0] }).then(function() { |
|
|
redraw(); |
|
|
}); |
|
|
|
|
|
|
|
|
var cursorControl = null; |
|
|
synthControl.load('#audio', cursorControl, { |
|
|
displayRestart: true, |
|
|
displayPlay: true, |
|
|
displayProgress: true, |
|
|
}); |
|
|
} |
|
|
else { |
|
|
document.querySelector('#audio').innerHTML = 'Audio is not supported in this browser.' |
|
|
} |
|
|
|
|
|
showPlayer.style.display = 'none'; |
|
|
}); |
|
|
function redraw() { |
|
|
|
|
|
var transposeBy = transposeHalfSteps.value; |
|
|
var doVisual = transposeVisual.checked ? transposeBy : 0; |
|
|
var doAudio = transposeAudio.checked ? transposeBy : 0; |
|
|
|
|
|
visualObj = ABCJS.renderAbc("paper", abc, { |
|
|
visualTranspose: doVisual |
|
|
}); |
|
|
if(createSynth && synthControl) { |
|
|
|
|
|
synthControl.setTune(visualObj[0], true, { midiTranspose: doAudio }) |
|
|
.then(function(){ |
|
|
console.log('Audio successfully loaded.') |
|
|
}).catch(function(error) { |
|
|
console.warn('Audio problem: ', error); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
transposeHalfSteps.addEventListener("change", function() { |
|
|
redraw(); |
|
|
}); |
|
|
transposeVisual.addEventListener("change", function() { |
|
|
redraw(); |
|
|
}); |
|
|
transposeAudio.addEventListener("change", function() { |
|
|
redraw(); |
|
|
}); |
|
|
} |
|
|
|
|
|
</script> |
|
|
</head> |
|
|
<body onload="load()"> |
|
|
<header> |
|
|
<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
|
|
<h1>Basic Transposition</h1> |
|
|
</header> |
|
|
<div class="container"> |
|
|
<p>This transposes either/both the visual music and the synth.</p> |
|
|
<label>Transpose half-steps: <input class="transpose-half-steps" type="number" min="-24" max="24" step="1" value="0"></label> |
|
|
<label><input type="checkbox" class="transpose-visual" checked>Visual?</label> |
|
|
<label><input type="checkbox" class="transpose-audio" checked>Audio?</label> |
|
|
<button id="show-player">Show Audio Player</button> |
|
|
<div id="audio"></div> |
|
|
<div id="warnings"></div> |
|
|
<div id="paper"></div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
