eep_page/src/components/SoundRecord.vue

<template>
  <div class="sound-record-wrapper">
    <div class="sound-microphone" @click="microphone">
      <img v-if="microphoneStatus" :src="require('@/assets/fill/record-ing.png')" class="voice-play" />
      <SvgIcon v-else icon-class="mic-line" class="record" />
      <span class="auto-btn">录制音频</span>
      <span>{{ secondFormatConversion(recordTimes) }}</span>
    </div>
  </div>
</template>

<script>
import Recorder from 'js-audio-recorder'; // 录音插件
import { secondFormatConversion } from '@/utils/transform';
import { GetStaticResources, GetFileStoreInfo } from '@/api/app';
export default {
  name: 'SoundRecord',
  props: {},
  data() {
    return {
      secondFormatConversion,
      recorder: new Recorder({
        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
      }),
      timer: null, // 计时器
      microphoneStatus: false, // 是否录音
      hasMicro: '', // 录音后的样式class
      audio: {
        paused: true,
      },
      playtime: 0, // 播放时间
      recordTimes: 0,
      file_url: '',
      recordTime: 0,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.$refs.audio.addEventListener('ended', () => {
      this.audio.paused = true;
    });
    this.$refs.audio.addEventListener('pause', () => {
      this.audio.paused = true;
    });
    this.$refs.audio.addEventListener('play', () => {
      this.audio.paused = false;
    });
  },
  methods: {
    // 开始录音
    microphone() {
      let _this = this;
      if (this.microphoneStatus) {
        this.handleStop();
      } else {
        this.hasMicro = '';
        // 开始录音
        this.recorder.start();
        this.microphoneStatus = true;
        this.recordTimes = 0;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          // 每条录音不能超过10分钟
          if (_this.recordTimes < 600) {
            _this.recordTimes += 1;
          } else {
            _this.handleStop();
          }
        }, 1000);
      }
    },
    handleStop() {
      this.hasMicro = 'normal';
      this.recorder.stop();
      clearInterval(this.timer);
      // 录音结束，获取取录音数据
      let wav = this.recorder.getWAVBlob(); // 获取 WAV 数据
      this.microphoneStatus = false;
      let reader = new window.FileReader();
      reader.readAsDataURL(wav);
      reader.onloadend = () => {
        let MethodName = 'file_store_manager-SaveFileByteBase64Text';
        let data = {
          base64_text: reader.result.replace('data:audio/wav;base64,', ''),
          file_suffix_name: 'mp3',
        };
        GetStaticResources(MethodName, data).then((res) => {
          if (res.status === 1) {
            this.$emit('updateFileList', res.file_id);
          }
        });
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.sound-record-wrapper {
  display: flex;
  column-gap: 12px;
  align-items: center;
  width: 200px;
  padding: 5px 12px;
  background: $fill-color;
  border-radius: 2px;

  .audio-play-btn {
    cursor: pointer;

    &.not-url {
      color: #a1a1a1;
      cursor: not-allowed;
    }
  }

  .record-time {
    flex: 1;
    min-width: 52px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #a1a1a1;

    &.record-ing {
      color: #000;
    }
  }

  .record {
    cursor: pointer;
  }

  .voice-play {
    width: 16px;
    height: 16px;
  }

  .delete-btn {
    margin-left: 12px;
    color: #4e4e4e;
    cursor: pointer;

    &.not-url {
      color: #a1a1a1;
      cursor: not-allowed;
    }
  }

  .auto-btn {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #1d2129;
    cursor: pointer;
  }

  .sound-microphone {
    display: flex;
    column-gap: 12px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}
</style>