diff --git a/app.css b/app.css index aa4a0cc..808246a 100644 --- a/app.css +++ b/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 { diff --git a/index.html b/index.html index cbcccb6..c9e1881 100644 --- a/index.html +++ b/index.html @@ -8,14 +8,23 @@

Procedural Drone, No. 1

Design and engineering by Mikayla Dobson

+ + + +
+

Musical widget designed using Tone.js and the Web Audio API.

+

Sliders control output parameters of four independent oscillators modulated by four independent low frequency oscillators (LFOs).

+

JavaScript passes your inputs to the browser and procedurally constructs harmonies based on developer-defined logic based on tenets of music theory.

+
+
- - -
- - +
+
+ + +
@@ -25,17 +34,64 @@
- - +
+

Soprano

+ + + + +
+
+

Alto

+ + + + +
+
+

Tenor

+ + + + +
+
+

Bass

+ + + + +
- - + + \ No newline at end of file diff --git a/inputHandling.js b/inputHandling.js deleted file mode 100644 index 30b008a..0000000 --- a/inputHandling.js +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/app.js b/js/app.js similarity index 52% rename from app.js rename to js/app.js index a86946c..c1a890c 100644 --- a/app.js +++ b/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 diff --git a/js/inputHandling.js b/js/inputHandling.js new file mode 100644 index 0000000..f04b3e2 --- /dev/null +++ b/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; +} diff --git a/js/toneGeneration.js b/js/toneGeneration.js new file mode 100644 index 0000000..e69de29 diff --git a/requireTone.js b/requireTone.js deleted file mode 100644 index 6c49068..0000000 --- a/requireTone.js +++ /dev/null @@ -1,3 +0,0 @@ -const Tone = require('tone'); - -module.exports = Tone; \ No newline at end of file