electron-vue/src/views/About.vue

/* eslint-disable no-undef */
<template>
  <div class="about">
    <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>