本文将通过一个实际的 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
来模拟“上滑取消”操作,直接关闭并丢弃录音。
{{ audioTime }}
松开发送,上滑取消
注意如果内嵌到微信小程序中开发环境 会直接拒绝权限
必须部署到http环境才可以