added style utils

app.css

@@ -1,13 +1,21 @@
+/* universal styles */
 * {
     margin: 0;
+    font-family: sans-serif;
 }
 
+/* javascript utilities */
+.show-on-start {
+    display: none;
+}
+
+/* document styles */
 header {
     display: block;
     position: fixed;
     width: 100%;
     text-align: center;
-    height: 6rem;
+    min-height: 12rem;
     top: 0;
     padding: 2rem;
 }
@@ -15,11 +23,22 @@ header {
 main {
     display: flex;
     flex-direction: column;
-    width: 80%;
+    width: 100%;
     align-items: center;
     position: relative;
-    top: 8rem;
+    top: 15rem;   
-    
+}
+
+.audio-controls {
+    display: flex;
+    width: 80%;
+}
+
+.controls {
+    display: inline-flex;
+    flex-direction: column;
+    border: 1px solid black;
+    align-items: center;
 }
 
 #synth-button {

index.html

@@ -8,14 +8,23 @@
         <header>
             <h1>Procedural Drone, No. 1</h1>
             <h2>Design and engineering by Mikayla Dobson</h2>
+
+            <button class="show-on-start" id="info-button">Show more info...</button>
+
+            <div class="hide-on-start more-info">
+                <p>Musical widget designed using Tone.js and the Web Audio API.</p>
+                <p>Sliders control output parameters of four independent oscillators modulated by four independent low frequency oscillators (LFOs).</p>
+                <p>JavaScript passes your inputs to the browser and procedurally constructs harmonies based on developer-defined logic based on tenets of music theory.</p>
+            </div>
+            <button class-name="destroy-on-start" id="start-tone">Click here to begin.</button>
         </header>
 
         <main>            
-            <button id="start-tone">Audio On</button>
+            <div class="show-on-start">
-
+                <div>
-            <div class="audio-on">
+                    <button id="synth-button">Test Audio</button>
-                <button id="synth-button">Test Audio</button>
+                    <button id="transport-start">Start Transport</button>
-                <button id="transport-start">Start Transport</button>
+                </div>
 
                 <div class="visuals">
                     <div class="voice" id="soprano"></div>
@@ -25,17 +34,64 @@
                 </div>
 
                 <form class="audio-controls">
-                    <label for="soprano-vol">
+                    <div class="controls">
-                        <p>Soprano Volume:</p>
+                        <h3>Soprano</h3>
-                        <p id="soprano-vol-target">-</p>
+                        <label for="soprano-vol">
-                    </label>
+                            <p>Soprano Volume:</p>
-                    <input id="soprano-vol" type="range" min="5" max="20">
+                            <p id="soprano-vol-target">-</p>
+                        </label>
+                        <input id="soprano-vol" type="range" min="5" max="20">
+                        <label for="sop-lfo">
+                            <p>Soprano LFO (Hz.)</p>
+                            <p id="sop-lfo-target">-</p>
+                        </label>
+                        <input id="sop-lfo" type="range" min="1" max="20" step="0.2">
+                    </div>
+                    <div class="controls">
+                        <h3>Alto</h3>
+                        <label for="alto-vol">
+                            <p>Alto Volume:</p>
+                            <p id="alto-vol-target">-</p>
+                        </label>
+                        <input id="alto-vol" type="range" min="5" max="20">
+                        <label for="alto-lfo">
+                            <p>Alto LFO (Hz).</p>
+                            <p id="alto-lfo-target">-</p>
+                        </label>
+                        <input id="alto-lfo" type="range" min="1" max="20" step="0.2">
+                    </div>
+                    <div class="controls">
+                        <h3>Tenor</h3>
+                        <label for="ten-vol">
+                            <p>Tenor Volume:</p>
+                            <p id="ten-vol-target">-</p>
+                        </label>
+                        <input id="ten-vol" type="range" min="5" max="20">
+                        <label for="ten-lfo">
+                            <p>Tenor LFO (Hz.)</p>
+                            <p id="ten-lfo-target">-</p>
+                        </label>
+                        <input id="ten-lfo" type="range" min="1" max="20" step="0.2">
+                    </div>
+                    <div class="controls">
+                        <h3>Bass</h3>
+                        <label for="bass-vol">
+                            <p>Bass Volume:</p>
+                            <p id="bass-vol-target">-</p>
+                        </label>
+                        <input id="bass-vol" type="range" min="5" max="20">
+                        <label for="bass-lfo">
+                            <p>Bass LFO (Hz.)/p>
+                            <p id="bass-lfo-target">-</p>
+                        </label>
+                        <input id="bass-lfo" type="range" min="1" max="20" step="0.2">
+                    </div>
                 </form>
             </div>
         </main>
 
-        <script type="module" src="app.js"></script>
+        <script type="module" src="./js/app.js"></script>
-        <script type="module" src="inputHandling.js"></script>
+        <script type="module" src="./js/inputHandling.js"></script>
         <script src="https://unpkg.com/tone/build/Tone.js"></script>
     </body>
 </html>

inputHandling.js

@@ -1,6 +0,0 @@
-const sopranoVol = document.getElementById('soprano-vol');
-const sopranoVolTarget = document.getElementById('soprano-vol-target');
-
-sopranoVol.oninput = (e) => {
-    sopranoVolTarget.innerHTML = e.target.value;
-}

js/app.js

@@ -2,12 +2,45 @@
 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");
+    .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

js/inputHandling.js

@@ -0,0 +1,57 @@
+// slider variables referring to DOM
+export const sopranoVol = document.getElementById('soprano-vol');
+const sopranoVolTarget = document.getElementById('soprano-vol-target');
+export const sopLFO = document.getElementById('sop-lfo');
+const sopLFOTarget = document.getElementById('sop-lfo-target');
+
+export const altoVol = document.getElementById('alto-vol');
+const altoVolTarget = document.getElementById('alto-vol-target');
+export const altoLFO = document.getElementById('alto-lfo');
+const altoLFOTarget = document.getElementById('alto-lfo-target');
+
+export const tenVol = document.getElementById('ten-vol');
+const tenVolTarget = document.getElementById('ten-vol-target');
+export const tenLFO = document.getElementById('ten-lfo');
+const tenLFOTarget = document.getElementById('ten-lfo-target');
+
+export const bassVol = document.getElementById('bass-vol');
+const bassVolTarget = document.getElementById('bass-vol-target');
+export const bassLFO = document.getElementById('bass-lfo');
+const bassLFOTarget = document.getElementById('bass-lfo-target');
+
+// logic for displaying values on HTML labels
+// S
+sopranoVol.oninput = (e) => {
+    sopranoVolTarget.innerHTML = e.target.value;
+}
+
+sopLFO.oninput = (e) => {
+    sopLFOTarget.innerHTML = e.target.value;
+}
+
+// A
+altoVol.oninput = (e) => {
+    altoVolTarget.innerHTML = e.target.value;
+}
+
+altoLFO.oninput = (e) => {
+    altoLFOTarget.innerHTML = e.target.value;
+}
+
+// T
+tenVol.oninput = (e) => {
+    tenVolTarget.innerHTML = e.target.value;
+}
+
+tenLFO.oninput = (e) => {
+    tenLFOTarget.innerHTML = e.target.value;
+}
+
+// B
+bassVol.oninput = (e) => {
+    bassVolTarget.innerHTML = e.target.value;
+}
+
+bassLFO.oninput = (e) => {
+    bassLFOTarget.innerHTML = e.target.value;
+}

requireTone.js

@@ -1,3 +0,0 @@
-const Tone = require('tone');
-
-module.exports = Tone;