uniapp使用Recorder实现H5录音_uniapp中Recorder的使用
2025-11-09 06:20:22
下面是在实际过程中引用Recorder的使用方法与遇到问题的解决处理
2555
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'
开始录音的方法
uploadRecord() {
// 开始录音
var This = this;
This.touchStart = true;
var rec = this.rec = Recorder({
type: "mp3",
bitRate: 16,
sampleRate: 48000,
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
},
https://blog.csdn.net/weixin_44020340/article/details/122100100
