| <!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: Synth Demo</title> |
|
|
| <style> |
| main { |
| max-width: 770px; |
| margin: 0 auto; |
| } |
| .hidden { |
| display: none; |
| } |
| </style> |
|
|
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| |
| var abc = |
| "X:1\n" + |
| "T: Sonata (fragment)\n" + |
| "C: J.S. Bach\n" + |
| "M: C\n" + |
| "L: 1/8\n" + |
| "K:C\n" + |
| "[V:1] c/gf/ E/ed/ c/c'b/ A/ag/ | ^f/e/d- d/(c/B/A/) G/(e/c/e/) Aa| d2-d/g/_b/a/ a3 g/=f/|\n" + |
| "[V:2] c8- | cB/A/ {A}B>c (e/c/A/c/) (E//^F//E//F//TF3//E///F///) | G/(D/G/A/) _B/G/g/e/ ^cA d2|\n" + |
| "[V:3] edcB AG^FE | D^FGg c3d/c/| _BG g2-gf/e/ f>g|\n" |
| |
| var synthControl; |
| |
| var abcOptions = { |
| add_classes: true, |
| responsive: "resize" |
| }; |
| |
| var visualObj; |
| |
| function load() { |
| document.querySelector(".prime").addEventListener("click", prime); |
| document.querySelector(".play1").addEventListener("click", play1); |
| document.querySelector(".play12").addEventListener("click", play12); |
| document.querySelector(".play23").addEventListener("click", play23); |
| document.querySelector(".play123").addEventListener("click", play123); |
| document.querySelector(".play1s").addEventListener("click", play1s); |
| document.querySelector(".play3s").addEventListener("click", play3s); |
| visualObj = ABCJS.renderAbc("paper", abc, abcOptions)[0]; |
| } |
| |
| var buffers = [] |
| |
| function create(voices, ms) { |
| return new Promise(function(resolve, reject) { |
| var midiBuffer = new ABCJS.synth.CreateSynth(); |
| midiBuffer.init({ |
| visualObj: visualObj, |
| millisecondsPerMeasure: ms, |
| options: { |
| chordsOff: true, |
| voicesOff: voices |
| } |
| }).then(function (response) { |
| midiBuffer.prime().then(function () { |
| resolve({buffer: midiBuffer}) |
| }); |
| }).catch(function (error) { |
| console.warn("Audio problem:", error); |
| reject(error) |
| }); |
| }) |
| } |
| |
| function prime() { |
| var button = document.querySelector(".prime") |
| button.classList.add("hidden") |
| var progress = document.querySelector(".progress") |
| progress.classList.remove("hidden") |
| var controls = document.querySelector(".after-prime") |
| create([1,2], 4000).then(function(r1) { |
| buffers[0] = r1.buffer |
| return create([2], 4000) |
| }).then(function(r2) { |
| buffers[1] = r2.buffer |
| return create([0], 4000) |
| }).then(function(r3) { |
| buffers[2] = r3.buffer |
| return create([], 4000) |
| }).then(function(r4) { |
| buffers[3] = r4.buffer |
| return create([1,2], 8000) |
| }).then(function(r5) { |
| buffers[4] = r5.buffer |
| return create([0,1], 8000) |
| }).then(function(r6) { |
| buffers[5] = r6.buffer |
| progress.classList.add("hidden") |
| controls.classList.remove("hidden") |
| }) |
| } |
| |
| function play1() { |
| buffers[0].start(); |
| } |
| |
| function play12() { |
| buffers[1].start(); |
| } |
| |
| function play23() { |
| buffers[2].start(); |
| } |
| |
| function play123() { |
| buffers[3].start(); |
| } |
| |
| function play1s() { |
| buffers[4].start(); |
| } |
| |
| function play3s() { |
| buffers[5].start(); |
| } |
| |
| </script> |
| </head> |
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Reusing Synth</h1> |
| </header> |
| <div class="container"> |
| <main> |
| <p>This shows how you can create and save snippets of music so that it is easy to replay them.</p> |
| <p>When you click "Prime" all of the buffers are created from the same music - playing different sets of voices |
| at different tempos.</p> |
| <p>Then the user can play them repeatedly with very little additional processing.</p> |
| <button class="prime">Prime</button> |
| <div class="progress hidden">Loading. Please wait...</div> |
| <div class="after-prime hidden"> |
| <button class="play1">Play V1</button> |
| <button class="play12">Play V1 & V2</button> |
| <button class="play23">Play V2 & V3</button> |
| <button class="play123">Play V1 & V2 & V3</button> |
| <button class="play1s">Play V1 slow</button> |
| <button class="play3s">Play V3 slow</button> |
| </div> |
| <div id="paper"></div> |
| </main> |
| </div> |
| </body> |
| </html> |
|
|
