Add filter cutoff LFO

src/components/Noise.vue

@@ -109,6 +109,7 @@
         <v-row justify="center">
           <v-select
             v-model="filterType"
+            :disabled="!isFilterEnabled"
             :items="filterTypeOptions"
             label="Filter Type"
             class="mx-3"
@@ -117,6 +118,7 @@
 
           <v-slider
             v-model="frequencyCutoff"
+            :disabled="!isFilterEnabled || isFilterCutoffLFOEnabled"
             label="Frequency Cutoff (Hz)"
             thumb-label="always"
             :thumb-size="40"
@@ -125,6 +127,39 @@
             class="mx-3"
             @change="updateFrequencyCutoff"
           />
+
+          <v-checkbox
+            v-model="isFilterCutoffLFOEnabled"
+            :disabled="!isFilterEnabled"
+            label="Filter Cutoff LFO"
+            class="mb-5"
+            @change="updateAudioChain"
+          />
+
+          <v-slider
+            v-model="filterCutoffLFOFrequency"
+            :disabled="!isFilterCutoffLFOEnabled || !isFilterEnabled"
+            label="Rate (Hz)"
+            thumb-label="always"
+            :thumb-size="40"
+            max="10"
+            min="0.1"
+            step="0.1"
+            class="mx-3"
+            @change="updateFilterCutoffLFOFrequency"
+          />
+
+          <v-range-slider
+            v-model="filterCutoffLFORange"
+            :disabled="!isFilterCutoffLFOEnabled || !isFilterEnabled"
+            label="Frequency Range (Hz)"
+            thumb-label="always"
+            :thumb-size="40"
+            :min="filterCutoffLFOMin"
+            :max="filterCutoffLFOMax"
+            class="mx-3"
+            @change="updateFilterCutoffLFORange"
+          />
         </v-row>
       </v-col>
 
@@ -147,6 +182,7 @@
         <v-row justify="center">
           <v-slider
             v-model="tremoloFrequency"
+            :disabled="!isTremoloEnabled"
             label="Frequency (0-1 Hz)"
             thumb-label="always"
             :thumb-size="40"
@@ -161,6 +197,7 @@
 
           <v-slider
             v-model="tremoloDepth"
+            :disabled="!isTremoloEnabled"
             label="Depth (0-1 Hz)"
             thumb-label="always"
             :thumb-size="40"

src/components/noise.js

@@ -1,4 +1,4 @@
-import { Filter, Noise, Transport, Tremolo } from 'tone'
+import { Filter, LFO, Noise, Transport, Tremolo } from 'tone'
 
 export default {
   name: 'Noise',
@@ -15,6 +15,11 @@ export default {
     frequencyCutoff: 20000,
     filterTypeOptions: ['lowpass', 'highpass', 'bandpass', 'lowshelf', 'highshelf', 'notch', 'allpass', 'peaking'],
     filterType: 'lowpass',
+    isFilterCutoffLFOEnabled: false,
+    filterCutoffLFOFrequency: 1,
+    filterCutoffLFOMin: 0,
+    filterCutoffLFOMax: 20000,
+    filterCutoffLFORange: [100, 1000],
     rules: {
       number: value => !isNaN(parseInt(value, 10)) || 'Invalid number',
       negative: value => (!isNaN(parseInt(value, 10)) && value <= 0) || "Can't be greater than 0"
@@ -27,6 +32,7 @@ export default {
     this.noise = new Noise()
     this.filter = new Filter()
     this.tremolo = new Tremolo()
+    this.lfo = new LFO()
   },
   methods: {
     playNoise () {
@@ -48,6 +54,11 @@ export default {
         this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.filter)
       }
 
+      if (this.isFilterCutoffLFOEnabled) {
+        this.lfo = new LFO({ frequency: this.filterCutoffLFOFrequency, min: this.filterCutoffLFORange[0], max: this.filterCutoffLFORange[1] })
+        this.lfo.connect(this.filter.frequency).start()
+      }
+
       if (this.isTimerEnabled) {
         this.noise.sync().start(0).stop(this.noiseDuration)
         Transport.loopEnd = this.noiseDuration
@@ -83,6 +94,12 @@ export default {
     updateFrequencyCutoff () {
       this.filter.set({ frequency: this.frequencyCutoff })
     },
+    updateFilterCutoffLFOFrequency () {
+      this.lfo.set({ frequency: this.filterCutoffLFOFrequency })
+    },
+    updateFilterCutoffLFORange () {
+      this.lfo.set({ min: this.filterCutoffLFORange[0], max: this.filterCutoffLFORange[1] })
+    },
     updateTremoloFrequency () {
       this.tremolo.set({ frequency: this.tremoloFrequency })
     },
@@ -98,9 +115,16 @@ export default {
       } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
         this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
         this.noise.connect(this.tremolo)
-      } else if (this.isFilterEnabled && !this.isTremoloEnabled) {
+      } else if (this.isFilterEnabled && !this.isFilterCutoffLFOEnabled && !this.isTremoloEnabled) {
         this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
         this.noise.connect(this.filter)
+        this.lfo.disconnect()
+        this.lfo.stop()
+      } else if (this.isFilterEnabled && this.isFilterCutoffLFOEnabled && !this.isTremoloEnabled) {
+        this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
+        this.noise.connect(this.filter)
+        this.lfo = new LFO({ frequency: this.filterCutoffLFOFrequency, min: this.filterCutoffLFORange[0], max: this.filterCutoffLFORange[1] })
+        this.lfo.connect(this.filter.frequency).start()
       } else {
         this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
         this.filter = new Filter(this.frequencyCutoff, this.filterType).connect(this.tremolo)