From 310dc36501b6055a208545b64d9b2c2e6b83dce2 Mon Sep 17 00:00:00 2001
From: Kevin Thomas <me@kevinthomas.dev>
Date: Mon, 26 Jul 2021 23:30:39 -0700
Subject: [PATCH] Allow filter settings to be changed while noise is playing

---
 src/components/Noise.vue |  4 +++-
 src/components/noise.js  | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Noise.vue b/src/components/Noise.vue
index 2660848..0f30412 100644
--- a/src/components/Noise.vue
+++ b/src/components/Noise.vue
@@ -100,7 +100,7 @@
             v-model="isFilterEnabled"
             label="Enabled"
             class="mb-5"
-            @change="updateFilter"
+            @change="updateFilterEnabled"
           />
         </v-row>
       </v-col>
@@ -112,6 +112,7 @@
             :items="filterTypeOptions"
             label="Filter Type"
             class="mx-3"
+            @change="updateFilterType"
           />
 
           <v-slider
@@ -122,6 +123,7 @@
             max="20000"
             min="0"
             class="mx-3"
+            @change="updateFrequencyCutoff"
           >
             <template v-slot:append>
               <v-text-field
diff --git a/src/components/noise.js b/src/components/noise.js
index 8408999..84221c6 100644
--- a/src/components/noise.js
+++ b/src/components/noise.js
@@ -1,4 +1,4 @@
-import { Filter, Noise, Transport } from 'tone'
+import { Filter, Noise, Transport, getDestination } from 'tone'
 
 export default {
   name: 'Noise',
@@ -26,7 +26,6 @@ export default {
   },
   methods: {
     playNoise () {
-      console.log('frequencyCutoff: ', this.frequencyCutoff)
       this.startDisabled = true
       Transport.cancel()
 
@@ -56,9 +55,6 @@ export default {
 
       clearInterval(this.timeRemainingInterval)
       this.timeRemaining = 0
-
-      this.noise = new Noise()
-      this.filter = new Filter()
     },
     startTimer () {
       this.timeRemaining -= 1
@@ -69,15 +65,21 @@ export default {
     updateNoiseColor () {
       this.noise.type = this.noiseColor
     },
-    updateFilter () {
-      console.log('change')
+    updateFilterEnabled () {
       if (this.isFilterEnabled) {
         this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
+        this.noise.disconnect(getDestination())
         this.noise.connect(this.filter)
       } else {
-        this.noise.disconnect(this.filter)
+        this.noise.disconnect()
         this.noise.toDestination()
       }
+    },
+    updateFilterType () {
+      this.filter.type = this.filterType
+    },
+    updateFrequencyCutoff () {
+      this.filter.set({ frequency: this.frequencyCutoff })
     }
   }
 }