<!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;
// Initialize sound buffer and playback widget on a user gesture because of browser constraints on AudioContexts.
showPlayer.addEventListener('click', () => {
if (ABCJS.synth.supportsAudio()){
createSynth = new ABCJS.synth.CreateSynth(); // sound buffer
synthControl = new ABCJS.synth.SynthController(); // widget
// preloads and caches the notes to be played
createSynth.init({ visualObj: visualObj[0] }).then(function() {
redraw();
});
// creates playback widget with no visual cursor
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;
// re-render visualObj
visualObj = ABCJS.renderAbc("paper", abc, {
visualTranspose: doVisual
});
if(createSynth && synthControl) {
// re-set tune stored in SynthController
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>