vue3实现H5网页录音并上传（mp3、wav）兼容Android、iOS和PC端_h5录音

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

步骤1：
npm安装recorder-core插件包（Recorder插件的GitHub文档 | Gitee文档）

npm install recorder-core
1

步骤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类型）
1
2
3
4
5
6
7
8
9
10
11
12
13

步骤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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

步骤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);
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

步骤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;
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

步骤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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

附：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'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

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

【完】