美文网首页
vue3实现H5网页录音并上传(mp3、wav)兼容Androi

vue3实现H5网页录音并上传(mp3、wav)兼容Androi

作者: 高坚果兄弟 | 来源:发表于2023-06-10 14:41 被阅读0次

    使用 Recorder插件 可以在HTML5网页中进行录音,录音完成后得到blob文件对象,然后将blob上传到服务器;项目使用的vue3.0版本(这个插件同时支持vue2.0、也支持uniapp,很强!!),录音过程中会显示可视化波形,同时能够做到兼容PC端、Android、和iOS,一次编码 到处运行,哈哈~省了不少事

    步骤1:
    npm安装recorder-core插件包(Recorder插件的GitHub文档 | Gitee文档

    npm install recorder-core
    

    步骤2:
    在需要录音的组件中引入插件,和对应录音格式的编码器、可视化插件

    //必须引入的核心
    import Recorder from 'recorder-core'
    
    //引入mp3格式支持文件;如果需要多个格式支持,把这些格式的编码引擎js文件放到后面统统引入进来即可
    import 'recorder-core/src/engine/mp3'
    import 'recorder-core/src/engine/mp3-engine'
    //录制wav格式的用这一句就行
    //import 'recorder-core/src/engine/wav'
    
    //可选的插件支持项,这个是波形可视化插件
    import 'recorder-core/src/extensions/waveview'
    
    //ts import 提示:npm包内已自带了.d.ts声明文件(不过是any类型)
    

    步骤3:
    先编写部分界面,3个按钮,1个可视化波形显示区域

    <template>
    <div>
        <div> <!-- 按钮 -->
            <button @click="recOpen">打开录音,请求权限</button>
            | <button @click="recStart">开始录音</button>
              <button @click="recStop">结束录音</button>
            | <button @click="recPlay">本地试听</button>
        </div>
        <div style="padding-top:5px"> <!-- 波形绘制区域 -->
            <div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom">
                <div style="height:100px;width:300px;" ref="recwave"></div>
            </div>
        </div>
    </div>
    </template>
    

    步骤4:
    打开录音,申请录音权限(这些方法都是放到methods里面,下同)

    ,recOpen(){
        //创建录音对象
        this.rec=Recorder({
            type:"mp3" //录音格式,可以换成wav等其他格式
            ,sampleRate:16000 //录音的采样率,越大细节越丰富越细腻
            ,bitRate:16 //录音的比特率,越大音质越好
            ,onProcess:(buffers,powerLevel,bufferDuration,bufferSampleRate,newBufferIdx,asyncEnd)=>{
                //录音实时回调,大约1秒调用12次本回调
                //可实时绘制波形,实时上传(发送)数据
                if(this.wave) this.wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);
            }
        });
        
        //打开录音,获得权限
        this.rec.open(()=>{
            console.log("录音已打开");
            if(this.$refs.recwave){//创建音频可视化图形绘制对象
                this.wave=Recorder.WaveView({elem:this.$refs.recwave});
            }
        },(msg,isUserNotAllow)=>{
            //用户拒绝了录音权限,或者浏览器不支持录音
            console.log((isUserNotAllow?"UserNotAllow,":"")+"无法录音:"+msg);
        });
    }
    

    步骤5:
    开始录音,和结束录音

    ,recStart(){
        if(!this.rec){ console.error("未打开录音");return }
        this.rec.start();
        console.log("已开始录音");
    }
    
    ,recStop(){
        if(!this.rec){ console.error("未打开录音");return }
        this.rec.stop((blob,duration)=>{
            //blob就是我们要的录音文件对象,可以上传,或者本地播放
            this.recBlob=blob;
            //简单利用URL生成本地文件地址,此地址只能本地使用,比如赋值给audio.src进行播放,赋值给a.href然后a.click()进行下载(a需提供download="xxx.mp3"属性)
            var localUrl=(window.URL||webkitURL).createObjectURL(blob);
            console.log("录音成功",blob,localUrl,"时长:"+duration+"ms");
            
            this.upload(blob);//把blob文件上传到服务器
            
            this.rec.close();//关闭录音,释放录音资源,当然可以不释放,后面可以连续调用start
            this.rec=null;
        },(err)=>{
            console.error("结束录音出错:"+err);
            this.rec.close();//关闭录音,释放录音资源,当然可以不释放,后面可以连续调用start
            this.rec=null;
        });
    }
    

    步骤6:
    上传录音文件到服务器,和本地直接试听

    ,upload(blob){
        //使用FormData用multipart/form-data表单上传文件
        //或者将blob文件用FileReader转成base64纯文本编码,使用普通application/x-www-form-urlencoded表单上传
        var form=new FormData();
        form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致,后端接收到upfile参数的文件,文件名为recorder.mp3
        form.append("key","value"); //其他参数
        
        var xhr=new XMLHttpRequest();
        xhr.open("POST", "/upload/xxxx");
        xhr.onreadystatechange=()=>{
            if(xhr.readyState==4){
                if(xhr.status==200){
                    console.log("上传成功");
                }else{
                    console.error("上传失败"+xhr.status);
                };
            };
        };
        xhr.send(form);
    }
    
    ,recPlay(){
        //本地播放录音试听,可以直接用URL把blob转换成本地播放地址,用audio进行播放
        var localUrl=URL.createObjectURL(this.recBlob);
        var audio=document.createElement("audio");
        audio.controls=true;
        document.body.appendChild(audio);
        audio.src=localUrl;
        audio.play(); //这样就能播放了
        
        //注意不用了时需要revokeObjectURL,否则霸占内存
        setTimeout(function(){ URL.revokeObjectURL(audio.src) },5000);
    }
    

    附:Recorder的更多方法

    rec.open(success,fail) //打开录音,请求录音权限
    rec.close() //关闭录音,释放麦克风资源
    
    rec.start() //开始录音
    rec.stop(success,fail) //结束录音
    
    rec.pause() //暂停录音
    rec.resume() //恢复继续录音
    
    //可视化插件:WaveView插件
    import 'recorder-core/src/extensions/waveview'
    
    //可视化插件:WaveSurferView插件
    import 'recorder-core/src/extensions/wavesurfer.view'
    
    //可视化插件:FrequencyHistogramView插件
    import 'recorder-core/src/extensions/frequency.histogram.view'
    import 'recorder-core/src/extensions/lib.fft'
    
    //BufferStreamPlayer插件:实时播放录音片段文件,把片段文件转换成MediaStream流
    import 'recorder-core/src/extensions/buffer_stream.player'
    
    //ASR_Aliyun_Short插件:阿里云语音识别(语音转文字),支持实时语音识别、单个音频文件转文字
    import 'recorder-core/src/extensions/asr.aliyun.short'
    
    //Sonic插件:变速变调插件
    import 'recorder-core/src/extensions/sonic'
    

    附这个插件的在线测试地址:https://xiangyuecn.gitee.io/recorder/

    vue3项目打包后,放服务器里面,同时开启https访问(必须https才能录音,本地localhost没有这个限制),然后电脑、Android、iOS上打开这个网页就都能录音了(但有些浏览器不能录音,比如UC、夸克,不过好在手机系统自带浏览器、微信里面都能录音,效果还是很不错的)。

    【完】

    相关文章

      网友评论

          本文标题:vue3实现H5网页录音并上传(mp3、wav)兼容Androi

          本文链接:https://www.haomeiwen.com/subject/hoosjdtx.html