更新记录

1.0.0（2026-07-06） 下载此版本

v1.0.0 初始版本，支持录音、上传、播放、倍速、进度拖拽

平台兼容性

uni-app x(5.14)

VoiceMemo 语音备忘组件

uni-app x 语音备忘组件，支持按住说话、上划取消、音频播放、倍速控制、进度拖拽。零依赖，开箱即用。

功能特性

• 按住说话：仿微信交互，按住录音按钮开始录音
• 上划取消：录音过程中手指上划超过阈值进入取消状态，松手取消发送
• 自动上传：录音完成后自动上传音频文件到指定服务器
• 音频播放：支持播放/暂停、0.7x/1.5x 倍速切换、进度条拖拽定位
• 权限引导：自动检测麦克风权限，引导用户授权
• 零依赖：不依赖第三方 UI 库，图标全部用 CSS 绘制，自包含可独立使用

平台兼容性

本组件基于 uni-app x（.uvue + UTS）开发，仅支持 App 端。

安装

方式一：插件市场安装（推荐）

在 DCloud 插件市场 搜索 "VoiceMemo"，点击「使用 HBuilderX 导入插件」即可。

方式二：手动安装

将 voice-memo 目录复制到项目的 components/ 或 uni_modules/ 目录下：

components/
└── voice-memo/
    ├── voice-memo.uvue    # 主组件
    ├── audio-player.uvue  # 音频播放器子组件
    └── package.json       # 插件配置

基础用法

<template>
  <VoiceMemo
    uploadUrl="https://your-api.com/upload"
    :uploadHeaders="{ Authorization: 'Bearer ' + token }"
    @uploadSuccess="onUploadSuccess"
    @delete="onDelete"
  />
</template>

<script setup lang="uts">
import VoiceMemo from '@/components/voice-memo/voice-memo.uvue'

const token = 'your-auth-token'

const onUploadSuccess = (data: { fileUrl: string; duration: number }) => {
  console.log('上传成功:', data.fileUrl, '时长:', data.duration + '秒')
}

const onDelete = () => {
  console.log('用户删除了语音')
}
</script>

进阶用法

编辑回显

<template>
  <VoiceMemo
    :audioUrl="existingVoiceUrl"
    :audioDuration="existingDuration"
    uploadUrl="https://your-api.com/upload"
    @uploadSuccess="onUploadSuccess"
    @delete="onDelete"
  />
</template>

自定义上传逻辑

<template>
  <VoiceMemo
    :customUploader="handleCustomUpload"
    @uploadSuccess="onUploadSuccess"
  />
</template>

<script setup lang="uts">
import VoiceMemo from '@/components/voice-memo/voice-memo.uvue'

const handleCustomUpload = (filePath: string): Promise<string> => {
  return new Promise((resolve, reject) => {
    // 你的自定义上传逻辑
    uni.uploadFile({
      url: 'https://your-api.com/upload',
      filePath: filePath,
      name: 'file',
      success: (res) => {
        const data = JSON.parse(res.data) as UTSJSONObject
        resolve(data['url'] as string)
      },
      fail: (err) => {
        reject(err.errMsg)
      }
    })
  })
}

const onUploadSuccess = (data: { fileUrl: string; duration: number }) => {
  console.log('上传成功:', data.fileUrl)
}
</script>

通过 ref 主动控制

<template>
  <VoiceMemo ref="voiceMemoRef" uploadUrl="https://your-api.com/upload" />
  <button @click="startRecord">开始录音</button>
  <button @click="resetVoice">重置</button>
</template>

<script setup lang="uts">
import { ref } from 'vue'
import VoiceMemo from '@/components/voice-memo/voice-memo.uvue'

const voiceMemoRef = ref<InstanceType<typeof VoiceMemo> | null>(null)

const startRecord = () => {
  voiceMemoRef.value?.startRecord()
}

const resetVoice = () => {
  voiceMemoRef.value?.reset()
}
</script>

Props

Events

暴露方法（defineExpose）

通过 ref 可调用以下方法：

插槽

<VoiceMemo uploadUrl="https://your-api.com/upload">
  <template #record-icon>
    <image src="/static/custom-mic.png" style="width: 48rpx; height: 48rpx;" />
  </template>
</VoiceMemo>

注意事项

1. 平台限制：本组件仅支持 uni-app x App 端（Android / iOS），Web 和小程序不支持 uni.getRecorderManager()。
2. 权限申请：首次使用会自动检测并引导申请麦克风权限，请在 manifest.json 中配置录音权限。
3. 录音格式：默认使用 aac 格式，如需修改请确保服务器支持对应格式。
4. 上传配置：uploadUrl 和 customUploader 二选一，同时配置时优先使用 customUploader。
5. 互斥播放：组件内部通过 uni.$emit('audio-player-mutex') 实现列表中多音频互斥播放，如需自定义互斥逻辑可监听 play 事件。

目录结构

voice-memo/
├── voice-memo.uvue    # 主组件：录音管理 + 上传 + UI 交互
├── audio-player.uvue  # 子组件：音频播放 + 进度条 + 倍速控制
├── package.json       # 插件市场发布配置
└── readme.md          # 本文档

更新日志

v1.0.0

• 初始版本
• 支持录音、上传、播放、倍速、进度拖拽
• 零依赖，自包含设计

License

MIT