slider model built

2022-05-09 12:25:25 -05:00
parent d2e982fa52
commit 84016c2894
4 changed files with 100 additions and 9 deletions
--- 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;
 }
--- 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();
--- a/index.html
+++ b/index.html
@@ -5,11 +5,37 @@
    </head>

    <body>
-        <h1>Tone</h1>
-        <button id="start-tone">START?</button>
-        <button id="synth-button">SYNTH???</button>
+        <header>
+            <h1>Procedural Drone, No. 1</h1>
+            <h2>Design and engineering by Mikayla Dobson</h2>
+        </header>
+
+        <main>            
+            <button id="start-tone">Audio On</button>
+
+            <div class="audio-on">
+                <button id="synth-button">Test Audio</button>
+                <button id="transport-start">Start Transport</button>
+
+                <div class="visuals">
+                    <div class="voice" id="soprano"></div>
+                    <div class="voice" id="alto"></div>
+                    <div class="voice" id="tenor"></div>
+                    <div class="voice" id="bass"></div>
+                </div>
+
+                <form class="audio-controls">
+                    <label for="soprano-vol">
+                        <p>Soprano Volume:</p>
+                        <p id="soprano-vol-target">-</p>
+                    </label>
+                    <input id="soprano-vol" type="range" min="5" max="20">
+                </form>
+            </div>
+        </main>

        <script type="module" src="app.js"></script>
+        <script type="module" src="inputHandling.js"></script>
        <script src="https://unpkg.com/tone/build/Tone.js"></script>
    </body>
 </html>
--- a/inputHandling.js
+++ b/inputHandling.js
@@ -0,0 +1,6 @@
+const sopranoVol = document.getElementById('soprano-vol');
+const sopranoVolTarget = document.getElementById('soprano-vol-target');
+
+sopranoVol.oninput = (e) => {
+    sopranoVolTarget.innerHTML = e.target.value;
+}