From 84016c2894f4ff71784f8eb7b0be18bed98669d8 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Mon, 9 May 2022 12:25:25 -0500
Subject: [PATCH] slider model built
---
app.css | 24 ++++++++++++++++++++++++
app.js | 47 +++++++++++++++++++++++++++++++++++++++++------
index.html | 32 +++++++++++++++++++++++++++++---
inputHandling.js | 6 ++++++
4 files changed, 100 insertions(+), 9 deletions(-)
create mode 100644 inputHandling.js
diff --git a/app.css b/app.css
index d0ca029..aa4a0cc 100644
--- a/app.css
+++ b/app.css
@@ -1,3 +1,27 @@
+* {
+ margin: 0;
+}
+
+header {
+ display: block;
+ position: fixed;
+ width: 100%;
+ text-align: center;
+ height: 6rem;
+ top: 0;
+ padding: 2rem;
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ width: 80%;
+ align-items: center;
+ position: relative;
+ top: 8rem;
+
+}
+
#synth-button {
display: none;
}
\ No newline at end of file
diff --git a/app.js b/app.js
index c547eac..a86946c 100644
--- a/app.js
+++ b/app.js
@@ -1,16 +1,51 @@
// element identifiers
-
-const element = document.getElementById("start-tone");
+const startButton = document.getElementById("start-tone");
const synthButton = document.getElementById("synth-button");
-element.onclick = async () => {
+let initialized = false;
+
+// application start, show synth play button
+startButton.onclick = async () => {
await Tone.start()
.then(synthButton.style.display = "block");
}
-const synth = new Tone.Synth().toMaster();
+// 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();
-synthButton.onclick = () => {
- synth.triggerAttackRelease("C4", "8n")
+// 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();
diff --git a/index.html b/index.html
index f464f6e..cbcccb6 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,37 @@
- Tone
-
-
+
+ Procedural Drone, No. 1
+ Design and engineering by Mikayla Dobson
+
+
+
+
+
+
+
+
+
+
+
+
+