@tanzhenxing/zx-recorder v1.0.2

zx-recorder 录音组件

一个基于 uni-app 录音管理器的高级录音组件，支持录音、播放、暂停、继续、上传等功能。

特性

• ✅ 完整的录音控制：开始、停止、暂停、继续
• ✅ 实时播放：录音完成后可直接播放
• ✅ 自动上传：支持自动上传到 uniCloud 云存储
• ✅ 状态管理：完整的录音状态跟踪和显示
• ✅ 错误处理：完善的错误提示和处理机制
• ✅ 进度显示：录音时间计时和上传进度显示
• ✅ 灵活配置：支持多种音频格式和参数配置
• ✅ 事件回调：丰富的事件监听机制
• ✅ 美观UI：现代化的用户界面设计

平台支持

安装使用

1. 复制组件文件

将 zx-recorder.vue 文件复制到您的项目中。

2. 基础使用

<template>
  <view>
    <zx-recorder 
      @end="onRecordEnd"
      @error="onRecordError"
    />
  </view>
</template>

<script setup>
import zxRecorder from '@/components/zx-recorder/zx-recorder.vue';

const onRecordEnd = (recordFile) => {
  console.log('录音完成:', recordFile);
};

const onRecordError = (error) => {
  console.error('录音出错:', error);
};
</script>

3. 高级配置

<template>
  <zx-recorder 
    :duration="120000"
    :sampleRate="44100"
    :format="'aac'"
    :autoUpload="true"
    :cloudPathPrefix="'my-audio/'"
    :detectDecibel="true"
    @start="onStart"
    @stop="onStop"
    @pause="onPause"
    @resume="onResume"
    @end="onEnd"
    @error="onError"
    @play="onPlay"
    @playEnd="onPlayEnd"
  />
</template>

API 文档

Props

Events

Methods

通过 ref 可以调用以下方法：

录音文件对象

{
  duration: 30000,           // 录音时长（毫秒）
  tempFilePath: '...',       // 临时文件路径
  fileSize: 256000,          // 文件大小（字节）
  url: '...',                // 云存储文件 URL
  key: '...',                // 云存储文件 key
  cloudPath: '...'           // 云存储文件路径
}

完整示例

基础录音功能

<template>
  <view>
    <zx-recorder 
      ref="recorder"
      :autoUpload="false"
      @end="handleRecordEnd"
    />
    
    <button @click="handleReset">重置</button>
    <button @click="handleUpload">上传</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import zxRecorder from '@/components/zx-recorder/zx-recorder.vue';

const recorder = ref();

const handleRecordEnd = (recordFile) => {
  console.log('录音信息:', recordFile);
  uni.showToast({
    title: `录音完成: ${Math.round(recordFile.duration/1000)}秒`,
    duration: 2000
  });
};

const handleReset = () => {
  recorder.value.resetRecorder();
};

const handleUpload = async () => {
  try {
    await recorder.value.uploadFile();
    uni.showToast({ title: '上传成功' });
  } catch (error) {
    uni.showToast({ title: '上传失败', icon: 'error' });
  }
};
</script>

高级配置示例

<template>
  <view>
    <!-- 高音质录音 -->
    <zx-recorder 
      :duration="300000"
      :sampleRate="44100"
      :numberOfChannels="2"
      :encodeBitRate="128000"
      :format="'aac'"
      :detectDecibel="true"
      @end="handleHighQualityRecord"
    />
  </view>
</template>

<script setup>
const handleHighQualityRecord = (recordFile) => {
  console.log('高音质录音完成:', recordFile);
  // 处理高音质录音
};
</script>

错误处理

组件内置了完善的错误处理机制：

// 录音权限错误
{
  errCode: 10001,
  errMsg: '未获得录音权限'
}

// 网络错误
{
  errCode: 10002,
  errMsg: '网络问题无法录音'
}

// 录音被占用
{
  errCode: 10003,
  errMsg: '录音功能被占用'
}

// 录音已暂停
{
  errCode: 10004,
  errMsg: '录音已经被暂停'
}

注意事项

1. 权限要求：使用前请确保应用已获取录音权限
2. 平台限制：部分平台可能不支持某些音频格式
3. 文件上传：需要配置 uniCloud 云存储才能使用自动上传功能
4. 内存管理：长时间录音请注意内存使用情况
5. 兼容性：微信小程序建议使用 API 方式而不是 audio 组件

更新日志

v1.0.0

• ✅ 初始版本发布
• ✅ 支持基础录音功能
• ✅ 支持音频播放
• ✅ 支持云存储上传
• ✅ 完善的状态管理
• ✅ 错误处理机制

参考文档

• uni-app 录音管理器
• uni-app 音频上下文
• uni-app 背景音频管理
• uni-app audio 组件

许可证

MIT License