uniapp实现h5端录音发送语音

UniApp是一个基于 Vue.js 的跨平台框架，它允许开发者构建一次，运行于多个平台上，包括Web、H5、iOS、Android等。要在 UniApp 中实现实时音频录制并发送为语音文件，你可以采用以下步骤：

1. **引入所需模块**：
首先，在项目中安装必要的插件，如 `uni-mediarecorder` 和 `uni-file-opener`，用于音频处理和文件操作。

npm install uni-mediarecorder uni-file-opener

2. **配置权限**：
在项目的 App.json 或全局 JSON 文件中，添加对麦克风访问的权限声明。

"permission": {
  "scope.permission microphone": {
    "desc": "需要访问您的麦克风"
  }
}

3. **设置录音组件**：
使用 `uni-mediarecorder` 组件创建一个录音功能，监听录音完成事件 (`onchange`)。

<template>
  <view>
    <uni-mediaRecorder
      :duration="recordingDuration"
      ref="mediaRecorder"
      :format="audioFormat"
      @change="handleRecordChange"
    ></uni-mediaRecorder>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recordingDuration: 10,
      audioFormat: 'mp3', // 支持的格式如 mp3, wav 等
      audioBlob: null,
    };
  },
  methods: {
    startRecording() {
      this.$refs.mediaRecorder.start();
    },
    stopRecording() {
      this.$refs.mediaRecorder.stop();
    },
    handleRecordChange(e) {
      const blob = e.detail.blob;
      if (blob.size > 0) {
        // 录音完成后转码成适合发送的格式（例如 base64）
        this.convertAudioBlobToBase64(blob);
      } else {
        console.error('录音失败');
      }
    },
    convertAudioBlobToBase64(audioBlob) {
      uni.fileManager.readFile({
        filePath: audioBlob.name, // 获取到的文件路径
        type: 'binary',
      }).then((res) => {
        this.audioBase64 = window.btoa(res.data);
        // 发送base64编码的音频数据
        this.sendVoice(this.audioBase64);
      });
    },
    sendVoice(base64Data) {
      // 发送接口将 base64 数据作为语音内容
      // 示例：axios.post('/api/sendVoice', { voiceBase64: base64Data })
    },
  },
};
</script>

4. **处理发送**：
完成录音并转换为 Base64 后，调用接口将语音数据发送给服务器，这里假设已经实现了 API 接口。

注意：实际应用中，你可能需要处理更多边缘情况，并确保在用户停止录音时能正确停止录音，以及处理网络请求等异常。