improves the voice vol + mater vol

index.html

@@ -34,18 +34,18 @@
                 </fieldset>
             </div>
             
+            <div style="padding: 5px">
+                <label for="volumevoice1" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>    
+                <input id="volumevoice1" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <span id="volumevoice1display" class="text-sm text-gray-700 ml-2">0</span>
+            </div>
+            
             <div style="padding: 5px">
                 <label for="detunevoice1" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>    
                 <input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
                 <span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
             </div>
-
+            
-            <!-- <div style="padding: 5px">
-                <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"/>
-                <span id="filtervoice1display" 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 id = "wave1viz" class="canvas-container">
                     <canvas id ="wave1canvas"></canvas>
@@ -78,27 +78,34 @@
                 </fieldset>
             </div>
             
+            <div style="padding: 5px">
+                <label for="volumevoice2" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>    
+                <input id="volumevoice2" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <span id="volumevoice2display" class="text-sm text-gray-700 ml-2">0</span>
+            </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 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>
         
         <div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
             
             <form style="padding: 5px">
-                <legend>Voice 3</legend>  
+                <legend class="text-lg mb-2">Voice 3</legend>  
                 <input type="radio" id="wave3_sinwave" name="wavechoice3" value="sine" checked>
                 <label for="wave3_sinwave">Sine</label>
                 <input type="radio" id="wave3_squarewave" name="wavechoice3" value="square">
@@ -108,7 +115,7 @@
                 <input type="radio" id="wave3_sawtoothwave" name="wavechoice3" value="sawtooth">
                 <label for="wave3_sawtoothwave">Sawtooth</label>
             </form>
-            <div style="padding: 5px">
+            <div class="flex items-center space-x-2 my-3">
                 <fieldset>
                     <legend>Octave Selection</legend>
                     <button id="octavedown3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
@@ -116,53 +123,106 @@
                     <button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
                 </fieldset>
             </div>
-
+            
+            <div style="padding: 5px">
+                <label for="volumevoice3" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>    
+                <input id="volumevoice3" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <span id="volumevoice3display" class="text-sm text-gray-700 ml-2">0</span>
+            </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 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>
         
-        
-        
-        
-        
     </div>
+    
+    <div style="padding: 5px">
+        <label for="mastervol" class="block text-sm font-medium text-gray-700 mb-1">Master Volume</label>    
+        <input id="mastervol" type="range" min="0" max=".6" value=".2" step=".01" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+        <span id="mastervoldisplay" class="text-sm text-gray-700 ml-2">0</span>
+    </div>
+    <div>
+        
+        
+        
+        <label for="chordscales">Choose Scale:</label>
+        <select id="chordscales">
+            <option value="Cscale">C</option>
+            <option value="Dscale">D</option>
+            <option value="Esclae">E</option>
+        </select>
+        
+    </div>        
+    
+    
     <div>
         <form style="padding: 15px">
             <fieldset>
-                <legend>Chords</legend>  
+                <legend>Chords</legend>
-                <input type="radio" id="chordC"  name="chordchoice" value="C" checked>
-                <label for="chordC">C</label>
                 
-                <input type="radio" id="chordD" name="chordchoice" value="D">
+                <!-- Major Chords -->
-                <label for="chordD">D</label>
+                <div>
-                
+                    
-                <input type="radio" id="chordE" name="chordchoice" value="E">
+                    <input type="radio" id="chordC" name="chordchoice" value="C" checked>
-                <label for="chordE">E</label>
+                    <label for="chordC">C</label>
-                
+                    
-                <input type="radio" id="chordF" name="chordchoice" value="F">
+                    <input type="radio" id="chordD" name="chordchoice" value="D">
-                <label for="chordF">F</label>
+                    <label for="chordD">D</label>
-                
+                    
-                <input type="radio" id="chordG" name="chordchoice" value="G">
+                    <input type="radio" id="chordE" name="chordchoice" value="E">
-                <label for="chordG">G</label>
+                    <label for="chordE">E</label>
-                
+                    
-                <input type="radio" id="chordA" name="chordchoice" value="A">
+                    <input type="radio" id="chordF" name="chordchoice" value="F">
-                <label for="chordA">A</label>
+                    <label for="chordF">F</label>
-                
+                    
-                <input type="radio" id="chordB" name="chordchoice" value="B">
+                    <input type="radio" id="chordG" name="chordchoice" value="G">
-                <label for="chordB">B</label>
+                    <label for="chordG">G</label>
+                    
+                    <input type="radio" id="chordA" name="chordchoice" value="A">
+                    <label for="chordA">A</label>
+                    
+                    <input type="radio" id="chordB" name="chordchoice" value="B">
+                    <label for="chordB">B</label>
+                    
+                </div>
+                <div>
+                    
+                    <!-- Minor Chords -->
+                    <input type="radio" id="chordCm" name="chordchoice" value="Cm">
+                    <label for="chordCm">Cm</label>
+                    
+                    <input type="radio" id="chordDm" name="chordchoice" value="Dm">
+                    <label for="chordDm">Dm</label>
+                    
+                    <input type="radio" id="chordEm" name="chordchoice" value="Em">
+                    <label for="chordEm">Em</label>
+                    
+                    <input type="radio" id="chordFm" name="chordchoice" value="Fm">
+                    <label for="chordFm">Fm</label>
+                    
+                    <input type="radio" id="chordGm" name="chordchoice" value="Gm">
+                    <label for="chordGm">Gm</label>
+                    
+                    <input type="radio" id="chordAm" name="chordchoice" value="Am">
+                    <label for="chordAm">Am</label>
+                    
+                    <input type="radio" id="chordBm" name="chordchoice" value="Bm">
+                    <label for="chordBm">Bm</label>
+                </div>
                 
             </fieldset>
         </form>

synth.js

@@ -1,21 +1,37 @@
 let canvas;
 let analyserNode;
 let signalData;
+let masterVolume;
 
 function noteToHz(note) {
   switch (note) {
     case "C":
       return 261.63;
+    case "C#":
+    case "Db":
+      return 277.18;
     case "D":
       return 293.66;
+    case "D#":
+    case "Eb":
+      return 311.13;
     case "E":
       return 329.63;
     case "F":
       return 349.23;
+    case "F#":
+    case "Gb":
+      return 369.99;
     case "G":
-      return 392;
+      return 392.0;
+    case "G#":
+    case "Ab":
+      return 415.3;
     case "A":
-      return 440;
+      return 440.0;
+    case "A#":
+    case "Bb":
+      return 466.16;
     case "B":
       return 493.88;
     default:
@@ -25,30 +41,64 @@ function noteToHz(note) {
 
 function composeChord(chord) {
   switch (chord) {
-    case "C": {
+    case "C":
-      return ["C", "G", "E"];
+      return ["C", "E", "G"]; // C Major
-    }
+    case "Cm":
-    case "D": {
+      return ["C", "D#", "G"]; // C Minor
-      return ["D", "F", "A"];
+    case "Cdim":
-    }
+      return ["C", "D#", "F#"]; // C Diminished
-    case "E": {
+    case "Caug":
-      return ["E", "G", "B"];
+      return ["C", "E", "G#"]; // C Augmented
-    }
+    case "D":
-    case "F": {
+      return ["D", "F#", "A"]; // D Major
-      return ["F", "A", "C"];
+    case "Dm":
-    }
+      return ["D", "F", "A"]; // D Minor
-    case "G": {
+    case "Ddim":
-      return ["G", "B", "D"];
+      return ["D", "F", "G#"]; // D Diminished
-    }
+    case "Daug":
-    case "A": {
+      return ["D", "F#", "A#"]; // D Augmented
-      return ["A", "C", "E"];
+    case "E":
-    }
+      return ["E", "G#", "B"]; // E Major
-    case "B": {
+    case "Em":
-      return ["B", "D", "F"];
+      return ["E", "G", "B"]; // E Minor
-    }
+    case "Edim":
-    default: {
+      return ["E", "G", "A#"]; // E Diminished
-      return ["C", "D", "E"];
+    case "Eaug":
-    }
+      return ["E", "G#", "C"]; // E Augmented
+    case "F":
+      return ["F", "A", "C"]; // F Major
+    case "Fm":
+      return ["F", "G#", "C"]; // F Minor
+    case "Fdim":
+      return ["F", "G#", "A#"]; // F Diminished
+    case "Faug":
+      return ["F", "A", "C#"]; // F Augmented
+    case "G":
+      return ["G", "B", "D"]; // G Major
+    case "Gm":
+      return ["G", "A#", "D"]; // G Minor
+    case "Gdim":
+      return ["G", "A#", "C#"]; // G Diminished
+    case "Gaug":
+      return ["G", "B", "D#"]; // G Augmented
+    case "A":
+      return ["A", "C#", "E"]; // A Major
+    case "Am":
+      return ["A", "C", "E"]; // A Minor
+    case "Adim":
+      return ["A", "C", "D#"]; // A Diminished
+    case "Aaug":
+      return ["A", "C#", "F"]; // A Augmented
+    case "B":
+      return ["B", "D#", "F#"]; // B Major
+    case "Bm":
+      return ["B", "D", "F#"]; // B Minor
+    case "Bdim":
+      return ["B", "D", "F"]; // B Diminished
+    case "Baug":
+      return ["B", "D#", "G"]; // B Augmented
+    default:
+      return ["C", "E", "G"]; // Default to C Major
   }
 }
 
@@ -66,11 +116,15 @@ class Synth {
 
   createOscillator(type = "sine", freq = 440, startOctave) {
     const osc = this.audioContext.createOscillator();
+    const gainNode = this.audioContext.createGain();
+    gainNode.connect(this.audioContext.destination);
     osc.type = type;
     osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
     // connect it to the gain node
     this.gain.gain.setTargetAtTime(0.1, this.audioContext.currentTime, 0);
+    gainNode.gain.setTargetAtTime(0.05, this.audioContext.currentTime, 0);
     osc.connect(this.gain);
+    osc.connect(gainNode);
 
     // wrap around the container and add to array
     const oscContainer = {
@@ -78,6 +132,7 @@ class Synth {
       isPlaying: false,
       baseFreq: freq,
       currentOctave: startOctave,
+      gainNode,
     };
     return oscContainer;
   }
@@ -176,6 +231,8 @@ function updateFrequency(
   );
 }
 
+function updateVolume(event, synth, oscIndex, masterVolume, voiceVolume) {}
+
 function setupOctaveControls(voiceIndex, synth) {
   // Get the display element for the current voice
   let octaveDisplay = document.getElementById(
@@ -207,82 +264,34 @@ function setupOctaveControls(voiceIndex, synth) {
 window.onload = function () {
   // start button
 
-  document
+  const voiceIds = ["activateVoice1", "activateVoice2", "activateVoice3"];
-    .getElementById("activateVoice1")
+  voiceIds.forEach((id, index) => {
-    .addEventListener("click", (event) => {
+    document.getElementById(`${id}`).addEventListener("click", (event) => {
-      console.log("voice 1 start clicked");
+      console.log(`voice: ${id} start clicked`);
       synth.audioContext.resume();
-      let osc1 = synth.oscillators[0];
+      let osc = synth.oscillators[index];
-      if (osc1.isPlaying) {
+      if (osc.isPlaying) {
-        synth.stopOsc(osc1);
+        synth.stopOsc(osc);
         event.target.textContent = "On";
         event.target.style.backgroundColor = "#2f855a";
       } else {
-        synth.startOsc(osc1);
+        synth.startOsc(osc);
-        event.target.textContent = "Off";
-        event.target.style.backgroundColor = "red";
-      }
-    });
-
-  document
-    .getElementById("activateVoice2")
-    .addEventListener("click", (event) => {
-      console.log("voice 2 start clicked");
-      synth.audioContext.resume();
-      let osc2 = synth.oscillators[1];
-      if (osc2.isPlaying) {
-        synth.stopOsc(osc2);
-        event.target.textContent = "On";
-        event.target.style.backgroundColor = "#2f855a";
-      } else {
-        synth.startOsc(osc2);
-        event.target.textContent = "Off";
-        event.target.style.backgroundColor = "red";
-      }
-    });
-
-  document
-    .getElementById("activateVoice3")
-    .addEventListener("click", (event) => {
-      console.log("voice 3 start clicked");
-      synth.audioContext.resume();
-      let osc3 = synth.oscillators[2];
-      if (osc3.isPlaying) {
-        synth.stopOsc(osc3);
-        event.target.textContent = "On";
-        event.target.style.backgroundColor = "#2f855a";
-      } else {
-        synth.startOsc(osc3);
         event.target.textContent = "Off";
         event.target.style.backgroundColor = "red";
       }
     });
+  });
 
   // handle waveform selection
-  document.querySelectorAll("input[name='wavechoice1']").forEach((rb) => {
+  const waveChoices = ["wavechoice1", "wavechoice2", "wavechoice3"];
-    rb.addEventListener("change", (event) => {
+  waveChoices.forEach((id, index) => {
-      let selectedWaveform = document.querySelector(
+    document.querySelectorAll(`input[name='${id}']`).forEach((rb) => {
-        "input[name='wavechoice1']:checked"
+      rb.addEventListener("change", (event) => {
-      ).value;
+        let selectedWaveform = document.querySelector(
-      synth.oscillators[0].osc.type = selectedWaveform;
+          `input[name='${id}']:checked`
-    });
+        ).value;
-  });
+        synth.oscillators[index].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;
     });
   });
 
@@ -300,19 +309,41 @@ window.onload = function () {
       let osc = synth.oscillators[index];
       let detune = parseFloat(detuneSlider.value);
       console.log(detune);
+      detuneDisplay.textContent = detune;
       updateFrequency(event, synth, osc, index, null, null, detune);
     });
   });
 
-  // const filterSliderVoice1 = document.getElementById("filtervoice1");
+  // master volume
-  // const filtervoice1Display = document.getElementById("filtervoice1display");
+  const masterVolumeSlider = document.getElementById("mastervol");
-  // filterSliderVoice1.addEventListener("input", (event) => {
+  const masterVolumeDisplay = document.getElementById("mastervoldisplay");
-  //   const osc = synth.oscillators[0];
+  masterVolumeSlider.addEventListener("input", (event) => {
-  //   let selectedFreq = parseFloat(filterSliderVoice1.value);
+    masterVolume = parseFloat(masterVolumeSlider.value);
-  //   const lpf = synth.createFilter("lowpass", 500, 1);
+    masterVolumeDisplay.textContent = masterVolume;
-  //   osc.osc.connect(lpf);
+    synth.gain.gain.setValueAtTime(
-  //   lpf.connect(synth.gain);
+      masterVolume,
-  // });
+      synth.audioContext.currentTime
+    );
+  });
+
+  const volumeIds = ["volumevoice1", "volumevoice2", "volumevoice3"];
+
+  volumeIds.forEach((id, index) => {
+    let oscillator = synth.oscillators[index];
+
+    const volSlider = document.getElementById(`${id}`);
+    volSlider.setAttribute("max", synth.gain.gain.value);
+    const volDisplay = document.getElementById(`${id}` + "display");
+    volSlider.addEventListener("input", (event) => {
+      let vol = parseFloat(volSlider.value);
+      volDisplay.textContent = vol;
+      volSlider.value = vol;
+      oscillator.gainNode.gain.setValueAtTime(
+        vol,
+        synth.audioContext.currentTime
+      );
+    });
+  });
 
   // handle chord changes
   document.querySelectorAll("input[name='chordchoice']").forEach((rb) => {
@@ -360,7 +391,13 @@ window.onload = function () {
     vizObjects.forEach((viz) => {
       viz.analyser.getByteTimeDomainData(viz.dataArray);
       viz.ctx.clearRect(0, 0, viz.canvas.width, viz.canvas.height);
-      viz.ctx.fillStyle = "black";
+      let voiceVol = synth.oscillators[viz.index].gainNode.gain.value;
+      if (masterVolume + voiceVol > 1) {
+        viz.ctx.fillStyle = "#ff5d52";
+      } else {
+        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)";

test.c

@@ -0,0 +1,5 @@
+int main() {
+    int       x;
+    int       xxxx;
+    const int y;
+}