uniapp实现录音喊话功能

 直接先上代码:

const recorderManager = uni.getRecorderManager()	
onShow() {
			this.test()
		},
		methods: {
			test() {
				uni.getSetting({
					success: (res) => {
						console.log('res.authSetting', res.authSetting['scope.record']);
						if (res.authSetting['scope.record'] == false) {
							uni.showToast({
								title: '请先开启麦克风授权',
								icon: 'none'
							})
							return false
						}
						console.log(111);
						uni.authorize({
							scope: 'scope.record',
							success: (res) => {
								recorderManager.start({
									format: "mp3"
								})
							},
							fail: (res) => {
								uni.showToast({
									title: '喊话失败',
									icon: 'none'
								})
							}
						})
					}
				})
			}

		},

实现的效果:

首次进入该页面的时候,就会立刻弹出一个提示选择框,询问获取麦克风权限,如图

 

这个提示框会弹出一次,在我们选择了 拒绝  和  允许  这两个选项的其中之一后就会进入对应函数的成功或失败回调,比如选择了拒绝后下次进入页面会直接进入失败回调而非再次弹窗询问权限、


具体分析上面的代码:

首先要说明的是上面的这些方法都是uniapp官方给的api,用于获取权限,详细具体的都能在官方文档中查看,文章只是帮助自己也帮助读者捋一下获取权限的思路~

uni.getRecorderManager() | uni-app官网

1、 首先在进入页面时,调用 uni.getSetting 在成功回调success中去获取用户当前对于麦克风权限的设置,

2、在成功回调里存在参数authSetting,用于判断是否有麦克风授权,

3、在每次进入页面时都会先判断用户当前对于麦克风的权限设置,

if (res.authSetting['scope.record'] == false)

 但是在第一次进入的时候,res.authSetting['scope.record']的值为undefined,

console.log('res.authSetting', res.authSetting['scope.record']);//undefined

4、因此不符合判断条件也就不会进入if语句中,所以会直接执行接下来的代码

	uni.authorize({
							scope: 'scope.record',
							success: (res) => {
								recorderManager.start({
									format: "mp3"
								})
							},
							fail: (res) => {
								uni.showToast({
									title: '喊话失败',
									icon: 'none'
								})
							}
						})

uni.authorize方法会让页面立刻弹窗询问,如下图

5、当我们点击了其中某一项,也就是我们选择到底是进入成功还是失败回调,选择允许=>进入成功回调,在成功回调中调用uni.getRecorderManager()方法结合小程序的触摸开始以及触摸结束事件完成录音,选择拒绝=>失败回调,提示打开麦克风权限

大概思路如此,算是一次记录

猜你喜欢

转载自blog.csdn.net/a666666000/article/details/127228562