526互联

在线客服系统访客发送录音功能，在elementui中使用js-audio-recorder实现录音功能，然后上传文件发送出去

发布时间 2023-04-18 23:41:18作者: 唯一客服系统开发笔记

访客在聊天界面中可以发送语音，其实就是录音以后，调用上传接口，把录音文件发送给客服。

 点击麦克图标以后，展示出一个elementui的dialog弹窗，里面展示四个功能按钮。

分别是，开始录音，结束录音，取消录音，发送录音。基本流程就是点开始，然后点结束，再点发送。

下面是聊天界面中的dialog弹窗 ，另外我还增加了一个进度条的展示，超过60秒就结束录音，以及展示录音文件

        <!--录音-->
        <el-dialog
                :visible.sync="audioDialog"
                width="100%"
                center
        >
            <div class="dialogRecoder">
                <el-progress :color="colors" type="dashboard" :format="recoderFormat" :stroke-width="10" :percentage="recoderSecond"></el-progress>
                <br/>
                <audio v-show="recorderEnd!=null" controls ref="audio" muted="muted" src="" id="audio"></audio>
                <br/>
                <el-button @click="startRecoder()" size="small" type="primary">開始</el-button>
                <el-button @click="stopRecoder()" size="small" type="warning">結束</el-button>
                <el-button @click="cancelRecoder()" size="small" type="danger">取消</el-button>
                <el-button @click="sendRecoder()" size="small" type="success">發送</el-button>
            </div>
        </el-dialog>
        <!--//录音-->

 

另外，我的代码是根据我自己的项目情况，直接摘抄出来的，请结合自己项目进行修改

然后安装js-audio-recorder  

npm i js-audio-recorder

使用方式是  import Recorder from 'js-audio-recorder'

然后就是那四个操作方法了，其中的data属性是

              //录音
              recorder:null,
              audioDialog:false,
              recoderSecond:0,
              recorderEnd:null,
              colors: [
                  {color: '#f56c6c', percentage: 20},
                  {color: '#e6a23c', percentage: 40},
                  {color: '#5cb87a', percentage: 60},
                  {color: '#1989fa', percentage: 80},
                  {color: '#6f7ad3', percentage: 100}
              ],

method部分是

             //开始录音
            startRecoder:function(){
                if(this.recorder){
                    this.recorder.destroy();
                    this.recorder=null;
                }
                var _this=this;
                Recorder.getPermission().then(function() {
                    _this.recorder = new Recorder();
                    _this.recorderAudio = document.querySelector('#audio');
                    _this.recorder.start();
                    _this.recorder.onprogress = function (params) {
                        _this.recoderSecond = parseInt(params.duration);
                        if(_this.recoderSecond>=60) _this.stopRecoder();
                    }
                }, function(error){
                    _this.$message({
                        message: error,
                        type: 'error'
                    });
                    return;
                });
            },
            //结束录音
            stopRecoder:function(){
                if(!this.recorder){
                    return;
                }
                var blob=this.recorder.getWAVBlob();
                this.recorderAudio.src = URL.createObjectURL(blob);
                this.recorderAudio.controls = true;
                this.recorderEnd=blob;
                this.recorder.destroy();
                this.recorder=null;
            },
            //发送录音
            sendRecoder:function(){
                this.stopRecoder();
                if(!this.recorderEnd) return;
                
                let _this=this;
                let formData = new FormData();
                formData.append("realfile", this.recorderEnd); //传给后台的file的key值是可以自己定义的
                fetch(_this.ApiHost+'/2/uploadAudio', {
                  method: "POST",
                  body: formData
                })
                .then(response => response.json())
                .then(res => {
                  console.log(res);
                    if(res.code!=200){
                      _this.$message({
                          message: res.msg,
                          type: 'error'
                      });
                    }else{
                      _this.$message({
                          message: "success！",
                          type: 'success'
                      });
                      _this.cancelRecoder();
                      _this.visitor.message='audio[' + res.result.path+ ']';
                      _this.chatToUser();
                    }
                })
                .catch(error => {
                  console.error(error);
                });
            },
            //取消录音
            cancelRecoder:function(){
                this.audioDialog=false;
                if(!this.recorder){
                    return;
                }
                this.recorder.destroy();
                this.recorder=null;
                this.recoderSecond=0;
            },
            //录音的百分比
            recoderFormat:function(percentage){
                return percentage+"s";
            },