这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件1.touchstart事件会在触摸按钮时触发,可以获取手指的初始坐标;2.touchmove事件在触摸后移动手指时触发,可以用来计算手手指的滑动距离;3.touchend事件在松开手指时候触发。
<button type="default" v-show="mode === 'voice'" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" >按住 说话</button>三个
const recorderManager = uni.getRecorderManager(); // 开始录制语音 handleTouchStart(e){ this.mask = true; recorderManager.start(); this.length = 1; this.startX = e.touches[0].pageX; this.startY = e.touches[0].pageY; this.timer = setInterval(() => { this.length += 1; if(this.length >= 60) { clearInterval(this.timer); this.handleTouchEnd() } },1000); }, // 语音录制时滑动事件 handleTouchMove(e){ if(this.startX - e.touches[0].pageX > 14 && this.startY - e.touches[0].pageY > 50){ this.needCancel = true; } else { this.needCancel = false; } }, // 语音录制结束 handleTouchEnd(){ this.mask = false; clearInterval(this.timer); recorderManager.stop(); recorderManager.onStop((res) => { const message = { voice:res.tempFilePath, length:this.length }; if(!this.needCancel){ 发送给对方,上传服务器 } this.needCancel = false }); }1最后就是播放音频
const innerAudioContext = uni.createInnerAudioContext(); // 播放语音 handleVoicePlay(item){ item.isFirstPlay = false; innerAudioContext.src = item.message.voice; this.isPlay = !this.isPlay; this.isPlay ? innerAudioContext.play() : innerAudioContext.stop(); innerAudioContext.onEnded(() => { this.isPlay = false; }) innerAudioContext.onStop(() => { this.isPlay = false; }) },
网友回复
ace.js如何获取选择文本的开始和结束行数?
如何把qwen code cli或gemini cli的免费调用额度换成http api对外开放接口?
如何限制windows10电脑只能打开指定的程序?
python如何调用ai大模型实现web网页系统的功能测试并生成测试报告?
有没有免费进行web网站ai仿真人测试生成测试报告的mcp服务或api?
Context Engineering到底是啥,有什么用?
如何使用Google veo 3+高斯溅射(Gaussian Splatting)技术生成4d视频?
浏览器中如何实时调用摄像头扫描二维码?
grok4、gemini2.5pro、gpt5、claude4.1到底谁的编程能力更强一些?
python能将2d平面户型图转换成3d三维户型效果图吗?