这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件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; }) },
网友回复
有没有哪个ai人工智能动态生成鲜活带表情肢体动作逼真数字人与人类交流视频聊天?
threejs如何将iframe与video作为立方体模型一面的材质可点击交互?
UEFI与Legacy启动有啥不同?
可在u盘启动的开源匿名操作系统有哪些?
Pyloid与Pywebview打包生成桌面应用区别?
win10的iso镜像如何通过u盘来安装?
如何解决输入sora2邀请码报错:Sora is not available in The Netherlands yet
在哪可免费白嫖使用sora2生成视频?
php如何结合openai兼容的embedding向量化api实现语义化模糊关键词搜索匹配?
python如何结合qwen embedding向量化api实现语义化模糊关键词搜索匹配?