关于前端:vue3实现H5网页录音并上传mp3wav兼容AndroidiOS和PC端

8次阅读

共计 4070 个字符，预计需要花费 11 分钟才能阅读完成。

应用 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、夸克，不过好在手机零碎自带浏览器、微信外面都能录音，成果还是很不错的）。

【完】

正文完