added osc to the rest of the voices

synth.html

@@ -50,7 +50,6 @@
                 <div id = "wave1viz" class="canvas-container">
                     <canvas id ="wave1canvas"></canvas>
                 </div>
-                <!-- Rest of your HTML for this container... -->
             </div>
             
             
@@ -79,6 +78,13 @@
                 </fieldset>
             </div>
             
+            <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+                <div id = "wave2viz" class="canvas-container">
+                    <canvas id ="wave2canvas"></canvas>
+                </div>
+            </div>
+
+
             <button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
         </div>
         
@@ -104,6 +110,13 @@
                 </fieldset>
             </div>
             
+            <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+                <div id = "wave3viz" class="canvas-container">
+                    <canvas id ="wave3canvas"></canvas>
+                </div>
+            </div>
+
+
             <button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
         </div>
         

synth.js

@@ -336,56 +336,57 @@ window.onload = function () {
   });
 
   // do the viz
-  const vizCanvas = document.getElementById("wave1canvas");
+  const canvasIds = ["wave1canvas", "wave2canvas", "wave3canvas"];
-  const ctx = vizCanvas.getContext("2d");
+
-  const analyser = synth.audioContext.createAnalyser();
+  const vizObjects = canvasIds.map((id, index) => {
-  analyser.fftSize = 2048;
+    const canvas = document.getElementById(id);
-  let osc = synth.oscillators[0].osc;
+    const ctx = canvas.getContext("2d");
-  osc.connect(analyser);
+
-  const bufferLength = analyser.fftSize;
+    const analyser = synth.audioContext.createAnalyser();
-  const dataArray = new Uint8Array(bufferLength);
+    analyser.fftSize = 2048;
+
+    synth.oscillators[index].osc.connect(analyser);
+    const bufferLength = analyser.fftSize;
+    const dataArray = new Uint8Array(bufferLength);
+
+    return { canvas, ctx, analyser, index, bufferLength, dataArray };
+  });
 
   function draw() {
-    // Get the waveform data
+    vizObjects.forEach((viz) => {
-    analyser.getByteTimeDomainData(dataArray);
+      viz.analyser.getByteTimeDomainData(viz.dataArray);
+      viz.ctx.clearRect(0, 0, viz.canvas.width, viz.canvas.height);
+      viz.ctx.fillStyle = "black";
+      viz.ctx.fillRect(0, 0, viz.canvas.width, viz.canvas.height);
+      viz.ctx.lineWidth = 2;
+      viz.ctx.strokeStyle = "rgb(0, 200, 100)";
 
-    // Clear the canvas
+      viz.ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
-    ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
+      viz.ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
+      viz.ctx.shadowOffsetX = 2;
+      viz.ctx.shadowOffsetY = 5;
 
-    ctx.fillStyle = "black";
+      viz.ctx.beginPath();
-    ctx.fillRect(0, 0, vizCanvas.width, vizCanvas.height);
-    // Set up the drawing parameters
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = "rgb(0, 200, 100)";
 
-    // Set up the glowing effect
+      const sliceWidth = (viz.canvas.width * 1.0) / viz.bufferLength;
-    ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
+      let x = 0;
-    ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
-    // Optionally, you can offset the shadow if desired
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 5;
 
-    // Begin the path
+      for (let i = 0; i < viz.bufferLength; i++) {
-    ctx.beginPath();
+        const v = viz.dataArray[i] / 128.0;
+        const y = (v * viz.canvas.height) / 2;
 
-    const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
+        if (i === 0) {
-    let x = 0;
+          viz.ctx.moveTo(x, y);
+        } else {
+          viz.ctx.lineTo(x, y);
+        }
 
-    for (let i = 0; i < bufferLength; i++) {
+        x += sliceWidth;
-      const v = dataArray[i] / 128.0;
-      const y = (v * vizCanvas.height) / 2;
-
-      if (i === 0) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
       }
 
-      x += sliceWidth;
+      viz.ctx.lineTo(viz.canvas.width, viz.canvas.height / 2);
-    }
+      viz.ctx.stroke();
-
+    });
-    ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
-    ctx.stroke();
 
     requestAnimationFrame(draw);
   }