Add filter section

.eslintrc.js

@@ -1,12 +1,16 @@
 module.exports = {
     extends: [
         // add more generic rulesets here, such as:
-        // 'eslint:recommended',
+        "eslint:recommended",
         //   'plugin:vue/vue3-recommended',
-        'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+        "plugin:vue/recommended" // Use this if you are using Vue.js 2.x.
     ],
     rules: {
         // override/add rules settings here, such as:
         // 'vue/no-unused-vars': 'error'
+      "eol-last": 1
+    },
+    "env": {
+      "node": true
     }
-}
+}

src/components/Noise.vue

@@ -24,14 +24,14 @@
         <v-row justify="center">
           <v-btn
             :disabled="startDisabled"
-            class="mx-3"
+            class="mx-3 mb-5"
-            @click="handleStart"
+            @click="playNoise"
           >
             Start
           </v-btn>
 
           <v-btn
-            class="mx-3"
+            class="mx-3 mb-5"
             @click="stopTransport"
           >
             Stop
@@ -58,12 +58,14 @@
             v-model="noiseVolume"
             label="Volume"
             class="mx-3"
+            :disabled="startDisabled"
           />
 
           <v-text-field
             v-model="noiseDuration"
             label="Seconds"
             class="mx-3"
+            :disabled="startDisabled"
           />
 
           <v-select
@@ -71,9 +73,56 @@
             :items="noiseColorOptions"
             label="Noise Color"
             class="mx-3"
+            :disabled="startDisabled"
           />
         </v-row>
       </v-col>
+
+      <v-col cols="12">
+        <h2 class="headline font-weight-bold mb-5">
+          Filter
+        </h2>
+
+        <v-row justify="center">
+          <v-checkbox
+            v-model="isFilterEnabled"
+            :disabled="startDisabled"
+            label="Enabled"
+            class="mb-5"
+          />
+        </v-row>
+      </v-col>
+      
+      <v-col cols="12">
+        <v-row justify="center">
+          <v-select
+            v-model="filterType"
+            :items="filterTypeOptions"
+            label="Filter Type"
+            class="mx-3"
+            :disabled="!isFilterEnabled ||startDisabled"
+          />
+          
+          <v-slider
+            v-model="frequencyCutoff"
+            label="Frequency Cutoff (Hz)"
+            thumb-label="always"
+            :thumb-size="40"
+            :disabled="!isFilterEnabled || startDisabled"
+            max="20000"
+            min="0"
+            class="mx-3"
+          >
+            <template v-slot:append>
+              <v-text-field
+                v-model="frequencyCutoff"
+                class="mt-0 pt-0"
+                type="number"
+              />
+            </template>
+          </v-slider>
+        </v-row>
+      </v-col>
     </v-row>
   </v-container>
 </template>

src/components/noise.js

@@ -1,4 +1,4 @@
-import { Noise, Transport } from "tone";
+import { Filter, Noise, Transport } from "tone";
 
 export default {
   name: "Noise",
@@ -9,23 +9,36 @@ export default {
     timeRemaining: 0,
     noiseColorOptions: ["pink", "white", "brown"],
     noiseColor: "pink",
-    noiseVolume: -10
+    noiseVolume: -10,
+    isFilterEnabled: false,
+    frequencyCutoff: 20000,
+    filterTypeOptions: ["lowpass", "highpass", "bandpass", "lowshelf", "highshelf", "notch", "allpass", "peaking"],
+    filterType: "lowpass"
   }),
   created() {
     this.noise = new Noise()
   },
   methods: {
-    handleStart() {
+    playNoise() {
       this.startDisabled = true
       Transport.cancel()
-      this.noise = new Noise({volume: this.noiseVolume, type: this.noiseColor}).toDestination()
+
+      this.filter = new Filter(this.frequencyCutoff, this.filterType).toDestination()
+
+      if (this.isFilterEnabled) {
+        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.noise.sync().start(0).stop(this.noiseDuration)
+
       Transport.start()
       Transport.loopEnd = this.noiseDuration
+
       this.transportInterval = setInterval(() => this.stopTransport(), this.noiseDuration * 1000 + 100)
 
       this.timeRemaining = this.noiseDuration
-      this.timeRemainingInterval = setInterval(() => this.timer(), 1000)
+      this.timeRemainingInterval = setInterval(() => this.startTimer(), 1000)
     },
     stopTransport() {
       clearInterval(this.transportInterval)
@@ -35,7 +48,7 @@ export default {
       clearInterval(this.timeRemainingInterval)
       this.timeRemaining = 0
     },
-    timer() {
+    startTimer() {
       this.timeRemaining -= 1
     }
   },