uni-app语音录制发送功能哪里有

发布于 1周前 作者 vueper 来自 Uni-App

uni-app语音录制发送功能哪里有

appx 是否有录音和发送语音的API或插件?

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
|          |        |              |
1 回复

在uni-app中实现语音录制并发送功能,通常需要使用到HTML5的MediaRecorder API来录制音频,然后通过uni-app提供的网络接口发送音频数据。以下是一个简单的代码示例,展示了如何在uni-app中实现这一功能。

首先,确保你的uni-app项目已经正确配置,并且你有权访问所需的网络接口。

1. 页面结构(在页面的.vue文件中)

<template>
  <view class="container">
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录制</button>
    <button @click="sendAudio" :disabled="!audioChunks.length">发送音频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      audioChunks: [],
      isRecording: false,
    };
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (event) => {
        this.audioChunks.push(event.data);
      };
      this.mediaRecorder.start();
      this.isRecording = true;
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.isRecording = false;
      const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
      // 这里可以将audioBlob转换为base64或直接发送
      // this.audioChunks = []; // 清空chunks以便下次录制
    },
    async sendAudio() {
      const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
      const formData = new FormData();
      formData.append('audio', audioBlob, 'recorded_audio.wav');

      try {
        const response = await uni.uploadFile({
          url: 'https://your-server-url/upload', // 替换为你的服务器上传接口
          filePath: '', // 这里不需要,因为我们使用formData
          name: 'file', // 服务器接收的文件字段名
          formData,
          success: (uploadFileRes) => {
            console.log('文件上传成功:', uploadFileRes);
          },
          fail: (err) => {
            console.error('文件上传失败:', err);
          },
        });
      } catch (error) {
        console.error('发送音频时出错:', error);
      }
    },
  },
};
</script>

2. 样式(可选)

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
</style>

注意事项

  1. 确保你的应用有权限访问麦克风。
  2. navigator.mediaDevices.getUserMedia 可能需要在HTTPS环境下才能正常工作。
  3. 服务器上传接口需要正确处理上传的文件。
  4. 根据实际需求,你可能需要对音频数据进行编码或格式转换。
回到顶部