uni-app 中需用 uni.getrecordermanager 配合 touchstart/touchend/touchcancel 事件实现按住录音,授权后设采样率16000、单声道,定时器控时60秒,ios须上传临时文件后用http地址播放,h5不支持。

uni-app 里怎么调用录音 API 实现按住说话
uni-app 本身不提供原生级的长按录音 UI,但能通过 uni.startRecord(已废弃)和更可靠的 uni.getRecorderManager 配合手势事件实现。关键不是“有没有封装好的组件”,而是如何把录音生命周期和 touch 事件对齐。
常见错误是直接在 touchstart 里调 start(),touchend 调 stop(),结果 iOS 上经常触发失败或静音——因为用户手指一抖就触发了 touchcancel,而你没监听它。
- 必须同时监听
touchstart、touchend和touchcancel,三者都得调recorder.stop()或做清理 - 录音前先调
uni.authorize({scope: 'scope.record'}),iOS 微信环境不弹授权框就直接失败,且不会报错 - Android 真机上,部分厂商(如华为 EMUI)会因省电策略杀后台录音进程,建议录音时加个
uni.showLoading防止用户松手过早
录音文件太大?怎么限制时长和压缩质量
默认录制是 PCM 格式(无压缩),1 秒 ≈ 16KB,录 60 秒就是 1MB+,微信语音通常用 AMR 或 speex,uni-app 不支持直接输出这些格式,只能靠后端转码或前端裁剪 + 降采样。
实际中更可行的是「前端控时 + 后端转」:用 setTimeout 主动中断,比等系统超时更可控;再传到服务端用 FFmpeg 转成 amr 或 mp3。
-
recorder.start()的options参数里,duration是最大毫秒数(如 60000),但它是软限制,某些 Android 机型不生效 - 推荐自己起定时器:
this.timer = setTimeout(() => recorder.stop(), 60000),并在stop回调里clearTimeout(this.timer) - 采样率别设太高:
sampleRate: 16000足够语音识别,numberOfChannels: 1(单声道)可减半体积
录音结束后怎么播不了?路径和格式兼容性问题
拿到的 tempFilePath 是临时路径,iOS 微信里不能直接传给 uni.createInnerAudioContext 播放,会报 invalid file path;Android 多数 OK,但 H5 环境完全不支持。
公众号运营:文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时,使用本技能。
根本原因是:微信 WebView 对本地 file 协议限制严格,而 uni-app 的临时路径在 iOS 上本质是 file://,必须走 uni.uploadFile 上传后再用服务端返回的 HTTP 地址播放。
- 不要尝试用
uni.getFileSystemManager().readFile读取 tempFilePath —— iOS 下权限拒绝,且无意义(PCM 数据不能直播) - 播放前务必检查
tempFilePath是否以http或https开头;如果不是,说明还没上传,别急着创建 audio 上下文 - H5 端录音不可用,
uni.getRecorderManager在 H5 返回空对象,需提前用uni.getSystemInfoSync().platform !== 'h5'守卫
UI 长按反馈怎么做才像微信:波形 + 提示文字 + 松手取消逻辑
微信语音按钮的核心交互不是“按住→录音”,而是“按住→进入录音态→松手发送 / 滑动取消”。UI 反馈要分三层:视觉(按钮变色/波形)、文案(“松开发送”“上滑取消”)、行为(滑出区域自动取消)。
难点不在画波形,而在准确判断手指是否“滑出按钮区域”。别用 touchmove 的绝对坐标比对,要用 target 和 currentTarget 判断事件是否还落在按钮 DOM 内。
- 给按钮加
id="record-btn",touchmove中用e.target.id === 'record-btn'判断是否还在范围内 - 波形可用
canvas+analyserNode(仅 App 端支持),但真机性能差;更稳的做法是用 CSS 动画模拟:3 段高度随机变化的 bar,配合transition - “上滑取消”的提示文案要在
touchmove中动态切换,且需防抖(避免频繁重绘),用requestAnimationFrame更新更顺
最易被忽略的是:iOS 微信里 touchmove 默认不触发,得给按钮加 style="touch-action: manipulation;" 才能正常捕获滑动事件。










