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