这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件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;
})
}, 网友回复
如何破解绕开seedance2.0真人照片生成视频 限制?
python有哪些算法可以将视频中的每个帧图片去除指定区域水印合成新的视频?
iphone的激光雷达数据能否实时传输到three三维空间中?
豆包sora等ai视频生成大模型生成的视频水印如何去除?
python如何实现在电脑上拨号打电话给手机?
具身机器人与人形机器人区别?
nodejs如何将一个完整的js代码文件切割成不同的部分混淆后动态加载进入html运行?
为啥windows.onerror捕获js错误是这样的{"message":"Script error.","source":"","lineno":0,"colno":0,"stack":null,
2026年ai将全面接管编程?
WebMCP是干啥的?


