diff --git a/package-lock.json b/package-lock.json
index 7fad95d..d345289 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12975,6 +12975,11 @@
         }
       }
     },
+    "soundtouchjs": {
+      "version": "0.1.27",
+      "resolved": "https://registry.npmjs.org/soundtouchjs/-/soundtouchjs-0.1.27.tgz",
+      "integrity": "sha512-Ok/1U16sGDsOMD3ZOiXfojPzqYA/TO3ocNZyXQvTm8tIAQJaN4y0Tig4NlrvOVz8sMuIvp1dMH5xvGjXzNygww=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz",
diff --git a/package.json b/package.json
index de37d7f..a1da85e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "ant-design-vue": "^1.7.4",
     "core-js": "^3.6.5",
+    "soundtouchjs": "^0.1.27",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
diff --git a/src/views/About.vue b/src/views/About.vue
index 1e12986..302d9eb 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -19,16 +19,72 @@
 </template>
 
 <script>
+import { PitchShifter } from "soundtouchjs";
 export default {
   name: "About",
+  data() {
+    return {
+      shifter: null,
+      audioCtx: null,
+      gainNode: null,
+    };
+  },
+  created() {
+    // this.init();
+  },
   methods: {
     handleChange(info) {
       console.log(info);
+      const fileReader = new FileReader();
+      fileReader.onload = onLoad;
+      try {
+        fileReader.readAsArrayBuffer(file);
+      } catch (err) {
+        alert(err);
+      }
     },
-    beforeUpload(event) {
-      console.log(event);
+    beforeUpload() {
+      // console.log(event);
       return false;
     },
+    init() {
+      this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      this.gainNode = this.audioCtx.createGain();
+      if (this.shifter) {
+        this.shifter.off();
+      }
+    },
+    fileReaderOnLoad({ target: { result: buffer } }) {
+      if (this.shifter) {
+        this.shifter.off();
+      }
+      if (buffer) {
+        this.audioCtx.decodeAudioData(buffer).then((audioBuffer) => {
+          this.newShifter(audioBuffer);
+        });
+      }
+    },
+    decodeAudioData() {
+      this.audioCtx.decodeAudioData(buffer, (audioBuffer) => {
+        this.shifter = new PitchShifter(this.audioCtx, audioBuffer, 1024);
+        this.shifter.on("play", (detail) => {
+          // do something with detail.timePlayed;
+          // do something with detail.formattedTimePlayed;
+          // do something with detail.percentagePlayed
+          console.log(detail);
+        });
+        this.shifter.tempo = 1;
+        this.shifter.pitch = 1;
+      });
+    },
+    newShifter(buffer) {
+      const myShifter = new PitchShifter(this.audioCtx, buffer, 16384);
+      myShifter.tempo = tempo;
+      myShifter.pitch = pitch;
+      myShifter.on("play", onPlay);
+      setDuration(myShifter.formattedDuration);
+      setShifter(myShifter);
+    },
   },
 };
 </script>