From 2d84b91e56ada018e5407e26287926c8858ae206 Mon Sep 17 00:00:00 2001
From: ergz <emnlrodriguez@gmail.com>
Date: Sat, 14 Oct 2023 02:55:32 -0700
Subject: [PATCH] bare bones filter

---
 index.html | 13 +++++++++++--
 synth.js   | 51 ++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 749dfee..9a51ce8 100644
--- a/index.html
+++ b/index.html
@@ -227,8 +227,17 @@
             </fieldset>
         </form>
     </div>
-    
-    
+ 
+    <div style="padding: 5px">
+        <label for="filter" class="block text-sm font-medium text-gray-700 mb-1">filter</label>    
+        <input id="filter" type="range" min="0" max="900" value="5000" step="1" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+        <span id="filterdisplay" class="text-sm text-gray-700 ml-2">0</span>
+    </div>
+    <div style="padding: 5px">
+        <label for="Q" class="block text-sm font-medium text-gray-700 mb-1">Q</label>    
+        <input id="Q" type="range" min="0" max="100" value="0" step="1" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+        <span id="Qdisplay" class="text-sm text-gray-700 ml-2">0</span>
+    </div>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/synth.js b/synth.js
index 1e89296..d2b5291 100644
--- a/synth.js
+++ b/synth.js
@@ -117,14 +117,25 @@ class Synth {
   createOscillator(type = "sine", freq = 440, startOctave) {
     const osc = this.audioContext.createOscillator();
     const gainNode = this.audioContext.createGain();
-    gainNode.connect(this.audioContext.destination);
+    const filterNode = this.audioContext.createBiquadFilter();
+
     osc.type = type;
     osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
+
+    filterNode.tupe = "lowpass";
+    filterNode.Q.setValueAtTime(100, this.audioContext.currentTime);
+    filterNode.frequency.setValueAtTime(5000, this.audioContext.currentTime);
+
+    // osc --> filter --> gain (voice) --> destination
+    //                \--> gain (master) --^
+    osc.connect(filterNode);
+    filterNode.connect(gainNode);
+    gainNode.connect(this.audioContext.destination);
+    filterNode.connect(this.gain);
+
     // 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 = {
@@ -133,6 +144,7 @@ class Synth {
       baseFreq: freq,
       currentOctave: startOctave,
       gainNode,
+      filterNode,
     };
     return oscContainer;
   }
@@ -169,12 +181,12 @@ class Synth {
     }
   }
 
-  createFilter(type, freq, Q) {
-    const filter = this.audioContext.createBiquadFilter();
-    filter.type = type;
-    filter.frequency.setValueAtTime(freq, this.audioContext.currentTime);
-    filter.Q.setValueAtTime(Q, this.audioContext.currentTime);
-    return filter;
+  updateFilter(osc, freq, Q) {
+    osc.filterNode.frequency.setValueAtTime(
+      freq,
+      this.audioContext.currentTime
+    );
+    osc.filterNode.Q.setValueAtTime(Q, this.audioContext.currentTime);
   }
 }
 
@@ -433,4 +445,25 @@ window.onload = function () {
   }
 
   draw();
+
+  const filterSlider = document.getElementById("filter");
+  const filterSliderDisplay = document.getElementById("filterdisplay");
+  filterSlider.addEventListener("input", (event) => {
+    filtervalue = parseFloat(filterSlider.value);
+    filterSliderDisplay.textContent = filtervalue;
+    let osc = synth.oscillators[0];
+    osc.filterNode.frequency.setValueAtTime(
+      filtervalue,
+      synth.audioContext.currentTime
+    );
+  });
+
+  const QSlider = document.getElementById("Q");
+  const QSliderDisplay = document.getElementById("Qdisplay");
+  QSlider.addEventListener("input", (event) => {
+    Qvalue = parseFloat(QSlider.value);
+    QSliderDisplay.textContent = Qvalue;
+    let osc = synth.oscillators[0];
+    osc.filterNode.Q.setValueAtTime(Qvalue, synth.audioContext.currentTime);
+  });
 };