feat：更新

src/main.js

@@ -9,7 +9,7 @@ Vue.config.productionTip = false;
 Vue.use(Antd);
 
 new Vue({
-    router,
+  router,
-    store,
+  store,
-    render: (h) => h(App),
+  render: (h) => h(App),
-}).$mount("#app");
+}).$mount("#app");

src/views/About.vue

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 <template>
   <div class="about">
     <a-upload-dragger
@@ -15,6 +16,75 @@
         company data or other band files
       </p>
     </a-upload-dragger>
+    <a-button type="primary" icon="caret-right" @click="clickPlayerBtn" />
+    <a-button type="danger" icon="pause" @click="clickPauseBtn" />
+    <a-row type="flex" justify="space-between" align="middle">
+      <a-col :span="4">{{ playHead }}</a-col>
+      <a-col :span="16"
+        ><a-slider
+          v-model="progress"
+          :default-value="0"
+          :step="0.1"
+          :min="0"
+          :max="100"
+      /></a-col>
+      <a-col :span="4">{{ duration }}</a-col>
+    </a-row>
+
+    <a-row type="flex" justify="space-between" align="middle">
+      <a-col :span="2">
+        <span>Rate</span>
+      </a-col>
+      <a-col :span="10">
+        <a-slider
+          v-model="rate"
+          :default-value="1"
+          :step="0.01"
+          :min="0"
+          :max="5"
+          @change="rateChange"
+        />
+      </a-col>
+      <a-col :span="2">
+        <span>Pitch</span>
+      </a-col>
+      <a-col :span="10">
+        <a-slider
+          v-model="pitch"
+          :default-value="1"
+          :step="0.01"
+          :min="0"
+          :max="3"
+          @change="pitchChange"
+        />
+      </a-col>
+    </a-row>
+    <a-row type="flex" justify="space-between" align="middle">
+      <a-col :span="2">
+        <span>Change Key</span>
+      </a-col>
+      <a-col :span="10">
+        <a-slider
+          :default-value="1"
+          :step="0.01"
+          :min="-5"
+          :max="5"
+          @change="keyChange"
+        />
+      </a-col>
+      <a-col :span="2">
+        <span>Volume</span>
+      </a-col>
+      <a-col :span="10">
+        <a-slider
+          :default-value="1"
+          :step="0.01"
+          :min="0"
+          :max="10"
+          @change="volumeChange"
+        />
+      </a-col>
+    </a-row>
   </div>
 </template>
 
@@ -27,20 +97,30 @@ export default {
       shifter: null,
       audioCtx: null,
       gainNode: null,
+      isPlaying: false,
+      rate: 1,
+      pitch: 1,
+      changekey: 1,
+      volume: 1,
+      playHead: "0:00",
+      duration: "0:00",
+      progress: 0,
     };
   },
   created() {
-    // this.init();
+    this.init();
   },
   methods: {
     handleChange(info) {
-      console.log(info);
+      const { file } = info;
+      const { originFileObj } = file;
+      console.log(originFileObj);
       const fileReader = new FileReader();
-      fileReader.onload = onLoad;
+      fileReader.onload = this.fileReaderOnLoad;
       try {
-        fileReader.readAsArrayBuffer(file);
+        fileReader.readAsArrayBuffer(originFileObj);
       } catch (err) {
-        alert(err);
+        console.log(err);
       }
     },
     beforeUpload() {
@@ -64,26 +144,67 @@ export default {
         });
       }
     },
-    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.tempo = this.tempo;
-      myShifter.pitch = pitch;
+      myShifter.pitch = this.pitch;
-      myShifter.on("play", onPlay);
+      myShifter.on("play", this.onPlay);
-      setDuration(myShifter.formattedDuration);
+      // console.log("newShifter", buffer);
-      setShifter(myShifter);
+      // setDuration(myShifter.formattedDuration);
+      // setShifter(myShifter);
+      this.duration = myShifter.formattedDuration;
+      this.shifter = myShifter;
+    },
+    onPlay(detail) {
+      const { formattedTimePlayed, percentagePlayed } = detail;
+      this.playHead = formattedTimePlayed;
+      this.progress = percentagePlayed;
+      // console.log("detail", detail);
+      if (percentagePlayed >= 100) {
+        this.pauseAudio();
+      }
+    },
+    playAudio() {
+      if (this.shifter) {
+        this.isPlaying = true;
+        this.shifter.connect(this.gainNode);
+        this.gainNode.connect(this.audioCtx.destination);
+        this.audioCtx.resume();
+      }
+    },
+    pauseAudio() {
+      if (this.shifter) {
+        this.shifter.disconnect();
+        if (!this.isPlaying) {
+          this.isPlaying = false;
+        }
+      }
+    },
+    clickPlayerBtn() {
+      this.playAudio();
+    },
+    clickPauseBtn() {
+      this.pauseAudio();
+    },
+    rateChange(value) {
+      if (this.shifter) {
+        this.shifter.tempo = value;
+      }
+    },
+    pitchChange(value) {
+      if (this.shifter) {
+        this.shifter.pitch = value;
+      }
+    },
+    keyChange(value) {
+      if (this.shifter) {
+        this.shifter.pitchSemitones = value;
+      }
+    },
+    volumeChange(value) {
+      if (this.shifter) {
+        this.gainNode.gain.volume = value;
+      }
     },
   },
 };