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

1.权限配置

在uni-app开发H5页面时，需要在manifest.json文件中添加录音权限的配置。具体如下：

{"h5": {"permissions": {"scope.record": {"desc": "请授权使用录音功能"}}}
}

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

编写获取权限代码

在获取了麦克风权限后，我们可以利用navigator.mediaDevices.getUserMedia接口获取音频流，然后通过MediaRecorder接口进行录音。接下来，我们将实现一个简单的录音功能。

首先，我们在页面中添加录音按钮和录音状态显示的HTML结构：

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

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

js代码（将音频文件转换为Blob上传）

<script>
export default {data() {return {isRecording: false,mediaRecorder: null,audioChunks: []};},methods: {async startRecording() {try {const stream = await navigator.mediaDevices.getUserMedia({ audio: true });this.mediaRecorder = new MediaRecorder(stream);this.mediaRecorder.ondataavailable = (event) => {this.audioChunks.push(event.data);};this.mediaRecorder.onstop = () => {const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });this.uploadAudio(audioBlob);};this.mediaRecorder.start();this.isRecording = true;} catch (error) {console.error('获取麦克风权限失败：', error);}},stopRecording() {if (this.mediaRecorder) {this.mediaRecorder.stop();this.isRecording = false;}},uploadAudio(audioBlob) {const formData = new FormData();formData.append('audio', audioBlob, 'recorded_audio.wav');uni.uploadFile({url: 'https://xxx.com/upload', // 替换为你的后端接口地址filePath: URL.createObjectURL(audioBlob),name: 'audio',formData: formData,success: (res) => {console.log('上传成功：', res);},fail: (err) => {console.error('上传失败：', err);}});}}
};
</script>

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

<script>
export default {data() {return {isRecording: false,mediaRecorder: null,audioChunks: []};},methods: {async startRecording() {try {const stream = await navigator.mediaDevices.getUserMedia({ audio: true });this.mediaRecorder = new MediaRecorder(stream);this.mediaRecorder.ondataavailable = (event) => {this.audioChunks.push(event.data);};this.mediaRecorder.onstop = () => {const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });this.convertToBase64(audioBlob);};this.mediaRecorder.start();this.isRecording = true;} catch (error) {console.error('获取麦克风权限失败：', error);}},stopRecording() {if (this.mediaRecorder) {this.mediaRecorder.stop();this.isRecording = false;}},convertToBase64(audioBlob) {const reader = new FileReader();reader.readAsDataURL(audioBlob);reader.onloadend = () => {const base64Audio = reader.result;this.sendAudioToBackend(base64Audio);};},sendAudioToBackend(base64Audio) {uni.request({url: 'https://xxx.com/upload', // 替换为你的后端接口地址method: 'POST',data: {audio: base64Audio},success: (res) => {console.log('上传成功：', res);},fail: (err) => {console.error('上传失败：', err);}});}}
};
</script>

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

downloadAudio(audioBlob) {const url = URL.createObjectURL(audioBlob);const a = document.createElement('a');a.style.display = 'none';a.href = url;a.download = 'recorded_audio.wav';document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);
}