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