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