uniapp使用Recorder实现H5录音_uniapp中Recorder的使用
2024-11-21 19:22:23
下面是在实际过程中引用Recorder的使用方法与遇到问题的解决处理
1161
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