vue pc端发送语音聊天

第一步安装依赖
npm install recorderx --sava
这个包是用的recorder.js封装的基于h5的录音功能
第二步页面引入

import Recorderx, {
      ENCODE_TYPE } from "recorderx";
const rc = new Recorderx();

第三步pc端鼠标撒手没效果
1.获取麦克风权限
这时候要手动开始录音调用麦克风获取权限，同意后默认开始录音，这时候要手动暂停录音，然后清除这次录音。

rc.start().then(() => {
     
                rc.pause();
                rc.clear()
                this.audioaccet = true
                this.$message({
     
                    message: "获取麦克风成功",
                    type: "sucess"
                });
            })
            .catch(error => {
     
                this.$message({
     
                    message: "获取麦克风失败",
                    type: "warning"
                });
                console.log("Recording failed.", error);
            });

2.鼠标点击开始录音
鼠标点击用的是onmousedown()方法

 onmousedown(){
     
            let that = this
            rc.start().then(() => {
     
                console.log("start recording");
            })
            .catch(error => {
     
                console.log("Recording failed.", error);
            });
        },

3.鼠标离开结束录音
鼠标离开用的是onmouseup()方法

onmouseup(){
     
            this.statusaudio = true
            rc.pause()
        },

4.上传录音
上传录音就是把录音文件上传上去，所以header头得设置Content-Type属性为multipart/form-data，这里比较重要的一点是formData.append()语音文件的时候要给文件加上后缀，不然后台有可能根据后缀名字是找不到这个语音文件的。

  let that = this
            let wav = rc.getRecord({
     
            encodeTo: ENCODE_TYPE.WAV,
            compressible: true
            });
            let params = {
     };
            let formData = new FormData();
            formData.append("file", wav,Date.parse(new Date())+".wav");
            formData.append('vo',JSON.stringify(params));
            let headers = {
     headers: {
     "Content-Type": "multipart/form-data"}}
            this.$axios.post( this.$api.messagesendmessage,formData,headers).then(data => {
     
                    if(data.data.code==1)
                        rc.clear();
                        this.statusaudio = false
                    })
                    .catch(err => {
     
                    console.log(err);
                    });