diff --git a/src/components/Noise.vue b/src/components/Noise.vue
index 0f30412..6d05936 100644
--- a/src/components/Noise.vue
+++ b/src/components/Noise.vue
@@ -100,7 +100,7 @@
v-model="isFilterEnabled"
label="Enabled"
class="mb-5"
- @change="updateFilterEnabled"
+ @change="updateAudioChain"
/>
@@ -124,15 +124,54 @@
min="0"
class="mx-3"
@change="updateFrequencyCutoff"
- >
-
-
-
-
+ />
+
+
+
+
+
+ Tremolo
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/noise.js b/src/components/noise.js
index 84221c6..1cfb2e9 100644
--- a/src/components/noise.js
+++ b/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)
+ }
}
}
}