feat:更新

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
     parser: "babel-eslint",
   },

README.md

@@ -1,4 +1,4 @@
-# electron-vue
+# dsfsdf
 
 ## Project setup
 ```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "electron-vue",
+  "name": "dsfsdf",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -13,28 +13,30 @@
   },
   "main": "background.js",
   "dependencies": {
+    "ant-design-vue": "^1.7.4",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0",
+    "soundtouchjs": "^0.1.27",
-    "vue-router": "^4.0.0-0",
+    "vue": "^2.6.11",
-    "vuex": "^4.0.0-0"
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-plugin-vuex": "^4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-service": "^4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "electron": "^11.0.0",
     "electron-devtools-installer": "^3.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.12.0",
     "prettier": "^2.2.1",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6"
+    "vue-cli-plugin-electron-builder": "^2.0.0-rc.6",
+    "vue-template-compiler": "^2.6.11"
   }
 }

src/App.vue

@@ -1,5 +1,7 @@
 <template>
+  <div id="app">
     <router-view />
+  </div>
 </template>
 
 <style lang="scss">

src/main.js

@@ -1,6 +1,15 @@
-import { createApp } from "vue";
+import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import Antd from "ant-design-vue";
+import "ant-design-vue/dist/antd.css";
 
-createApp(App).use(store).use(router).mount("#app");
+Vue.config.productionTip = false;
+Vue.use(Antd);
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");

src/router/index.js

@@ -1,25 +1,27 @@
-import { createRouter, createWebHashHistory } from "vue-router";
+import Vue from "vue";
-import Home from "../views/Home.vue";
+import VueRouter from "vue-router";
+// import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
 
 const routes = [
+    // {
+    //   path: "/",
+    //   name: "Home",
+    //   component: Home,
+    // },
     {
         path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/about",
         name: "About",
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+            import ( /* webpackChunkName: "about" */ "../views/About.vue"),
     },
 ];
 
-const router = createRouter({
+const router = new VueRouter({
-  history: createWebHashHistory(),
     routes,
 });
 

src/store/index.js

@@ -1,6 +1,9 @@
-import { createStore } from "vuex";
+import Vue from "vue";
+import Vuex from "vuex";
 
-export default createStore({
+Vue.use(Vuex);
+
+export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},

src/views/About.vue

@@ -1,5 +1,261 @@
+/* eslint-disable no-undef */
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <a-upload-dragger
+      name="file"
+      :multiple="true"
+      @change="handleChange"
+      @beforeUpload="beforeUpload"
+    >
+      <p class="ant-upload-drag-icon">
+        <a-icon type="inbox" />
+      </p>
+      <p class="ant-upload-text">Click or drag file to this area to upload</p>
+      <p class="ant-upload-hint">
+        Support for a single or bulk upload. Strictly prohibit from uploading
+        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
+          v-model="changekey"
+          :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
+          v-model="volume"
+          :default-value="1"
+          :step="0.01"
+          :min="0"
+          :max="10"
+          @change="volumeChange"
+        />
+      </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>
+
+<script>
+import { PitchShifter } from "soundtouchjs";
+export default {
+  name: "About",
+  data() {
+    return {
+      shifter: null,
+      audioCtx: null,
+      gainNode: null,
+      isPlaying: false,
+      rate: 1,
+      pitch: 1,
+      changekey: 1,
+      volume: 1,
+      playHead: "0:00",
+      duration: "0:00",
+      progress: 0,
+      filter: null,
+      filterType: "lowpass",
+      frequency: 600,
+    };
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    handleChange(info) {
+      const { file } = info;
+      const { originFileObj } = file;
+      console.log(originFileObj);
+      const fileReader = new FileReader();
+      fileReader.onload = this.fileReaderOnLoad;
+      try {
+        fileReader.readAsArrayBuffer(originFileObj);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    beforeUpload() {
+      // console.log(event);
+      return false;
+    },
+    init() {
+      this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+      this.gainNode = this.audioCtx.createGain();
+      this.filter = this.audioCtx.createBiquadFilter();
+      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);
+        });
+      }
+    },
+    newShifter(buffer) {
+      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);
+      // 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.filter);
+        this.filter.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;
+      }
+    },
+    selectChange(value) {
+      this.filterType = value;
+    },
+    frequencyChange(value) {
+      this.frequency = value;
+    },
+  },
+};
+</script>