uniapp 如何发送语音

在uniapp中如何实现发送语音功能？需要调用哪些API或插件？能否提供一个完整的代码示例，包括录音、停止录音和上传语音文件到服务器的步骤？另外，需要注意哪些兼容性问题，比如在不同平台（iOS/Android）或浏览器上的差异？

2 回复

在uniapp中发送语音，可以使用uni.recordManager API录制语音，然后通过uni.uploadFile上传到服务器。记得先获取录音权限，并处理录制完成后的回调。


在 UniApp 中发送语音功能通常涉及录音、上传到服务器以及播放等步骤。以下是实现方法：

1. 录音功能

使用 uni.record API 进行录音：

// 开始录音
uni.startRecord({
  success: (res) => {
    this.tempFilePath = res.tempFilePath; // 临时存储录音文件路径
    console.log('录音成功:', this.tempFilePath);
  },
  fail: (err) => {
    console.error('录音失败:', err);
  }
});

// 停止录音（需手动调用，例如通过按钮触发）
stopRecording() {
  uni.stopRecord();
}

2. 上传录音文件

使用 uni.uploadFile 将录音上传到服务器：

uni.uploadFile({
  url: 'https://your-server.com/upload', // 替换为你的上传接口
  filePath: this.tempFilePath,
  name: 'voice',
  success: (uploadRes) => {
    console.log('上传成功:', uploadRes.data);
    // 服务器返回语音文件的访问URL
    this.voiceUrl = JSON.parse(uploadRes.data).url;
  },
  fail: (err) => {
    console.error('上传失败:', err);
  }
});

3. 播放录音

使用 uni.createInnerAudioContext 播放语音：

playVoice() {
  const audio = uni.createInnerAudioContext();
  audio.src = this.voiceUrl; // 服务器返回的语音URL
  audio.play();
}

4. 注意事项

  • 权限配置：在 manifest.json 中确保添加录音权限（H5 和 App 均需配置）。
  • 格式支持：录音默认生成 MP3 文件（具体格式依赖平台）。
  • 临时文件：录音文件为临时路径，需及时上传或保存，应用关闭后可能失效。

完整示例流程

  1. 用户点击按钮开始录音 -> uni.startRecord
  2. 结束录音 -> 保存临时文件路径
  3. 上传到服务器 -> 获取可访问的 URL
  4. 通过 URL 播放语音

根据实际需求，可结合 UI 组件（如按钮、进度条）优化交互体验。

回到顶部