Add tremolo

src/components/Noise.vue

@@ -100,7 +100,7 @@
             v-model="isFilterEnabled"
             label="Enabled"
             class="mb-5"
-            @change="updateFilterEnabled"
+            @change="updateAudioChain"
           />
         </v-row>
       </v-col>
@@ -124,15 +124,54 @@
             min="0"
             class="mx-3"
             @change="updateFrequencyCutoff"
-          >
+          />
-            <template v-slot:append>
+        </v-row>
-              <v-text-field
+      </v-col>
-                v-model="frequencyCutoff"
+
-                class="mt-0 pt-0"
+      <v-col cols="12">
-                type="number"
+        <h2 class="headline font-weight-bold mb-5">
-              />
+          Tremolo
-            </template>
+        </h2>
-          </v-slider>
+
+        <v-row justify="center">
+          <v-checkbox
+            v-model="isTremoloEnabled"
+            label="Enabled"
+            class="mb-5"
+            @change="updateAudioChain"
+          />
+        </v-row>
+      </v-col>
+
+      <v-col cols="12">
+        <v-row justify="center">
+          <v-slider
+            v-model="tremoloFrequency"
+            label="Frequency (0-1 Hz)"
+            thumb-label="always"
+            :thumb-size="40"
+            max="1"
+            min="0"
+            step="0.1"
+            ticks
+            tick-size="4"
+            class="mx-3"
+            @change="updateTremoloFrequency"
+          />
+
+          <v-slider
+            v-model="tremoloDepth"
+            label="Depth (0-1 Hz)"
+            thumb-label="always"
+            :thumb-size="40"
+            max="1"
+            min="0"
+            step="0.1"
+            ticks
+            tick-size="4"
+            class="mx-3"
+            @change="updateTremoloDepth"
+          />
         </v-row>
       </v-col>
     </v-row>

src/components/noise.js

@@ -1,4 +1,4 @@
-import { Filter, Noise, Transport, getDestination } from 'tone'
+import { Filter, Noise, Transport, Tremolo } from 'tone'
 
 export default {
   name: 'Noise',
@@ -18,22 +18,34 @@ export default {
     rules: {
       number: value => !isNaN(parseInt(value, 10)) || 'Invalid number',
       negative: value => (!isNaN(parseInt(value, 10)) && value <= 0) || "Can't be greater than 0"
-    }
+    },
+    isTremoloEnabled: false,
+    tremoloFrequency: 0.5,
+    tremoloDepth: 0.5
   }),
   created () {
     this.noise = new Noise()
     this.filter = new Filter()
+    this.tremolo = new Tremolo()
   },
   methods: {
     playNoise () {
       this.startDisabled = true
       Transport.cancel()
 
-      if (this.isFilterEnabled) {
+      // TODO: This conditional logic can be improved
+      if (!this.isFilterEnabled && !this.isTremoloEnabled) {
+        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).toDestination()
+      } else if (!this.isFilterEnabled && this.isTremoloEnabled) {
+        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.tremolo)
+      } else if (this.isFilterEnabled && !this.isTremoloEnabled) {
         this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
         this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.filter)
       } else {
-        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).toDestination()
+        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.filter = new Filter(this.frequencyCutoff, this.filterType).connect(this.tremolo)
+        this.noise = new Noise({ volume: this.noiseVolume, type: this.noiseColor }).connect(this.filter)
       }
 
       if (this.isTimerEnabled) {
@@ -65,21 +77,35 @@ export default {
     updateNoiseColor () {
       this.noise.type = this.noiseColor
     },
-    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.noise.toDestination()
-      }
-    },
     updateFilterType () {
       this.filter.type = this.filterType
     },
     updateFrequencyCutoff () {
       this.filter.set({ frequency: this.frequencyCutoff })
+    },
+    updateTremoloFrequency () {
+      this.tremolo.set({ frequency: this.tremoloFrequency })
+    },
+    updateTremoloDepth () {
+      this.tremolo.set({ depth: this.tremoloDepth })
+    },
+    updateAudioChain () {
+      this.noise.disconnect()
+
+      // TODO: This conditional logic can be improved
+      if (!this.isFilterEnabled && !this.isTremoloEnabled) {
+        this.noise.toDestination()
+      } 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) {
+        this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
+        this.noise.connect(this.filter)
+      } else {
+        this.tremolo = new Tremolo({ frequency: this.tremoloFrequency, depth: this.tremoloDepth }).toDestination().start()
+        this.filter = new Filter(this.frequencyCutoff, this.filterType).connect(this.tremolo)
+        this.noise.connect(this.filter)
+      }
     }
   }
 }