实现聊天发送语音消息功能

1.通过mqtt实时收发信息

2.实现发送语音消息

（1）安装js-audio-recorder ，通过这个插件获取浏览器麦克风权限，
注意：在我们开发过程中，前端项目要用localhost这个本地链接访问，否则会获取不到麦克风权限

	npm i js-audio-recorder

//在组件中导入插件
import Recorder from 'js-audio-recorder'

//获取麦克风权限的方法，我是在mounted中直接调用的
 initRecorder() {
      this.recorder = new Recorder({
        sampleBits: 16000, // 采样位数，支持 8 或 16，默认是16
        sampleRate: 44100, // 采样率，
        numChannels: 1, // 声道，支持 1 或 2， 默认是1
      })
      Recorder.getPermission().then(
        () => {
          console.log('给权限了')
          this.access = true
        },
        error => {
          console.log('获取失败')
          this.access = false
          // this.$Message.error({
          //   title: '获取麦克风失败！',
          //   desc: `${error.name} : ${error.message}`,
          // })
        }
      )
    },

（2）当用户按住空格键时，开始录音，松开空格键时发送消息

	//监听键盘
    addEventListenerForKey(type) {
    //因为只有语音消息需要监听键盘按下和松开事件，如果是文字发送时，type位false,删除掉监听事件
      if (type) {
        window.addEventListener('keydown', this.keyDownHandler)
        window.addEventListener('keyup', this.keyUpHandler)
      } else {
        window.removeEventListener('keydown', this.keyDownHandler)
        window.removeEventListener('keyup', this.keyUpHandler)
      }
    },
	//键盘按下
    keyDownHandler(e) {
      switch (e.keyCode) {
        case 32: //空格键
          this.voiceMask = true
          //当获取到麦克风权限时按下空格键，调用recorder.start()开始录音
          this.recorder.start().then(() => {// 开始录音},
            error => {// 出错了
              console.log(error)
            }
          )
          break
      }
    },
	//键盘松开
    keyUpHandler(e) {
      switch (e.keyCode) {
        case 32: //空格键
          //this.voiceMask = false
          let wavData = this.recorder.getWAV() //获取 WAV 数据，在录音结束后使用
          this.timeLength = Math.ceil(this.recorder.duration) //语音时长
          let mp3BlobData = this.convertToMp3(wavData) //转成MP3格式
          this.recorder.stop() // 停止录音
          if (this.access) {
            this.fnUploadRequest(mp3BlobData, this.timeLength)
          }
          break
      }
    },

（3）当用户松开空格键时，完成录音，通过 lamejstmp将录音转化位mp3格式的文件，js-audio-recorder官网上有

		//键盘松开时调用
    convertToMp3(wavDataView) {
      // 获取wav头信息
      const wav = lamejs.WavHeader.readHeader(wavDataView) // 此处其实可以不用去读wav头信息，毕竟有对应的config配置
      const { channels, sampleRate } = wav
      const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128)
      // 获取左右通道数据
      const result = this.recorder.getChannelData()
      const buffer = []

      const leftData =
        result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2)
      const rightData =
        result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2)
      const remaining = leftData.length + (rightData ? rightData.length : 0)

      const maxSamples = 1152
      for (let i = 0; i < remaining; i += maxSamples) {
        const left = leftData.subarray(i, i + maxSamples)
        let right = null
        let mp3buf = null

        if (channels === 2) {
          right = rightData.subarray(i, i + maxSamples)
          mp3buf = mp3enc.encodeBuffer(left, right)
        } else {
          mp3buf = mp3enc.encodeBuffer(left)
        }

        if (mp3buf.length > 0) {
          buffer.push(mp3buf)
        }
      }

      const enc = mp3enc.flush()

      if (enc.length > 0) {
        buffer.push(enc)
      }

      return new Blob(buffer, { type: 'audio/mp3' })
    },

（4）将录音文件转化为MP3格式后将文件上传，我这边是上传到阿里云oss

//阿里云oss上传录音文件
async fnUploadRequest(options, timeLength) {
      let ossFileName = 'voiceMessage' //上传到阿里云的文件
      options.name = new Date().getTime()
      let file = options // 拿到 file
      let res = await uploadOSS(file, ossFileName)
      this.voice_url = res.fileUrl
      //拿到oss返回的文件路径后调用发送语音的方法，
      //this.getVoice() //发送语音
    },

总结：一开始做的时候觉得这个功能好难，后面研究之后自己也实现了，这上面的就是我的实现思路，有成长了一小步