vue下录音组件recorderx

先贴上人家造的轮子:https://github.com/Zousdie/recorderx
感谢大神
因为版本更新了
所以有必要写一下
看了下其他的发现是老版本
有些方法用不了

不多说开始:
安装

npm install recorderx -S

引入

import Recorderx, { ENCODE_TYPE } from 'recorderx';

使用

//html
<mt-popup v-model="popupVisible2" position="bottom" class="popup2">
      <p>按住录制音频</p>
      <img src="@/assets/img/luyin.png" alt="" @touchstart="translationStart" @touchend="translationEnd">
      <span @click="popupShow2">×</span>
</mt-popup>

//methods
//我们后台是根据file的name来判断格式的,这个真的坑...（找了半天原因）  组件返回的wav,没有name，自己在append里加
//录音开始
        translationStart(){
            let that = this
            that.rc = new Recorderx()
            that.$nextTick(()=>{
                that.rc.start()
                .then(() => {
                    console.log("start recording");
                }).catch(error => {
                    console.log("Recording failed.", error);
                });
            })
        },

        //录音结束
        translationEnd(){
            this.rc.pause()
            var wav = this.rc.getRecord({
                encodeTo: ENCODE_TYPE.WAV,
            });
            this.uplode(wav)
        },

        //生成随机数
        getMath() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },

        //上传音频
        uplode(wav){
            var formData = new window.FormData()
            var name = this.getMath()+this.getMath()+this.getMath()+'.wav'
            formData.append('file',wav,name)// 'file' 这个名字要和后台获取文件的名字一样;
            formData.append('user_key', this.returnUserKey())
            console.log(wav)
            console.log(formData)
            var options = {  // 设置axios的参数
                url: this.returnAPI()+'Api/V1/Index/uploadFile',
                data: formData,
                method: 'post',
                headers: { 
                    'Content-Type': 'multipart/form-data'
                }
            }
            this.$axios(options).then((res) => {
                if(res.data.status == '1'){
                    this.$Toast({
                        message: res.data.msg,
                        duration: 2000
                    })
                }else {
                    this.$Toast({
                        message: res.data.msg,
                        duration: 2000
                    })
                }
            })
        }

其他api

//清除
clear()