added style utils

js/app.js

@@ -0,0 +1,84 @@
+// element identifiers
+const startButton = document.getElementById("start-tone");
+const synthButton = document.getElementById("synth-button");
+
+const showStart = document.getElementsByClassName('show-on-start');
+const hideStart = document.getElementsByClassName('hide-on-start');
+
+const showMore = document.getElementById('info-button');
+const moreInfo = document.getElementsByClassName('more-info');
+
+let initialized = false;
+
+// style utilities
+showMore.onclick = () => {
+    if (showMore.innerHTML === 'Show more info...') {
+        for (let element of moreInfo) {
+            element.style.display = 'block';
+            document.querySelector('#info-button').innerHTML = "Hide info";
+        }
+    } else if (showMore.innerHTML === 'Hide info') {
+        for (let element of moreInfo) {
+            element.style.display = 'none';
+            document.querySelector('#info-button').innerHTML = "Show more info...";
+        }
+    }
+}
+
+
+
+// application start, show synth play button
+startButton.onclick = async () => {
+    await Tone.start()
+    .then(() => {
+        synthButton.style.display = "block";
+        startButton.style.display = "none";
+
+        for (let element of showStart) {
+            element.style.display = "flex";
+        }
+        for (let element of hideStart) {
+            element.style.display = "none";
+        }
+    });
+}
+
+// initialize four voices
+const soprano = new Tone.Synth().toDestination();
+const alto = new Tone.Synth().toDestination();
+const tenor = new Tone.Synth().toDestination();
+const bass = new Tone.Synth().toDestination();
+
+// test
+const audioTest = () => {
+    soprano.triggerAttackRelease("C5", "8n");
+    alto.triggerAttackRelease("F4", "8n");
+    tenor.triggerAttackRelease("E4", "8n");
+    bass.triggerAttackRelease("G3", "8n");
+}
+
+synthButton.onclick = audioTest;
+
+// set up transport
+let clock = 0;
+let slowClock = 0;
+
+const transportStart = document.getElementById('transport-start');
+
+Tone.Transport.schedule((time) => {
+    clock += 2;
+    slowClock += 1;
+
+    console.log(`clock: ${clock}, slow: ${slowClock}`);
+
+    if (clock % 4 === 0) {
+        console.log('caught');
+    }
+    
+    if (slowClock % 4 === 0) {
+        console.log("slow");
+        audioTest();
+    }
+}, 1);
+
+transportStart.onclick = Tone.Transport.start();