PC录音发消息

dependencies:{"js-audio-recorder": "^1.0.7"}

// 聊天--------
import Recorder from 'js-audio-recorder'
const recorder = new Recorder({
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1 // 声道，支持 1 或 2， 默认是1
  // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
})
// 聊天--------
map3Time: '00:00',
map3TimeCopy: '00:00',
mpe3Url: '',
 // 绑定事件-打印的是当前时时录音数据
mounted() {
    recorder.onprogress = (params) => {
      // console.log('--------------START---------------')
      // console.log('录音时长(秒)', params.duration);
      // console.log('录音大小(字节)', params.fileSize);
      // console.log('录音音量百分比(%)', params.vol);
      // console.log('当前录音的总数据([DataView, DataView...])', params.data);
      this.map3Time = this.formatSeconds(params.duration)
      this.map3TimeCopy = this.map3Time
      // console.log(params.duration, this.map3Time, this.map3TimeCopy)
      // console.log('--------------END---------------')
    }
},
methods: {
    // 录音-----------------始
    // 获取麦克风权限
    getPermission() {
      Recorder.getPermission().then(() => {
        this.$message.success('获取权限成功')
      }, (error) => {
        console.log(`${error.name} : ${error.message}`);
      });
    },
    // 开始录音
    startRecorder() {
      this.luyinType = true
      this.destroyRecorder()
      recorder.start().then(() => {
      }, (error) => {
        this.$message.warning('请授权录音权限')
        console.log(`出错了:${error.name} : ${error.message}`);
        this.stopRecorder()
      });
    },
    // 结束录音
    stopRecorder(type) {
      recorder.stop()
      this.luyinType = false
      this.map3Time = '00:00'
      if (type == 1) {
        this.getRecorder()
      } else {
        this.mp3DivType = false
      }
    },
    /** 获取录音文件 */
    getRecorder() {
      let toltime = recorder.duration;// 录音总时长
      let fileSize = recorder.fileSize;// 录音总大小
      // 录音结束，获取取录音数据
      let PCMBlob = recorder.getPCMBlob();// 获取 PCM 数据
      let wav = recorder.getWAVBlob();// 获取 WAV 数据
      let channel = recorder.getChannelData();// 获取左声道和右声道音频数据
      console.log(toltime, '录音总时长')
      console.log(fileSize, '录音总大小')
      this.uploadWAVData()
    },
    /** 录音播放 */
    playRecorder() {
      recorder.play()
    },
    /** 清除录音数据 */
    destroyRecorder() {
      recorder.destroy().then(() => {
        // recorder = null;
      });
    },
    /** 上传mp3 */
    uploadWAVData() {
      var wavBlob = recorder.getWAVBlob();
      // 创建一个formData对象
      var formData = new FormData()
      // 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
      const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
      console.log(newbolb)
      // 获取当时时间戳作为文件名
      const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
      formData.append('file', fileOfBlob)
      formData.append('msg', this.$store.state.code.nickname + ',' + this.$store.state.code.depart_name + ',' + (this.map3TimeCopy == '00:00' ? '00:01' : this.map3TimeCopy))
      roomsUpload(formData, this.rocket_chat_id).then((response) => {
        console.log(response);
        let json = {
          _id: response._id,
          u: { _id: response.u._id },
          msg: response.msg,
          ts: { $date: new Date(response.ts.$date).valueOf() },
          attachments: response.attachments,
          file: { type: response.file.type }
        }
        this.ajaxOrderMsgArr = [...this.ajaxOrderMsgArr, ...[json]]
        this.$nextTick(() => {
          let taskBoxDiv = document.querySelector(`.infoBoxDivList`) // 移动最大元素
          // infoBoxDiv滚动条元素
          $('#infoBoxDiv')
            .stop()
            .animate(
              {
                scrollTop: taskBoxDiv.scrollHeight
              },
              700
            )
        })
      });
    },
    // 录音-----------------完
},