innocuous-symmetry/procedural-drones-01
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

converting some html elements for ts compatibility

Browse Source
This commit is contained in:
Mikayla Dobson
2022-05-09 20:07:10 -05:00
parent 2facb3826b
commit b84eb10310
4 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
built/src/harmonyUtil.js
View File

@@ -11,9 +11,9 @@ const intervals = {
// all intervals beyond this invert to one of the previous intervals
};
// helper functions
const transposePitches = (pitchNames, interval) => {
const transposePitches = (pitches, interval) => {
let transposed = [];
pitchNames.forEach(pitch => transposed.push((pitch + interval) % 12));
pitches.forEach(pitch => transposed.push((pitch + interval) % 12));
return transposed;
};
const findVector = (pitches) => {

24
built/src/inputHandling.js
View File

@@ -19,31 +19,39 @@ const bassLFOTarget = document.getElementById('bass-lfo-target');
// logic for displaying values on HTML labels
// S
sopranoVol.oninput = (e) => {
sopranoVolTarget.innerHTML = e.target.value;
const target = e.target;
sopranoVolTarget.innerHTML = target.value;
};
sopLFO.oninput = (e) => {
sopLFOTarget.innerHTML = ` ${e.target.value} Hz.`;
const target = e.target;
sopLFOTarget.innerHTML = ` ${target.value} Hz.`;
};
// A
altoVol.oninput = (e) => {
altoVolTarget.innerHTML = e.target.value;
const target = e.target;
altoVolTarget.innerHTML = target.value;
};
altoLFO.oninput = (e) => {
altoLFOTarget.innerHTML = ` ${e.target.value} Hz.`;
const target = e.target;
altoLFOTarget.innerHTML = ` ${target.value} Hz.`;
};
// T
tenVol.oninput = (e) => {
tenVolTarget.innerHTML = e.target.value;
const target = e.target;
tenVolTarget.innerHTML = target.value;
};
tenLFO.oninput = (e) => {
tenLFOTarget.innerHTML = ` ${e.target.value} Hz.`;
const target = e.target;
tenLFOTarget.innerHTML = ` ${target.value} Hz.`;
};
// B
bassVol.oninput = (e) => {
bassVolTarget.innerHTML = e.target.value;
const target = e.target;
bassVolTarget.innerHTML = target.value;
};
bassLFO.oninput = (e) => {
bassLFOTarget.innerHTML = ` ${e.target.value.toString()} Hz.`;
const target = e.target;
bassLFOTarget.innerHTML = ` ${target.value} Hz.`;
};
// audio-adjacent input handling
const synthButton = document.getElementById('synth-button');

6
index.html
View File

@@ -118,9 +118,9 @@
<!-- Tone.js library -->
<script type="module" src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
<!-- internal scripts -->
<script type="module" src="./src/inputHandling.js"></script>
<script type="module" src="./src/toneGeneration.js"></script>
<script type="module" src="./src/styleUtils.js"></script>
<script type="module" src="./built/src/inputHandling.js"></script>
<script type="module" src="./built/src/toneGeneration.js"></script>
<script type="module" src="./built/src/styleUtils.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>

24
src/inputHandling.js → src/inputHandling.ts
View File

@@ -24,38 +24,46 @@ const bassLFOTarget = document.getElementById('bass-lfo-target');
// logic for displaying values on HTML labels
// S
sopranoVol.oninput = (e) => {
sopranoVolTarget.innerHTML = e.target.value;
const target = e.target as HTMLInputElement;
sopranoVolTarget.innerHTML = target.value;
}
sopLFO.oninput = (e) => {
sopLFOTarget.innerHTML = ` ${e.target.value} Hz.`;
const target = e.target as HTMLInputElement;
sopLFOTarget.innerHTML = ` ${target.value} Hz.`;
}
// A
altoVol.oninput = (e) => {
altoVolTarget.innerHTML = e.target.value;
const target = e.target as HTMLInputElement;
altoVolTarget.innerHTML = target.value;
}
altoLFO.oninput = (e) => {
altoLFOTarget.innerHTML = ` ${e.target.value} Hz.`;
const target = e.target as HTMLInputElement;
altoLFOTarget.innerHTML = ` ${target.value} Hz.`;
}
// T
tenVol.oninput = (e) => {
tenVolTarget.innerHTML = e.target.value;
const target = e.target as HTMLInputElement;
tenVolTarget.innerHTML = target.value;
}
tenLFO.oninput = (e) => {
tenLFOTarget.innerHTML = ` ${e.target.value} Hz.`;
const target = e.target as HTMLInputElement;
tenLFOTarget.innerHTML = ` ${target.value} Hz.`;
}
// B
bassVol.oninput = (e) => {
bassVolTarget.innerHTML = e.target.value;
const target = e.target as HTMLInputElement;
bassVolTarget.innerHTML = target.value;
}
bassLFO.oninput = (e) => {
bassLFOTarget.innerHTML = ` ${e.target.value.toString()} Hz.`;
const target = e.target as HTMLInputElement;
bassLFOTarget.innerHTML = ` ${target.value} Hz.`;
}
// audio-adjacent input handling