File size: 4,361 Bytes
af6912c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
<!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>
|