访客在聊天界面中可以发送语音，其实就是录音以后，调用上传接口，把录音文件发送给客服。
点击麦克图标以后，展示出一个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 ijs-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";},
在线客服系统访客发送录音功能 在elementui中使用js-audio-recorder实现录音功能 然后上传文件发送出去...
