在实现GOFLY在线克服的过程中，需要实现在线录音发送的功能
特别把这段代码demo抽出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Import style --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" /> <!-- Import Vue 3 --> <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> <!-- Import component library --> <script src="https://cdn.jsdelivr.net/npm/element-plus"></script> <style> .noTouch{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } </style> </head> <body> <div id="app"> <div style="text-align: center"> <el-progress type="circle" :format="recoderFormat" :stroke-width="10" :percentage="recoderSecond"></el-progress> <br/> <audio v-show="recorderEnd" controls ref="audio" muted="muted" src="" id="audio"></audio> <br/> <el-button @click="startRecoder()">开始</el-button> <el-button @click="stopRecoder()">结束</el-button> <el-button @click="cancelRecoder()">取消</el-button> <el-button round class="noTouch" type="success" @touchstart.stop.prevent="startRecoder" @touchend.stop.prevent="stopRecoder">${talkBtnText}</el-button> </div> </div> <script src="../../js/recoder.js"></script> <script> const App = { compilerOptions: { delimiters: ['${', '}'], comments: true }, data() { return { recorder:null, recoderSecond:0, recorderAudio:null, talkBtnText:"按住 说话", recorderEnd:false, }; }, methods: { //开始录音 startRecoder:function(e){ if(this.recorder){ this.recorder.destroy(); this.recorder=null; } var _this=this; _this.recorder = new Recorder(); _this.recorderAudio = document.querySelector('#audio'); _this.recorder.start(); _this.recorder.onprogress = function(params) { _this.recoderSecond=parseInt(params.duration); } this.talkBtnText="松开 结束"; e.preventDefault(); }, stopRecoder:function(){ if(!this.recorder){ return; } var blob=this.recorder.getWAVBlob(); this.recorderAudio.src = URL.createObjectURL(blob); this.recorderAudio.controls = true; this.talkBtnText="按住 说话"; this.recorderEnd=true; }, sendRecoder:function(){ if(!this.recorder){ return; } var blob=this.recorder.getWAVBlob(); this.talkBtnText="按住 说话"; }, cancelRecoder:function(){ this.recoderSecond=0; if(!this.recorder){ return; } this.recorder.destroy(); this.recorder=null; }, recoderFormat(percentage){ return percentage+"s"; } }, //属性初始化 created(){ } }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
