uniapp实现h5录音功能

uniapp实现h5录音功能uniapp录音功能是不支持h5的，很多小伙伴可能会遇到在h5实现不了录音功能。下面我将为大家介绍一种我亲测的在uniapp实现h5中的录音。recorder-core的使用方式：1、先通过npm安装，然后通过import/require引入//通过npm安装npm install recorder-core(1)引入方式1//通过import/require引入//必

cuteApril

9876人浏览 · 2021-12-23 14:21:24

cuteApril · 2021-12-23 14:21:24 发布

uniapp实现h5录音功能

uniapp录音功能是不支持h5的，很多小伙伴可能会遇到在h5实现不了录音功能。下面我将为大家介绍一种我亲测的在uniapp实现h5中的录音。

recorder-core的使用方式：
1、先通过npm安装，然后通过import/require引入

//通过npm安装
npm install recorder-core

(1)引入方式1

//通过import/require引入
//必须引入的核心，换成require也是一样的。注意：recorder-core会自动往window下挂载名称为Recorder对象，全局可调用window.Recorder，也许可自行调整相关源码清除全局污染
import Recorder from 'recorder-core'

//需要使用到的音频格式编码引擎的js文件统统加载进来
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'

（2）引入方式2

<script src="你项目中的路径/src/recorder-core.js"></script> <!--必须引入的录音核心-->
<script src="你项目中的路径/src/engine/mp3.js"></script> <!--相应格式支持文件-->
<script src="你项目中的路径/src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎的话，也要加上-->
<script src="你项目中的路径/src/extensions/waveview.js"></script>  <!--可选的扩展支持项-->

2、通过HbuildX开发的小伙伴，可以在uniapp插件市场找到搜recorder-core，然后使用HbuildX导入，导入完成后也是要通过import/require引入使用的（引入方式跟上面一样）
在这里插入图片描述
3、也是在uniapp插件市场去下载到项目中去

我自己的录音案例：

//开始录音的方法
uploadRecord() {
				// 开始录音
				var This = this;
				This.touchStart = true;
				var rec = this.rec = Recorder({
					type: This.typeis,
					bitRate: This.bitRate,
					sampleRate: This.sampleRate,
					onProcess: function(buffers, powerLevel, duration, sampleRate) {
						This.duration = duration;
						This.powerLevel = powerLevel;
					}
				});
				rec.open(function() {
					uni.showToast({
						title:'开始录音',
						icon:'none'
					})
					console.log('开始录音')
					This.rec.start();
					
					This.reclog("已打开:" + This.type + " " + This.sampleRate + "hz " + This.bitRate + "kbps", 2);
				}, function(msg, isUserNotAllow) {
					// This.dialogCancel();
					console.log(msg, isUserNotAllow)
					This.reclog((isUserNotAllow ? "UserNotAllow，" : "") + "打开失败：" + msg, 1);
				});
				This.waitDialogClickFn = function() {
					// This.dialogCancel();
					This.reclog("打开失败：权限请求被忽略，用户主动点击的弹窗", 1);
				};

			},

//结束录音的方法
h5btn_sub_stop() {
				console.log(123123)
				var This = this;
				This.touchStart = false;
				var rec = This.rec;
				This.rec = null;
				if (!rec) {
					This.reclog("未打开录音", 1);
					wx.showToast({
						title:'未开始录音'
					})
					return;
				}
				rec.stop(function(blob, duration) {
					var reader = new FileReader();
					reader.addEventListener("load", function() {
						console.log(reader)
						if (reader.result.length > 100) {
							This.he_show = true
						}
					}, false);
					reader.readAsDataURL(blob);
					console.log(blob,duration,'blob')
					let blobURL = window.URL.createObjectURL(blob)
					console.log(blobURL,'--------')
					uni.uploadFile({
						file: blob,
						name: 'file',
						formData:{
							file:blob
						},
						url:'https:xxxxxxxx/api/Upload/Upload',//上传录音的接口
						success: function(res) {
							var resData = res;
							if (resData.statusCode == 200) {
								This.audioSrc = res.data
							} else {
								uni.showToast({
									title: '文件上传过大',
									icon: 'none'
								})
							}
						},
						fail(e) {
							console.log(e,'失败原因')
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						},
						complete() {
							uni.hideLoading();
						}
					})
				}, function(s) {
					This.reclog("结束出错：" + s, 1);
				}, true); //自动close
			},

h5 使用recorder-core 用于html5录音 GitHub: https://github.com/xiangyuecn/Recorder