From 7d0a80a987a2f20934bed197383fde6468ab03b2 Mon Sep 17 00:00:00 2001
From: ergz <emnlrodriguez@gmail.com>
Date: Fri, 13 Oct 2023 23:31:13 -0700
Subject: [PATCH] improves the voice vol + mater vol

---
 index.html | 72 +++++++++++++++++++++++++++++++++---------------------
 synth.js   | 31 ++++++++++++++++++++---
 test.c     |  5 ++++
 3 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 test.c

diff --git a/index.html b/index.html
index 3ed3c84..749dfee 100644
--- a/index.html
+++ b/index.html
@@ -33,10 +33,10 @@
                     <button id="octaveup1" 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="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=".05" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <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>
             
@@ -45,7 +45,7 @@
                 <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 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>
@@ -77,28 +77,28 @@
                     <button id="octaveup2" 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="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=".05" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <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>
         
@@ -123,44 +123,60 @@
                     <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=".05" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <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>
-
+                
                 <!-- Major Chords -->
                 <div>
-
+                    
                     <input type="radio" id="chordC" name="chordchoice" value="C" checked>
                     <label for="chordC">C</label>
                     
@@ -184,7 +200,7 @@
                     
                 </div>
                 <div>
-
+                    
                     <!-- Minor Chords -->
                     <input type="radio" id="chordCm" name="chordchoice" value="Cm">
                     <label for="chordCm">Cm</label>
@@ -207,10 +223,10 @@
                     <input type="radio" id="chordBm" name="chordchoice" value="Bm">
                     <label for="chordBm">Bm</label>
                 </div>
-                    
-                </fieldset>
-            </form>
-        </div>
+                
+            </fieldset>
+        </form>
+    </div>
     
     
     
diff --git a/synth.js b/synth.js
index e7c8ab1..1e89296 100644
--- a/synth.js
+++ b/synth.js
@@ -1,6 +1,7 @@
 let canvas;
 let analyserNode;
 let signalData;
+let masterVolume;
 
 function noteToHz(note) {
   switch (note) {
@@ -116,11 +117,12 @@ class Synth {
   createOscillator(type = "sine", freq = 440, startOctave) {
     const osc = this.audioContext.createOscillator();
     const gainNode = this.audioContext.createGain();
-    gainNode.connect(this.gain);
+    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);
 
@@ -229,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(
@@ -310,17 +314,30 @@ window.onload = function () {
     });
   });
 
+  // master volume
+  const masterVolumeSlider = document.getElementById("mastervol");
+  const masterVolumeDisplay = document.getElementById("mastervoldisplay");
+  masterVolumeSlider.addEventListener("input", (event) => {
+    masterVolume = parseFloat(masterVolumeSlider.value);
+    masterVolumeDisplay.textContent = masterVolume;
+    synth.gain.gain.setValueAtTime(
+      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) => {
-      console.log(oscillator);
       let vol = parseFloat(volSlider.value);
-      console.log(vol);
+      volDisplay.textContent = vol;
+      volSlider.value = vol;
       oscillator.gainNode.gain.setValueAtTime(
         vol,
         synth.audioContext.currentTime
@@ -374,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)";
diff --git a/test.c b/test.c
new file mode 100644
index 0000000..9e0ae87
--- /dev/null
+++ b/test.c
@@ -0,0 +1,5 @@
+int main() {
+    int       x;
+    int       xxxx;
+    const int y;
+}
\ No newline at end of file