[前端系列] 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>

开源作品

GO-FLY，一套可私有化部署的免费开源客服系统，安装过程不超过五分钟(超过你打我 !)，基于Golang开发，二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的网页在线客服系统，致力于帮助广大开发者/中小站长快速整合私有客服功能

github地址：go-fly

官网地址：https://gofly.sopans.com

相关阅读:
腾讯云CDN python SDK
GLFW初体验
 Mac使用Xcode配置openGL
sklearn神经网络分类
 sklearn LDA降维算法
 sklearn CART决策树分类
 sklearn逻辑回归
 抢占式内核与非抢占式内核
 操作系统原理学习笔记--进程管理
 操作系统原理４——存储管理
原文地址：https://www.cnblogs.com/taoshihan/p/15522252.html