更新记录

1.0.1（2026-09-30） 下载此版本

初始第一版本更新

平台兼容性

uni-app(5.24)

一、快速上手

<template>
  <CustomRecording
    TRIGGER_TYPE="click"
    TITLE="录音"
    :MAX_DURATION="60"
    :ENABLE_PLAYBACK="true"
    @record-stop="onRecordStop"
    @record-error="onRecordError"
  />
</template>

<script>
import CustomRecording from '@/components/CustomRecording/index.vue'

export default {
  components: { CustomRecording },
  methods: {
    onRecordStop(info) {
      // 小程序：info.tempFilePath 可直接上传
      // H5：info.blob 可直接作为 uni.uploadFile 的 filePath
      console.log(info.duration, info.filename, info.type, info.fileSize)
    },
    onRecordError(error) {
      console.log(error.code, error.message)
    }
  }
}
</script>

二、Props

命名规范：组件内所有 props 统一使用「大写 + 下划线」。

三、Events

record-stop 文件信息（停止后可直接用于上传）

关于 FORMAT 的跨端说明

• 微信 / 支付宝小程序：format 会原样传给 RecorderManager.start，非法值会导致录音直接启动失败，因此组件底层会先归一化：pcm / PCM → PCM，其余非法值 → mp3。frameSize 仅在 mp3 / PCM 下有效，其他格式会被自动移除。
• H5：MediaRecorder 只能产出内核支持的封装格式（Chrome/安卓多为 webm，iOS Safari 为 mp4），无法真正指定任意格式。组件会把 FORMAT 作为 MIME 挑选偏好（如 mp3 → audio/mpeg、wav → audio/wav），若内核不支持则回退通用候选，保证一定能录到音。此时产物对外的 type / mimeType / extension / format 仍按 FORMAT 声明（上传链路按此校验），内核真实编码仅记录在内部 _h5MimeType，不再对外暴露。
• 原始 PCM 为裸流，H5 端无法通过 MediaRecorder 直接录制，会回退通用候选。

四、组件方法（通过 ref 调用）

<CustomRecording ref="recorder" TRIGGER_TYPE="click" />
<!-- this.$refs.recorder.start() -->

五、两种触发模式

click（点击模式）

点击开始录音，浮层提供「暂停 / 继续 / 停止 / 取消」四个操作，适合录制较长语音。

hold（长按模式）

按下超过 200ms 开始录音，松手结束，上滑超过 60px 取消，不提供暂停（符合微信语音的交互习惯）。

<CustomRecording TRIGGER_TYPE="hold" TITLE="按住说话" @record-stop="onRecordStop" />

六、内置交互与异常处理

七、动画效果

录音浮层包含麦克风扩散音圈 + 12 根波形柱动画；暂停时通过 animation-play-state: paused 冻结动画并压低波形，可直观区分「录音中」与「已暂停」。时长下方提供按 MAX_DURATION 推进的进度条；长按模式上滑进入取消区时，浮层整体转为危险色并停止扩散动画。

八、常见问题

Q：为什么 H5 端暂停无效？ 部分浏览器（如 iOS Safari）的 MediaRecorder 不支持 pause()，组件会提示「当前环境不支持暂停录音」，此时只能停止。

Q：H5 回放的 blob 地址需要手动释放吗？ 不需要。组件在重新录音或 reset() 时会自动调用 revokeLastBlobUrl() 回收。上传完成后建议及时调用 reset()。

Q：小程序端如何上传录音？

onRecordStop(info) {
  uni.uploadFile({
    url: '你的上传接口',
    filePath: info.tempFilePath,  // H5 端传 info.tempFilePath 或 info.blob
    name: 'file',
    formData: { duration: info.duration }
  })
}

Q：同一页面能放多个录音组件吗？ 不建议。微信小程序的 RecorderManager 是全局单例，多个组件同时录音会导致回调错乱。