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

adds selection of waveform to each voice 

the code still needs to be optimized, since I am repeating the
code a bunch
This commit is contained in:
Emanuel Rodriguez 2023-10-08 02:45:04 -07:00
parent 6dad2f054a
commit 481c9e1313
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
synth.html
View File

@ -73,13 +73,13 @@
<form style="padding: 5px">
<legend>Voice 3</legend>
<input type="radio" id="wave3_sinwave" name="wavechoice2" value="sine" checked>
<input type="radio" id="wave3_sinwave" name="wavechoice3" value="sine" checked>
<label for="wave3_sinwave">Sine</label>
<input type="radio" id="wave3_squarewave" name="wavechoice2" value="square">
<input type="radio" id="wave3_squarewave" name="wavechoice3" value="square">
<label for="wave3_squarewave">Square</label>
<input type="radio" id="wave3_triwave" name="wavechoice2" value="triangle">
<input type="radio" id="wave3_triwave" name="wavechoice3" value="triangle">
<label for="wave3_triwave">Triangle</label>
<input type="radio" id="wave3_sawtoothwave" name="wavechoice2" value="sawtooth">
<input type="radio" id="wave3_sawtoothwave" name="wavechoice3" value="sawtooth">
<label for="wave3_sawtoothwave">Sawtooth</label>
</form>
<div style="padding: 5px">

40
synth.js
View File

@ -24,9 +24,9 @@ class Synth {
this.audioContext = new AudioContext();
this.gain = this.audioContext.createGain();
this.oscillators = [
this.createOscillator("sawtooth", 261.63, 0),
this.createOscillator("sawtooth", 261.63, 0),
this.createOscillator("sawtooth", 261.63, 0),
this.createOscillator("sine", 261.63, 0),
this.createOscillator("sine", 261.63, 0),
this.createOscillator("sine", 261.63, 0),
];
this.gain.connect(this.audioContext.destination);
}
@ -171,7 +171,7 @@ window.onload = function () {
if (osc1.isPlaying) {
synth.stopOsc(osc1);
event.target.textContent = "On";
event.target.style.backgroundColor = "greenyellow";
event.target.style.backgroundColor = "#2f855a";
} else {
synth.startOsc(osc1);
event.target.textContent = "Off";
@ -188,7 +188,7 @@ window.onload = function () {
if (osc2.isPlaying) {
synth.stopOsc(osc2);
event.target.textContent = "On";
event.target.style.backgroundColor = "greenyellow";
event.target.style.backgroundColor = "#2f855a";
} else {
synth.startOsc(osc2);
event.target.textContent = "Off";
@ -205,7 +205,7 @@ window.onload = function () {
if (osc3.isPlaying) {
synth.stopOsc(osc3);
event.target.textContent = "On";
event.target.style.backgroundColor = "greenyellow";
event.target.style.backgroundColor = "#2f855a";
} else {
synth.startOsc(osc3);
event.target.textContent = "Off";
@ -227,6 +227,34 @@ window.onload = function () {
});
});
// handle waveform selection
document.querySelectorAll("input[name='wavechoice1']").forEach((rb) => {
rb.addEventListener("change", (event) => {
let selectedWaveform = document.querySelector(
"input[name='wavechoice1']:checked"
).value;
synth.oscillators[0].osc.type = selectedWaveform;
});
});
document.querySelectorAll("input[name='wavechoice2']").forEach((rb) => {
rb.addEventListener("change", (event) => {
let selectedWaveform = document.querySelector(
"input[name='wavechoice2']:checked"
).value;
synth.oscillators[1].osc.type = selectedWaveform;
});
});
document.querySelectorAll("input[name='wavechoice3']").forEach((rb) => {
rb.addEventListener("change", (event) => {
let selectedWaveform = document.querySelector(
"input[name='wavechoice3']:checked"
).value;
synth.oscillators[2].osc.type = selectedWaveform;
});
});
// Loop through each voice and set up its octave control buttons
for (let i = 0; i < synth.oscillators.length; i++) {
setupOctaveControls(i, synth); // Call setupOctaveControls for each voice