当前位置：首页 > uni-app

uniapp录音组件

2026-03-05 06:47:22uni-app

uniapp录音组件

uniapp录音组件使用指南

uniapp提供了uni.getRecorderManager() API来实现录音功能，适用于H5、小程序和App平台。以下是具体实现方法：

初始化录音管理器

const recorderManager = uni.getRecorderManager();

设置录音参数

const options = {
  duration: 60000, // 录音时长（ms）
  sampleRate: 44100, // 采样率
  numberOfChannels: 1, // 声道数
  encodeBitRate: 192000, // 编码码率
  format: 'mp3', // 音频格式
  frameSize: 50 // 帧大小
};

开始录音

recorderManager.start(options);

停止录音

recorderManager.stop();

监听录音事件

recorderManager.onStart(() => {
  console.log('录音开始');
});

recorderManager.onStop((res) => {
  console.log('录音停止', res.tempFilePath);
  // res.tempFilePath为录音文件临时路径
});

recorderManager.onError((res) => {
  console.log('录音错误', res);
});

上传录音文件

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: tempFilePath,
  name: 'file',
  success: (res) => {
    console.log('上传成功', res);
  }
});

注意事项

小程序平台需要用户授权麦克风权限
App平台需要配置录音权限（Android需修改manifest.json）
H5平台需注意浏览器兼容性
录音文件临时路径在小程序平台有效期为本次会话

完整示例代码

export default {
  data() {
    return {
      tempFilePath: '',
      isRecording: false
    }
  },
  methods: {
    startRecord() {
      this.isRecording = true;
      this.recorderManager.start();
    },
    stopRecord() {
      this.isRecording = false;
      this.recorderManager.stop();
    }
  },
  onLoad() {
    this.recorderManager = uni.getRecorderManager();
    this.recorderManager.onStop((res) => {
      this.tempFilePath = res.tempFilePath;
    });
  }
}

以上方法可以实现uniapp中的基本录音功能，可根据实际需求进行调整和扩展。