讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app如何实现类似微信的语音聊天录音

夜涛同学_9059

夜涛同学_9059

发布时间:2026-09-30 09:08:07

|

974人浏览过

|

来源于php中文网

原创

必须用 uni.getRecorderManager 配合 touchstart/touchend/touchcancel 三事件严格对齐控制录音,防误触、防状态丢失、防 iOS 播放失败,并手动定时控时长、优化音频参数。

uni-app如何实现类似微信的语音聊天录音

直接用 uni.startRecord 实现不了微信式的按住说话——它已废弃,且不支持手势耦合控制;必须用 uni.getRecorderManager 手动接管录音生命周期,并与 touchstart/touchend/touchcancel 事件严格对齐。

为什么 touchstart + touchend 绑定会失效

真机上松手瞬间常收不到 touchend:手指滑出按钮区域、弹窗遮挡、微信基础库拦截滚动容器内的事件,都会导致它丢失。更危险的是 touchcancel——切后台、收键盘、弹系统提示时触发,但多数人根本没监听它,结果录音进程卡在后台,recorder.stop() 永远不执行。

  • 必须三事件全监听:touchstart 启动录音,touchend 和 touchcancel 都调 recorder.stop()
  • 加一个 100ms 延迟校验:touchstart 后立即 setTimeout(() => { if (isPressed) start() }, 100),避免误触启动
  • 在 touchmove 中判断位移是否超出按钮范围,超了就提前 stop()

recorder.start() 报 “fail recorder is running” 怎么办

这是状态没保护住的典型表现。iOS 尤其敏感:recorder.start() 调用前若上一次录音还没真正结束(比如 onStop 还没触发),就会报这个错。

微信公众号自动发布增强版
微信公众号自动发布增强版

一键发布 Markdown/HTML 文章至微信公众号草稿箱,支持自动配图、排版美化、UTF‑8编码

下载
  • 定义 isRecording 布尔变量,只在 recorder.start() **调用成功后**设为 true,别在 onStart 里设——它不一定触发
  • recorder.onStop 和 recorder.onError 回调里都必须重置 isRecording = false
  • 每次 start() 前先判断:if (isRecording) return
  • 别复用同一个 recorder 实例做多次录音——虽然可以,但状态容易串,建议每次新建或显式 stop() 后再 start()

iOS 微信里录音文件播不了的根源

拿到的 tempFilePath 是 file:// 或 wxfile:// 协议路径,iOS 微信 WebView 禁止直接加载本地文件,uni.createInnerAudioContext().src 赋值后调 play() 会静默失败,控制台也不报错。

  • 必须上传到服务端,拿到 HTTP 地址后再播放:uni.uploadFile({ url: 'https://your-api.com/upload', filePath: tempFilePath, ... })
  • 别尝试用 uni.getFileSystemManager().readFile 读取 PCM 数据——iOS 权限拒绝,且读出来也没法直接喂给 InnerAudioContext
  • H5 环境完全不支持 tempFilePath,连上传都不行,得走 WebRTC + MediaRecorder 另起一套
  • Android 和小程序真机多数 OK,但也要检查文件大小,避免用户录了 3 分钟才发现超限

如何控时长又不让 Android 机型失效

recorder.start({ duration: 60000 }) 的 duration 是软限制,部分 Android 厂商(如华为 EMUI)根本不认,录音能跑过 60 秒。

  • 自己起定时器:this.timer = setTimeout(() => recorder.stop(), 60000)
  • recorder.onStop 回调里立刻 clearTimeout(this.timer)
  • 采样率设 16000、声道数 1,体积减半,语音识别够用
  • 格式优先选 mp3,比默认 wav 小得多;encodeBitRate 控在 96000~128000 之间,再低会影响识别准确率

最易被忽略的点是:手势事件和录音状态的“时间对齐”。按下去那一刻就要完成权限检查、recorder 初始化、防抖计时、UI 变色;松手那一帧就要确保 stop 被执行、临时路径拿到、上传开始、UI 复位。中间任何一环延迟或丢失,用户感知就是“点了没反应”或“松手还在录”。

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2183

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

4683

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5830

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5258

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

743

2024.05.22

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

3651

2023.10.23

canva可画使用技巧汇总
canva可画使用技巧汇总

本专题汇集了PHP中文网精心整理的Canva可画新手使用技巧大全,专为零基础用户打造。无论你是想制作精美海报、PPT还是社交媒体配图,这里都有从注册登录、模板搜索到AI辅助设计、导出分享的全流程保姆级教程。通过深入浅出的图文指南,帮助你快速跨越设计门槛,轻松掌握Canva可画的实用操作,让每个人都能成为设计达人!

224

2026.05.19

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

5290

2024.08.16

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn