uniapp实现H5页面麦克风权限获取与灌音功能

1.权限设置

在uni-app开发H5页面时，必要在manifest.json文件中添加灌音权限的设置。详细如下：

1. {
2.   "h5": {
3.     "permissions": {
4.       "scope.record": {
5.         "desc": "请授权使用录音功能"
6.       }
7.     }
8.   }
9. }

复制代码

这段设置代码是用于向用户哀求麦克风权限，确保应用在运行时可以访问装备的音频输入。
编写获取权限代码

在获取了麦克风权限后，我们可以利用navigator.mediaDevices.getUserMedia接口获取音频流，然后通过MediaRecorder接口进行灌音。接下来，我们将实现一个简朴的灌音功能。
首先，我们在页面中添加灌音按钮和灌音状态表现的HTML布局：

1. <template>
2.   <view>
3.     <button @click="startRecording">开始录音</button>
4.     <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
5.     <text>录音状态：{{ isRecording ? '录音中' : '未录音' }}</text>
6.   </view>
7. </template>

复制代码

这个部门用于在页面上展示灌音的控制按钮和状态信息。接下来，我们编写JavaScript代码，分别实现将音频流转换为Blob文件并上传、将音频流转换为Base64字符串上传，以及将音频文件下载到本地的功能。
js代码（将音频文件转换为Blob上传）

1. <script>
2. export default {
3.   data() {
4.     return {
5.       isRecording: false,
6.       mediaRecorder: null,
7.       audioChunks: []
8.     };
9.   },
10.   methods: {
11.     async startRecording() {
12.       try {
13.         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
14.         this.mediaRecorder = new MediaRecorder(stream);
15.         this.mediaRecorder.ondataavailable = (event) => {
16.           this.audioChunks.push(event.data);
17.         };
18.         this.mediaRecorder.onstop = () => {
19.           const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
20.           this.uploadAudio(audioBlob);
21.         };
22.         this.mediaRecorder.start();
23.         this.isRecording = true;
24.       } catch (error) {
25.         console.error('获取麦克风权限失败：', error);
26.       }
27.     },
28.     stopRecording() {
29.       if (this.mediaRecorder) {
30.         this.mediaRecorder.stop();
31.         this.isRecording = false;
32.       }
33.     },
34.     uploadAudio(audioBlob) {
35.       const formData = new FormData();
36.       formData.append('audio', audioBlob, 'recorded_audio.wav');
38.       uni.uploadFile({
39.         url: 'https://xxx.com/upload', // 替换为你的后端接口地址
40.         filePath: URL.createObjectURL(audioBlob),
41.         name: 'audio',
42.         formData: formData,
43.         success: (res) => {
44.           console.log('上传成功：', res);
45.         },
46.         fail: (err) => {
47.           console.error('上传失败：', err);
48.         }
49.       });
50.     }
51.   }
52. };
53. </script>

复制代码

js代码（将音频文件转换为base64范例上传）

1. <script>
2. export default {
3.   data() {
4.     return {
5.       isRecording: false,
6.       mediaRecorder: null,
7.       audioChunks: []
8.     };
9.   },
10.   methods: {
11.     async startRecording() {
12.       try {
13.         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
14.         this.mediaRecorder = new MediaRecorder(stream);
15.         this.mediaRecorder.ondataavailable = (event) => {
16.           this.audioChunks.push(event.data);
17.         };
18.         this.mediaRecorder.onstop = () => {
19.           const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
20.           this.convertToBase64(audioBlob);
21.         };
22.         this.mediaRecorder.start();
23.         this.isRecording = true;
24.       } catch (error) {
25.         console.error('获取麦克风权限失败：', error);
26.       }
27.     },
28.     stopRecording() {
29.       if (this.mediaRecorder) {
30.         this.mediaRecorder.stop();
31.         this.isRecording = false;
32.       }
33.     },
34.     convertToBase64(audioBlob) {
35.       const reader = new FileReader();
36.       reader.readAsDataURL(audioBlob);
37.       reader.onloadend = () => {
38.         const base64Audio = reader.result;
39.         this.sendAudioToBackend(base64Audio);
40.       };
41.     },
42.     sendAudioToBackend(base64Audio) {
43.       uni.request({
44.         url: 'https://xxx.com/upload', // 替换为你的后端接口地址
45.         method: 'POST',
46.         data: {
47.           audio: base64Audio
48.         },
49.         success: (res) => {
50.           console.log('上传成功：', res);
51.         },
52.         fail: (err) => {
53.           console.error('上传失败：', err);
54.         }
55.       });
56.     }
57.   }
58. };
59. </script>

复制代码

JS代码（下载录制好的音频）

1. downloadAudio(audioBlob) {
2.   const url = URL.createObjectURL(audioBlob);
3.   const a = document.createElement('a');
4.   a.style.display = 'none';
5.   a.href = url;
6.   a.download = 'recorded_audio.wav';
7.   document.body.appendChild(a);
8.   a.click();
9.   window.URL.revokeObjectURL(url);
10. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。