<!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" type="text/css" href="../abcjs-audio.css">
	<link rel="stylesheet" href="examples-styles.css" />

	<title>Output Transposition</title>
	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>
	<script type="text/javascript">
		var editor;
		var renderParams = { responsive: "resize", selectTypes: false };
		var outputEl;
		var abcEl;
		var currentAbc = ""
		window.onload = function () {
			abcEl = document.querySelector("#abc");
			outputEl = document.querySelector("#transposed");
			visualTransposeEl = document.querySelector(".transpose");

			editor = new ABCJS.Editor("abc", {
				canvas_id: "paper",
				warnings_id: "warnings",
				abcjsParams: renderParams,
			});

			visualTransposeEl.addEventListener("change", paramChanged);
			paramChanged(false);
		};

		function paramChanged(userAction) {
			var visualObj = editor.tunes
			var abc = abcEl.value
			var steps = visualTransposeEl.value
			var output = ABCJS.strTranspose(abc, visualObj, steps)
			outputEl.innerText = output
			var newVisualObj = ABCJS.renderAbc("paper2", output, renderParams)
			if (userAction)
				createSynth(newVisualObj[0])
		}

		var synthControl

		function createSynth(visualObj) {
			if (!synthControl) {
				synthControl = new ABCJS.synth.SynthController();
				synthControl.load("#audio", null, { displayRestart: true, displayPlay: true, displayProgress: true });
			}
			var midiBuffer = new ABCJS.synth.CreateSynth();
			midiBuffer.init({
				visualObj: visualObj,
			}).then(function (response) {
				synthControl.setTune(visualObj, true).then(function (response) {
				}).catch(function (error) {
					console.warn("Audio problem:", error);
				});
			}).catch(function (error) {
				console.warn("Audio problem:", error);
			});

		}
	</script>
	<style>
		@media only screen and (min-width: 700px) {
			.container {
				max-width: 1200px;
			}
		}

		.input,
		.output {
			display: flex;
			column-gap: 10px;
		}

		.input>div,
		.output>div {
			width: 50%;
		}

		#abc,
		#transposed {
			font-family: monaco, monospace;
			font-size: 1em;
			height: 300px;
		}

		#transposed {
			border: 1px solid #888;
			padding: 10px;
			margin-top: 0;
			overflow: auto;
		}
		label {
			margin-top: 10px;
			display: block;
		}
	</style>
</head>

<body>
	<header>
		<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
		<h1>Output Transposition</h1>
	</header>
	<div class="container">
		<main>
			<p>This demonstrates transposing an ABC string and retrieving that transposed string. Type any valid ABC string in the "input string" area and choose your transposition in half-steps below the input string. The resultant ABC string, transposed audio, and transposed notation are shown on the right side of the page.</p>
			<section class="input">
				<div>
					<h2>Input String</h2>
					<textarea aria-label="ABC string" id="abc" spellcheck="false">
X: 1
T: Cooley's
M: 4/4
L: 1/8
R: reel
K: Em
V: Melody
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
</textarea>
					<label>Transpose:
						<input
							class="transpose"
							type="number"
							min="-24"
							max="24"
							step="1"
							value="0">
					</label>
				</div>
				<div>
					<h2>Output String</h2>
					<pre id="transposed"></pre>
					<div id="audio"></div>
				</div>
			</section>

			<div id="warnings"></div>
			<section class="output">
				<div>
					<h2>Original Output</h2>
					<div id="paper" class="visible-background"></div>
				</div>
				<div>
					<h2>Transposed Output</h2>
					<div id="paper2" class="visible-background"></div>
				</div>
			</section>
		</main>
	</div>
</body>

</html>