uniapp realizes the function of recording and shouting

 Go directly to the code first:

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'
								})
							}
						})
					}
				})
			}

		},

Achieved effect:

When entering this page for the first time, a prompt selection box will pop up immediately, asking for permission to obtain the microphone, as shown in the figure

 

This prompt box will pop up once. After we choose one of the two options of deny and allow, we will enter the success or failure callback of the corresponding function. For example, after selecting reject, the next time we enter the page, we will directly enter the failure callback instead of The pop-up window asks for permission again,

---

Specifically analyze the above code:

The first thing to explain is that the above methods are the official APIs given by uniapp, which are used to obtain permissions. The details can be viewed in the official documents. The article is just to help yourself and readers to understand the idea of ​​​​obtaining permissions~

uni.getRecorderManager() | uni-app official website

1. First, when entering the page, call  uni.getSetting  to get the user's current microphone permission setting in the success callback success,

2. There is a parameter authSetting in the success callback , which is used to determine whether there is a microphone authorization,

 

 

3. Every time you enter the page, it will first judge the user's current permission settings for the microphone.

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

 But when entering for the first time, the value of res.authSetting['scope.record'] is undefined,

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

4. Therefore, if the judgment condition is not met, it will not enter the if statement, so the following code will be executed directly

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

 

The uni.authorize method will prompt the page to pop up immediately, as shown in the figure below

5. When we click one of the items, that is, we choose whether to enter the success or failure callback, select Allow => enter the success callback, call the uni.getRecorderManager() method in the success callback combined with the touch start and touch of the applet End the event to complete the recording, select reject => failure callback, prompt to open the microphone permission

Probably the idea is this way, it is a record