Skip to content

recordInH5

H5 端录音与播放适配器,showRecord 内部调用

基于 MediaRecorder + getUserMedia,需浏览器支持且用户授权麦克风。

前置依赖

typescript
interface RecordInH5Deps {
  checkMediaDevices: () => boolean
  getUserMedia: (constraints: { audio: boolean }) => Promise<MediaStream>
  createMediaRecorder: (stream: MediaStream) => MediaRecorder
  createObjectURL: (blob: Blob) => string
  Blob: BlobConstructor
  Audio: AudioConstructor
  setTimeout: typeof setTimeout
  warn: Console['warn']
  error: Console['error']
}
依赖说明
checkMediaDevices检测 navigator.mediaDevices 是否可用
getUserMedia获取麦克风流
createMediaRecorder创建录制器
createObjectURL / Blob生成可播放的 blob URL
Audio播放录音
setTimeoutduration 自动停止
warn / error日志

recordInH5

函数签名

typescript
function recordInH5(options?: RecordOptions, deps: RecordInH5Deps): Promise<RecordResult>

参数

参数名类型必填说明
options.durationnumber自动停止时长(ms)
depsRecordInH5Deps环境依赖

返回值

类型说明
Promise<RecordResult>onstop 时 resolve;tempFilePath 为 blob object URL

stopRecordInH5

函数签名

typescript
function stopRecordInH5(deps: RecordInH5Deps): void

返回值

类型说明
void若当前 MediaRecorder 处于 recordingstop()

playRecordInH5

函数签名

typescript
function playRecordInH5(filePath: string, deps: RecordInH5Deps): Promise<void>

参数

参数名类型必填说明
filePathstring音频 URL(通常为 blob URL)

返回值

类型说明
Promise<void>Audio.onended resolve;错误 reject

工作原理

  1. 不支持 mediaDevices 时直接 reject。
  2. 获取音频流 → 创建 MediaRecorder → 在 ondataavailable 收集 chunk → onstop 合并为 audio/webm Blob 并 createObjectURL
  3. 若指定 duration,定时自动 stop()
  4. stopRecordInH5 依赖模块级 currentMediaRecorder;未先 recordInH5 时可能无效并 warn
  5. 播放使用原生 Audio API,非 UniApp 音频上下文。