更新记录

1.0.3（2025-06-18） 下载此版本

1.0.2（2025-06-18） 下载此版本

更新文档

1.0.1（2025-06-18） 下载此版本

• ✨ 完整实现H5录音管理器，完全兼容 uni.getRecorderManager API
• ✨ 支持录音开始、暂停、继续、停止等基础功能
• ✨ 支持多种音频格式：mp3、wav、aac、PCM
• ✨ 支持录音参数配置：采样率、码率、时长、声道数等
• ✨ 支持帧录制回调功能
• ✨ 完整的事件监听系统：onStart、onPause、、onStop、onError等
• ✨ 智能平台适配：H5使用自定义实现，其他平台使用原生API
• ✨ 完善的错误处理和用户提示
• ✨ 自动权限检测和申请
• ✨ 支持临时文件URL生成和管理

平台兼容性

uni-app

其他

jz-h5-getRecorderManager 录音插件

插件简介

这是一个完全兼容 uni.getRecorderManager API 的H5录音插件。当在App和小程序平台使用时，会直接调用原生的 uni.getRecorderManager；当在H5平台使用时，会使用基于 Web Audio API 的自定义实现，确保录音功能在所有平台上都能正常工作。

特性

• ✅ 完全兼容 uni.getRecorderManager API
• ✅ 支持H5、App、小程序等全平台
• ✅ 支持多种音频格式：mp3、wav、aac、PCM
• ✅ 支持录音暂停/继续功能
• ✅ 支持帧录制回调
• ✅ 支持录音时长限制
• ✅ 完善的错误处理机制
• ✅ 自动权限检测和申请

安装使用

1. 引入插件

// 引入插件
import jzRecorder from '@/uni_modules/jz-h5-getRecorderManager/js/index.js'

// 获取录音管理器
const recorderManager = jzRecorder.getRecorderManager()

2. 基本用法

<template>
  <view>
    <button @tap="startRecord">开始录音</button>
    <button @tap="pauseRecord">暂停录音</button>
    <button @tap="resumeRecord">继续录音</button>
    <button @tap="stopRecord">停止录音</button>
    <button @tap="playRecord">播放录音</button>
  </view>
</template>

<script>
import jzRecorder from '@/uni_modules/jz-h5-getRecorderManager/js/index.js'

export default {
  data() {
    return {
      recorderManager: null,
      audioContext: null,
      recordFile: null
    }
  },

  onLoad() {
    // 获取录音管理器
    this.recorderManager = jzRecorder.getRecorderManager()

    // 获取音频播放器
    this.audioContext = uni.createInnerAudioContext()
    this.audioContext.autoplay = true

    // 监听录音事件
    this.initRecorderEvents()
  },

  methods: {
    // 初始化录音事件监听
    initRecorderEvents() {
      // 录音开始
      this.recorderManager.onStart(() => {
        console.log('录音开始')
        uni.showToast({ title: '录音开始', icon: 'none' })
      })

      // 录音暂停
      this.recorderManager.onPause(() => {
        console.log('录音暂停')
        uni.showToast({ title: '录音暂停', icon: 'none' })
      })

      // 录音继续
      this.recorderManager.onResume(() => {
        console.log('录音继续')
        uni.showToast({ title: '录音继续', icon: 'none' })
      })

      // 录音停止
      this.recorderManager.onStop((res) => {
        console.log('录音停止', res)
        this.recordFile = res.tempFilePath
        uni.showToast({ 
          title: `录音完成，时长：${res.duration}秒`, 
          icon: 'none' 
        })
      })

      // 录音错误
      this.recorderManager.onError((err) => {
        console.error('录音错误', err)
        uni.showToast({ title: err.errMsg, icon: 'none' })
      })
    },

    // 开始录音
    startRecord() {
      this.recorderManager.start({
        duration: 60000, // 录音时长60秒
        sampleRate: 44100, // 采样率
        numberOfChannels: 1, // 声道数
        encodeBitRate: 192000, // 编码码率
        format: 'mp3' // 录音格式
      })
    },

    // 暂停录音
    pauseRecord() {
      this.recorderManager.pause()
    },

    // 继续录音
    resumeRecord() {
      this.recorderManager.resume()
    },

    // 停止录音
    stopRecord() {
      this.recorderManager.stop()
    },

    // 播放录音
    playRecord() {
      if (this.recordFile) {
        this.audioContext.src = this.recordFile
        this.audioContext.play()
      } else {
        uni.showToast({ title: '请先录音', icon: 'none' })
      }
    }
  },

  onUnload() {
    // 清理资源
    if (this.audioContext) {
      this.audioContext.destroy()
    }
  }
}
</script>

API 说明

getRecorderManager()

获取全局唯一的录音管理器实例。

返回值：

• RecorderManager：录音管理器对象

RecorderManager 对象方法

start(options)

开始录音。

参数：

pause()

暂停录音。

resume()

继续录音。

stop()

停止录音。

事件监听方法

onStart(callback)

监听录音开始事件。

onPause(callback)

监听录音暂停事件。

onResume(callback)

监听录音继续事件。

onStop(callback)

监听录音停止事件。

回调参数：

onError(callback)

监听录音错误事件。

回调参数：

onFrameRecorded(callback)

监听已录制完指定帧大小的文件事件。

回调参数：

平台差异说明

注意事项

1. 权限问题：H5环境下首次使用需要用户授权麦克风权限
2. HTTPS要求：H5环境下需要在HTTPS协议下才能正常使用录音功能
3. 浏览器兼容性：需要浏览器支持 MediaRecorder API
4. 文件格式：H5环境下实际保存的文件格式可能与设置的格式不同，取决于浏览器支持情况
5. 临时文件：H5环境下生成的是Blob URL，需要及时处理或下载

更新日志

v1.0.0

• 初始版本发布
• 完全兼容 uni.getRecorderManager API
• 支持H5环境下的录音功能
• 支持多种音频格式和参数配置

技术支持

如有问题请联系：

• QQ：578031621
• 仓库地址：https://gitcode.com/weixin_47770976/jz-h5-getRecorderManager