GCLS_Page_Book/src/components/common/Soundrecord.vue

<!--  -->
<template>
  <div class="Book-record">
    <div class="Book-record-btn">
      <div
        :class="['playBack', hasMicro]"
        v-if="hasMicro"
        @click="playmicrophone"
      ></div>
      <div :class="['playBack', hasMicro]" v-else></div>
      <p>回放</p>
    </div>
    <div class="Book-record-btn">
      <div
        :class="['record', microphoneStatus ? 'active' : '']"
        @click="microphone"
      ></div>
      <p>{{ microphoneBtn }}</p>
    </div>
  </div>
</template>

<script>
import Recorder from "js-audio-recorder"; //录音插件
let Base64 = require("js-base64").Base64;
export default {
  components: {},
  props: ["wavData", "queIndex"],
  data() {
    return {
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
      }),
      microphoneStatus: false,
      hasMicro: "", // 录音后的样式class
      microphoneBtn: "点击录音",
      wavblob: null,
      audio: new window.Audio(),
      newMicrophone: false, // 是否为新录音
    };
  },
  computed: {},
  watch: {
    queIndex: {
      handler: function (val, oldVal) {
        let _this = this;
        if (val != oldVal) {
          _this.handleActive();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    // 开始录音
    microphone() {
      let _this = this;
      if (!this.microphoneStatus) {
        //开始录音
        this.recorder.start();
        this.microphoneStatus = true;
        this.microphoneBtn = "录音中...";
      } else {
        this.microphoneBtn = "录音完成";
        this.hasMicro = "normal";
        this.recorder.stop();
        let toltime = this.recorder.duration; //录音总时长
        let fileSize = this.recorder.fileSize; //录音总大小
        //录音结束，获取取录音数据
        let PCMBlob = this.recorder.getPCMBlob(); //获取 PCM 数据
        let wav = this.recorder.getWAVBlob(); //获取 WAV 数据
        this.wavblob = wav;
        this.microphoneStatus = false;
        this.newMicrophone = true;
        // 传值给父级
        // this.$emit("handle-Wav", wav);
        var reader = new window.FileReader();
        reader.readAsDataURL(wav);
        reader.onloadend = function () {
          _this.$emit("handle-Wav", reader.result);
        };
      }
    },
    playmicrophone() {
      let _this = this;
      if (!this.audio.paused) {
        this.audio.pause();
      } else {
        _this.audio.pause();
        _this.audio.load();
        if (_this.wavData && !_this.newMicrophone) {
          _this.audio.src = _this.wavData;
        } else {
          _this.audio.src = window.URL.createObjectURL(_this.wavblob);
        }
        _this.audio.play();
      }
    },
    // 高亮初始值
    handleActive() {
      if (this.wavData) {
        this.hasMicro = "normal";
        this.microphoneBtn = "录音完成";
        this.newMicrophone = false;
      } else {
        this.hasMicro = "";
        this.microphoneBtn = "点击录音";
      }
    },
    changeStatus(status) {
      this.hasMicro = status;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleActive();
    var that = this;
    window.stopAudioSound = function () {
      if (that.audio) {
        that.audio.pause();
      }
    };
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.audio.addEventListener("play", function () {
      _this.changeStatus("active");
    });
    _this.audio.addEventListener("pause", function () {
      _this.changeStatus("normal");
    });
    _this.audio.addEventListener("ended", function () {
      _this.changeStatus("normal");
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
      this.audio.pause();
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Book-record {
  display: flex;
  color: #ba7d21;
  font-size: 24px;
  justify-content: center;
  align-items: center;
  .Book-record-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &:nth-child(1) {
      margin-right: 32px;
    }
    > p {
      margin-top: 24px;
      font-weight: 600;
      font-family: "FZJCGFKTK";
      font-size: 24px;
      line-height: 1;
      text-align: center;
      color: #ba7d21;
      padding: 0;
      margin-bottom: 0px;
    }
  }
  .playBack {
    width: 144px;
    height: 72px;
    background: url("../../assets/qp/lookback.png") center no-repeat;
    background-size: 100%;
    cursor: not-allowed;
    &.normal {
      background: url("../../assets/qp/lookback-normal.png") center no-repeat;
      background-size: 100%;
      cursor: pointer;
    }
    &.active {
      background: url("../../assets/qp/lookback-click.png") center no-repeat;
      background-size: 100%;
      cursor: pointer;
    }
  }
  .record {
    width: 144px;
    height: 72px;
    background: url("../../assets/qp/luyin.png") center no-repeat;
    background-size: 100%;
    cursor: pointer;
    &.active {
      background: url("../../assets/qp/luyin-click.png") center no-repeat;
      background-size: 100%;
    }
  }
}
.questionMiddle {
  .Book-record {
    font-size: 16px;
    .Book-record-btn {
      &:nth-child(1) {
        margin-right: 21px;
      }
      > p {
        margin-top: 16px;
        font-size: 16px;
      }
    }
    .playBack {
      width: 96px;
      height: 48px;
    }
    .record {
      width: 96px;
      height: 48px;
    }
  }
}
.questionSmall {
  .Book-record {
    font-size: 12px;
    .Book-record-btn {
      &:nth-child(1) {
        margin-right: 16px;
      }
      > p {
        margin-top: 12px;
        font-size: 12px;
        padding: 0;
        margin-bottom: 0px;
      }
    }
    .playBack {
      width: 72px;
      height: 36px;
    }
    .record {
      width: 72px;
      height: 36px;
    }
  }
}
</style>