在h5端实现录音发送功能(兼容内嵌微信小程序) recorder-core

本文将通过一个实际的 Vue3 组件示例,带你一步步实现“按住录音,松开发送,上滑取消”的语音录制功能。

我们将使用强大且小巧的开源库 recorder-core,支持 MP3、WAV、AAC 等编码格式,兼容性较好。

项目依赖

pnpm add recorder-core dayjs
# 或
npm install recorder-core dayjs

我们实现的组件是一个 input 输入框,按下开始录音,松开结束录音,上滑取消录音。核心逻辑全部由 recorder-core 管理。

✅ 权限处理机制

第一次调用 rec.open() 时会触发麦克风授权窗口,用户点击「允许」后才能真正录音。所以我们用 isAuthorized 标记避免重复弹窗。


✅ 录音时间和状态展示

我们通过 onProcess() 回调实时拿到录音时间和音量等级,再结合 dayjs 把时间格式化展示在 UI 上(audioLoading.vue 可以自定义成动画弹窗或语音时长条等)。


✅ 录音取消(上滑手势)

录音时用户可能不想发送,我们监听 @touchmove 来模拟“上滑取消”操作,直接关闭并丢弃录音。

完整代码如下






AudioLoading加载组件






注意如果内嵌到微信小程序中开发环境 会直接拒绝权限

必须部署到http环境才可以

你可能感兴趣的:(移动端h5,微信小程序,小程序)