ergz
/
simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ergz:3773cfd778da2dca75c135150fc9c52bbec2d0ca
Branches Tags
ergz:main
...
compare: ergz:7bed2c60855a5c895dd8fb92f6fdb12544fda052
Branches Tags
ergz:main

2 Commits
3773cfd778 ... 7bed2c6085

Author SHA1 Message Date
Emanuel Rodriguez 7bed2c6085 renames synth to index 2023-10-13 00:09:28 -07:00
Emanuel Rodriguez 77af7d2576 add detune to rest of the voices 2023-10-12 23:05:37 -07:00
2 changed files with 27 additions and 9 deletions
Show Stats Expand all files Collapse all files

18
synth.html → index.html
View File

@ -40,11 +40,11 @@
<span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span> <span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div> </div>
<div style="padding: 5px"> <!-- <div style="padding: 5px">
<label for="filtervoice1" class="block text-sm font-medium text-gray-700 mb-1">filter voice</label> <label for="filtervoice1" class="block text-sm font-medium text-gray-700 mb-1">filter voice</label>
<input id="filtervoice1" type="range" min="700" max="1500" value="1000" step="1" class="slider bg-gray-300 h-2 rounded-full outline-none"/> <input id="filtervoice1" type="range" min="700" max="1500" value="1000" step="1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="filtervoice1display" class="text-sm text-gray-700 ml-2">0</span> <span id="filtervoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div> </div> -->
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4"> <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave1viz" class="canvas-container"> <div id = "wave1viz" class="canvas-container">
@ -78,6 +78,13 @@
</fieldset> </fieldset>
</div> </div>
<div style="padding: 5px">
<label for="detunevoice2" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice2" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice2display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4"> <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave2viz" class="canvas-container"> <div id = "wave2viz" class="canvas-container">
<canvas id ="wave2canvas"></canvas> <canvas id ="wave2canvas"></canvas>
@ -109,6 +116,13 @@
<button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button> <button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset> </fieldset>
</div> </div>
<div style="padding: 5px">
<label for="detunevoice3" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice3" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice3display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4"> <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave3viz" class="canvas-container"> <div id = "wave3viz" class="canvas-container">

18
synth.js
View File

@ -291,13 +291,17 @@ window.onload = function () {
setupOctaveControls(i, synth); // Call setupOctaveControls for each voice setupOctaveControls(i, synth); // Call setupOctaveControls for each voice
} }
// detune // detune
const detuneSliderVoice1 = document.getElementById("detunevoice1"); ["1", "2", "3"].forEach((voiceNumber, index) => {
const detunevoice1Display = document.getElementById("detunevoice1display"); const detuneSlider = document.getElementById(`detunevoice${voiceNumber}`);
detuneSliderVoice1.addEventListener("input", (event) => { const detuneDisplay = document.getElementById(
let osc = synth.oscillators[0]; `detunevoice${voiceNumber}display`
let detune = parseFloat(detuneSliderVoice1.value); );
console.log(detune); detuneSlider.addEventListener("input", (event) => {
updateFrequency(event, synth, osc, 0, null, null, detune); let osc = synth.oscillators[index];
let detune = parseFloat(detuneSlider.value);
console.log(detune);
updateFrequency(event, synth, osc, index, null, null, detune);
});
}); });
// const filterSliderVoice1 = document.getElementById("filtervoice1"); // const filterSliderVoice1 = document.getElementById("filtervoice1");