From 481c9e13130938d6c57ce4441619327500853408 Mon Sep 17 00:00:00 2001
From: ergz <emnlrodriguez@gmail.com>
Date: Sun, 8 Oct 2023 02:45:04 -0700
Subject: [PATCH] adds selection of waveform to each voice

the code still needs to be optimized, since I am repeating the
code a bunch
---
 synth.html |  8 ++++----
 synth.js   | 40 ++++++++++++++++++++++++++++++++++------
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/synth.html b/synth.html
index 91b327d..e591f05 100644
--- a/synth.html
+++ b/synth.html
@@ -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">
diff --git a/synth.js b/synth.js
index ceda566..5ce2208 100644
--- a/synth.js
+++ b/synth.js
@@ -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