<!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>