| <!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="stylesheet" href="examples-styles.css"/> |
|
|
| <link rel="icon" href="favicon.ico" type="image/x-icon"/> |
| <title>abcjs: Tempo Demo</title> |
|
|
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <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:|"; |
| |
| var abcQ = "T: Cooley's\n" + |
| "M: 4/4\n" + |
| "L: 1/8\n" + |
| "R: reel\n" + |
| "Q: 1/4=150\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 visualObjQ = ABCJS.renderAbc("paper-q", abcQ, { |
| responsive: "resize" })[0]; |
| |
| var visualObjP = ABCJS.renderAbc("paper-param", abcQ, { |
| responsive: "resize" })[0]; |
| |
| var visualObjD = ABCJS.renderAbc("paper-default", abc, { |
| responsive: "resize" })[0]; |
| |
| var visualObjDQ = ABCJS.renderAbc("paper-default-q", abcQ, { |
| responsive: "resize" })[0]; |
| |
| var visualObjs = { |
| q: visualObjQ, |
| param: visualObjP, |
| default: visualObjD, |
| defaultQ: visualObjDQ, |
| } |
| |
| var options = { |
| q: { visualObj: visualObjQ }, |
| param: { visualObj: visualObjP, options: { qpm: 100 } }, |
| default: { visualObj: visualObjD, options: { defaultQpm: 60 } }, |
| defaultQ: { visualObj: visualObjDQ, options: { defaultQpm: 60 } }, |
| } |
| |
| |
| var midiBuffer; |
| |
| var startAudioButton = document.querySelectorAll(".activate-audio"); |
| var stopAudioButton = document.querySelectorAll(".stop-audio"); |
| |
| for (var i = 0; i < startAudioButton.length; i++) { |
| startAudioButton[i].addEventListener("click", startAudio); |
| } |
| |
| for (i = 0; i < stopAudioButton.length; i++) { |
| stopAudioButton[i].addEventListener("click", stopAudio); |
| } |
| |
| function startAudio() { |
| var type = this.dataset.type; |
| this.setAttribute("style", "display:none;"); |
| if (ABCJS.synth.supportsAudio()) { |
| var stopButton = document.querySelector('.stop-audio[data-type="' + type + '"]'); |
| stopButton.setAttribute("style", ""); |
| |
| window.AudioContext = window.AudioContext || |
| window.webkitAudioContext || |
| navigator.mozAudioContext || |
| navigator.msAudioContext; |
| var audioContext = new window.AudioContext(); |
| audioContext.resume().then(function () { |
| |
| |
| midiBuffer = new ABCJS.synth.CreateSynth(); |
| |
| options[type].audioContext = audioContext; |
| return midiBuffer.init(options[type]).then(function (response) { |
| return midiBuffer.prime(); |
| }).then(function () { |
| midiBuffer.start(); |
| return Promise.resolve(); |
| }).catch(function (error) { |
| if (error.status === "NotSupported") { |
| stopButton.setAttribute("style", "display:none;"); |
| var audioError = document.querySelector(".audio-error"); |
| audioError.setAttribute("style", ""); |
| } else |
| console.warn("synth error", error); |
| }); |
| }); |
| } else { |
| var audioError = document.querySelector(".audio-error"); |
| audioError.setAttribute("style", ""); |
| } |
| } |
| |
| function stopAudio() { |
| var type = this.dataset.type; |
| var startButton = document.querySelector('.activate-audio[data-type="' + type + '"]'); |
| startButton.setAttribute("style", ""); |
| this.setAttribute("style", "display:none;"); |
| if (midiBuffer) |
| midiBuffer.stop(); |
| } |
| } |
| </script> |
| </head> |
| <body onload="load()"> |
| <main> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Tempo</h1> |
| </header> |
| <div class="container"> |
| <p>Tempo can be set in various ways: it can be specified in the ABC string, it can be specified in the |
| parameters passed in, or a default can be set that is only used if the tempo is not in the string. |
| </p> |
| <div class='audio-error' style="display:none;">Audio is not supported in this browser.</div> |
| <h2>Specified in the ABC String</h2> |
| <p>The tempo is set using the <span class="code">Q: 1/4=150</span> line.</p> |
| <div id="paper-q"></div> |
| <div class="row"> |
| <div> |
| <button class="activate-audio" data-type="q">Activate Audio Context And Play</button> |
| <button class="stop-audio" data-type="q" style="display:none;">Stop Audio</button> |
| </div> |
| </div> |
|
|
| <h2>Passed in as a Parameter</h2> |
| <p>The tempo is set using the <span class="code">{ qpm: 100 }</span> attribute. Notice that this overrides the tempo in the <span class="code">Q:</span> line.</p> |
| <div id="paper-param"></div> |
| <div class="row"> |
| <div> |
| <button class="activate-audio" data-type="param">Activate Audio Context And Play</button> |
| <button class="stop-audio" data-type="param" style="display:none;">Stop Audio</button> |
| </div> |
| </div> |
|
|
| <h2>Using a default</h2> |
| <p>The tempo is set using the <span class="code">{ defaultQpm: 60 }</span> attribute. Notice there is no <span class="code">Q:</span> line.</p> |
| <div id="paper-default"></div> |
| <div class="row"> |
| <div> |
| <button class="activate-audio" data-type="default">Activate Audio Context And Play</button> |
| <button class="stop-audio" data-type="default" style="display:none;">Stop Audio</button> |
| </div> |
| </div> |
|
|
| <p>The tempo is set using the <span class="code">{ defaultQpm: 60 }</span> attribute. However, there is a <span class="code">Q:</span> line, so that takes precedence.</p> |
| <div id="paper-default-q"></div> |
| <div class="row"> |
| <div> |
| <button class="activate-audio" data-type="defaultQ">Activate Audio Context And Play</button> |
| <button class="stop-audio" data-type="defaultQ" style="display:none;">Stop Audio</button> |
| </div> |
| </div> |
|
|
| </div> |
| </main> |
| </body> |
| </html> |
|
|
