这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件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;
})
}, 网友回复
deepseek v4与glm5.1 kim2.6 qwen3.6哪个ai模型更强更好用?
gpt-image2能直接将图片转成分层透明的psd设计文件?
claude code、codex、gemini cli如何切换国内大模型使用?
蒸馏最强ai大模型是中小ai模型低成本升级的最好通道?
arena.ai上为啥没有最新的claude4.7及gpt5.5呢?
ai大模型公司为啥开始大量招聘文科生了?
cloudflared如何在低版本centos6或7上安装?
bfwsoa框架如何开启异步缓存与异步任务模式?
selenium如何获取网页js加载渲染后的真实dom结构?
go编写的Eino与python编写的langchain如何选择?


