更新记录

2.0.2（2026-06-21） 下载此版本

v2.0.2 (2026-06-21)

2.0.1（2026-06-20） 下载此版本

v2.0.1 (2026-06-20)

2.0.0（2026-06-19） 下载此版本

v2.0.0 (2026-06-19)

平台兼容性

uni-app(4.65)

jz-h5RecorderManager H5 录音插件

版本：v2.0.1 日期：2026-06-20
适用平台：H5

插件简介

这是一个完全兼容 uni.getRecorderManager API 的 H5 专用录音插件。v2.0.0 版本全面重构，聚焦 H5 平台，提供两大录音方案：

v3.0.0 核心特性

特性

• ✅ 完全兼容 uni.getRecorderManager API
• ✅ 仅支持 H5 平台，专注 Web Audio API 能力
• ✅ 实时切片功能（onFrameRecorded，Int16 PCM）
• ✅ WebRTC 实时切片（onLiveFrameRecorded，Float32 PCM）
• ✅ MediaStream 流式采集，浏览器自动降噪回声消除
• ✅ WebRTC 推流/订阅（StreamPublisher / StreamSubscriber）
• ✅ 实时帧播放器（LiveFramePlayer，精确调度无间隙播放）
• ✅ 音量监听器（StreamVolumeMeter）
• ✅ 音频格式转换（PCM→MP3、ArrayBuffer↔Base64 等）
• ✅ 多种音频约束预设（默认/高质量/低延迟/会议）
• ✅ 支持录音暂停/继续功能
• ✅ 支持录音时长限制
• ✅ 完善的错误处理机制
• ✅ 自动权限检测和申请
• ✅ 类继承架构，易于扩展维护

安装使用

1. 引入插件

// 方式一：默认导入
import jzRecorder from '@/uni_modules/jz-h5RecorderManager/js/index.js'

// 方式二：按需导入
import { getRecorderManager } from '@/uni_modules/jz-h5RecorderManager/js/index.js'

// 方式三：导入 WebRTC 模块
import { StreamPublisher, StreamSubscriber } from '@/uni_modules/jz-h5RecorderManager/js/webrtc/'

2. PCM 切片方案 — 基本录音

const recorderManager = jzRecorder.getRecorderManager()

// 开始录音
recorderManager.start({
  duration: 60000,       // 最大录音时长 60秒
  sampleRate: 44100,     // 采样率
  numberOfChannels: 1,   // 单声道
  encodeBitRate: 192000, // 编码码率
  format: 'webm',        // 输出格式
  frameSize: 5           // 切片大小 5KB
})

// 监听录音停止
recorderManager.onStop((res) => {
  console.log('录音时长：', res.duration)
  console.log('MIME 类型：', res.mimeType)
  console.log('ArrayBuffer：', res.arrayBuffer)
  console.log('PCM 数据：', res.pcmArrayBuffer)
  console.log('PCM 采样率：', res.pcmSampleRate)
})

// 监听录音切片
recorderManager.onFrameRecorded((res) => {
  console.log('收到切片：', res.frameBuffer.byteLength, '字节')
  // 发送到 WebSocket 进行语音识别
})

3. PCM 切片方案 — WebRTC 实时切片

const recorderManager = jzRecorder.getRecorderManager()

// 启用实时切片
recorderManager.start({
  sampleRate: 44100,
  format: 'webm',
  enableLiveFrame: true,  // 启用 WebRTC 实时切片
  frameSize: 2            // 小切片，低延迟
})

// 监听实时切片并发送
recorderManager.onLiveFrameRecorded((res) => {
  // 实时发送到 WebSocket
  ws.send(res.liveFrameBuffer)
})

4. MediaStream 方案 — 音频流采集

const streamManager = jzRecorder.getStreamRecorderManager()

// 启动采集
const stream = await streamManager.start()

// 本地播放（浏览器自动降噪，无杂音）
audioElement.srcObject = stream

// 音量监听
streamManager.onVolumeChange((level) => {
  console.log('音量：', level)
})

// 静音控制
streamManager.toggleMute()

// 停止采集
streamManager.stop()

5. MediaStream 方案 — WebRTC 推流/订阅

import { StreamPublisher, StreamSubscriber } from '@/uni_modules/jz-h5RecorderManager/js/webrtc/'

// 推流：将本地音频流推送给远端
const publisher = new StreamPublisher({ peer })
publisher.setStream(localStream)
publisher.publishTo(remotePeerId)

// 订阅：接收远端音频流
const subscriber = new StreamSubscriber({
  peer,
  onStream: ({ peerId, stream }) => {
    audioElement.srcObject = stream
  }
})

6. 实时帧播放器

import { createLiveFramePlayer } from '@/uni_modules/jz-h5RecorderManager/js/index.js'

const player = createLiveFramePlayer({ latencyHint: 'interactive' })
await player.init()
player.start()

recorderManager.onLiveFrameRecorded((res) => {
  const samples = new Float32Array(res.liveFrameBuffer)
  const srcRate = recorderManager.getActualSampleRate()
  player.feed(samples, srcRate)
})

7. 音频格式转换

import { RecorderConvert } from '@/uni_modules/jz-h5RecorderManager/js/index.js'

// PCM 转 MP3
const mp3Result = await RecorderConvert.toMp3(pcmArrayBuffer, {
  sampleRate: 44100,
  channels: 1,
  bitRate: 128
})

// ArrayBuffer ↔ Base64
const base64 = await RecorderConvert.toBase64(arrayBuffer)
const ab = await RecorderConvert.toArrayBuffer(base64)

API 说明

PCM 切片方案

getRecorderManager()

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

RecorderManager 对象方法

start(options) 参数

事件监听方法

MediaStream 方案

getStreamRecorderManager()

获取 StreamRecorderManager 实例（单例）。

createStreamRecorderManager(options)

创建新的 StreamRecorderManager 实例（非单例）。

StreamRecorderManager 对象方法

StreamRecorderManager 事件

WebRTC 模块

StreamPublisher

将本地 MediaStream 推送给远端 Peer。

StreamSubscriber

接收远端 Peer 的音频流。

StreamVolumeMeter

音量监听器，支持同时监听多个流。

音频约束预设

import {
  DEFAULT_STREAM_AUDIO_CONSTRAINTS,  // 默认（语音通话）
  HIGH_QUALITY_CONSTRAINTS,           // 高质量（音乐）
  LOW_LATENCY_CONSTRAINTS,            // 低延迟（通信）
  MEETING_CONSTRAINTS,                // 会议
  mergeConstraints,                   // 合并约束
  getConstraintsByScenario            // 按场景选择
} from '@/uni_modules/jz-h5RecorderManager/js/index.js'

LiveFramePlayer

实时 Float32 PCM 帧播放器，使用 AudioBufferSourceNode 精确调度。

import { createLiveFramePlayer } from '@/uni_modules/jz-h5RecorderManager/js/index.js'

const player = createLiveFramePlayer({
  latencyHint: 'interactive',  // AudioContext 延迟提示
  preDelay: 0.1,               // 预延迟（秒）
  maxBufferDelay: 0.5          // 最大缓冲延迟（秒）
})

RecorderConvert

音频格式转换工具。

目录结构

js/
├── index.js                          # 插件入口
├── core/
│   ├── RecorderManagerBase.js        # 录音管理器基类
│   ├── H5RecorderManager.js          # H5 录音实现
│   ├── RecorderManagerFacade.js      # PCM 方案 Facade（单例）
│   ├── StreamRecorderManager.js      # MediaStream 录音管理器
│   └── StreamRecorderManagerFacade.js # Stream 方案 Facade
├── common/
│   ├── EventEmitter.js               # 事件发射器
│   ├── EventBus.js                   # 事件总线
│   ├── PlatformDetector.js           # 平台检测
│   ├── AudioUtils.js                 # 音频工具函数
│   ├── LiveFramePlayer.js            # 实时帧播放器
│   ├── LameMp3Encoder.js             # MP3 编码器
│   ├── RecorderConvert.js            # 音频格式转换
│   ├── RecorderDataSource.js         # 数据源工具
│   └── StreamAudioConstraints.js     # 音频约束配置
└── webrtc/
    ├── index.js                      # WebRTC 模块入口
    ├── StreamPublisher.js            # 音频推流
    ├── StreamSubscriber.js           # 音频订阅
    └── common/
        └── StreamVolumeMeter.js      # 音量监听器

注意事项

1. HTTPS 要求：H5 环境需要 HTTPS 协议才能使用麦克风（localhost 除外）
2. 仅支持 H5：本插件仅支持 H5 平台，不支持 App 和小程序
3. 浏览器兼容性：需要浏览器支持 MediaRecorder API 和 Web Audio API
4. 临时文件：H5 环境生成的是 Blob URL，需及时处理
5. 建议佩戴耳机：实时通话场景建议佩戴耳机以避免声音回环

技术支持

如有问题请通过插件市场评论区反馈