[前端系列] vue3和elementui使用recorder.js实现录音功能

在实现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>

 

posted @ 2021-11-07 23:03  唯一客服系统开发笔记  阅读(1158)  评论(0)  编辑  收藏  举报