From e830211df5bcd29f367ee3d9684dc58631d01148 Mon Sep 17 00:00:00 2001
From: dengtongyu <dengtongyu123@163.com>
Date: Fri, 14 May 2021 10:57:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/About.vue | 52 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/views/About.vue b/src/views/About.vue
index edc2f88..d6bf191 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -65,6 +65,7 @@
       </a-col>
       <a-col :span="10">
         <a-slider
+          v-model="changekey"
           :default-value="1"
           :step="0.01"
           :min="-5"
@@ -77,6 +78,7 @@
       </a-col>
       <a-col :span="10">
         <a-slider
+          v-model="volume"
           :default-value="1"
           :step="0.01"
           :min="0"
@@ -85,6 +87,41 @@
         />
       </a-col>
     </a-row>
+
+    <a-row type="flex" justify="space-between" align="middle">
+      <a-col :span="2">
+        <span>filter</span>
+      </a-col>
+      <a-col :span="10">
+        <a-select
+          v-model="filterType"
+          default-value="lowpass"
+          @change="selectChange"
+        >
+          <a-select-option value="lowpass"> lowpass </a-select-option>
+          <a-select-option value="highpass"> highpass </a-select-option>
+          <a-select-option value="bandpass"> bandpass </a-select-option>
+          <a-select-option value="lowshelf"> lowshelf </a-select-option>
+          <a-select-option value="highshelf"> highshelf </a-select-option>
+          <a-select-option value="peaking"> peaking </a-select-option>
+          <a-select-option value="notch"> notch </a-select-option>
+          <a-select-option value="allpass"> allpass </a-select-option>
+        </a-select>
+      </a-col>
+      <a-col :span="2">
+        <span>frequency</span>
+      </a-col>
+      <a-col :span="10">
+        <a-slider
+          v-model="frequency"
+          :default-value="1"
+          :step="1"
+          :min="0"
+          :max="10000"
+          @change="frequencyChange"
+        />
+      </a-col>
+    </a-row>
   </div>
 </template>
 
@@ -105,6 +142,9 @@ export default {
       playHead: "0:00",
       duration: "0:00",
       progress: 0,
+      filter: null,
+      filterType: "lowpass",
+      frequency: 600,
     };
   },
   created() {
@@ -130,6 +170,7 @@ export default {
     init() {
       this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
       this.gainNode = this.audioCtx.createGain();
+      this.filter = this.audioCtx.createBiquadFilter();
       if (this.shifter) {
         this.shifter.off();
       }
@@ -148,6 +189,8 @@ export default {
       const myShifter = new PitchShifter(this.audioCtx, buffer, 16384);
       myShifter.tempo = this.tempo;
       myShifter.pitch = this.pitch;
+      this.filter.type = this.filterType;
+      this.filter.frequency.value = this.frequency;
       myShifter.on("play", this.onPlay);
       // console.log("newShifter", buffer);
       // setDuration(myShifter.formattedDuration);
@@ -168,7 +211,8 @@ export default {
       if (this.shifter) {
         this.isPlaying = true;
         this.shifter.connect(this.gainNode);
-        this.gainNode.connect(this.audioCtx.destination);
+        this.gainNode.connect(this.filter);
+        this.filter.connect(this.audioCtx.destination);
         this.audioCtx.resume();
       }
     },
@@ -206,6 +250,12 @@ export default {
         this.gainNode.gain.volume = value;
       }
     },
+    selectChange(value) {
+      this.filterType = value;
+    },
+    frequencyChange(value) {
+      this.frequency = value;
+    },
   },
 };
 </script>