美文网首页
vue下录音组件recorderx

vue下录音组件recorderx

作者: __黑 | 来源:发表于2019-06-26 11:23 被阅读0次

    先贴上人家造的轮子: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()
    

    相关文章

      网友评论

          本文标题:vue下录音组件recorderx

          本文链接:https://www.haomeiwen.com/subject/bigqcctx.html