uniapp在app上如何实现类似微信按住不放发送语音的功能?
网友回复
这个需要用到三个事件
首先给按钮是绑定事件,需要给按钮绑定三个事件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; }) },
还有一个页面遮罩层
<!-- 语音遮罩层 --> <view class="voice-mask" v-show="mask"> <!--语音条 --> <view class="voice-bar voice-del" :class="{voiceDel:needCancel}" :style={width:getVoiceBarWidth}> <image src="../static/icon/wave.png" class="voice-volume" :class="{volumeDel:needCancel}"></image> <view class="trangle-bottom" :class="{trangleDel:needCancel}"></view> </view> <!-- 底部区域 --> <view class="voice-send"> <!-- 取消和转文字图标 --> <view class="voice-middle-wrapper"> <!-- 取消 --> <view class="voice-left-wrapper"> <view class="cancel-del" :class="{delTip:needCancel}">松开 取消</view> <view class="voice-middle-inner close" :class="{bigger:needCancel}"> <image src="../static/icon/close-grey.png" class="close-icon"></image> </view> </view> <!-- 转文字 --> <view class="voice-middle-inner to-text"> <text class="wen">文</text> <!-- <image src="" class="wen"></image> --> </view> <view class="send-tip" :class="{sendTipNone:needCancel}">松开 发送</view> </view> <!-- 底部语音按钮 --> <view class="mask-bottom"> <image src="../static/icon/voice-left.png"></image> </view> </view> </view> ...... <style> .voice-mask{ position:fixed; top:0; right:0; bottom:0; left:0; /* display: flex; flex-direction: column; justify-content: flex-end; align-items: center; */ background-color: rgba(0,0,0,0.8); } .voice-bar{ position: absolute; left:50%; top: 50%; transform: translate(-50%,-30%); /* width: 230rpx; */ height:150rpx; background-color:#51ff50; border-radius: 26rpx; margin-bottom: 220rpx; } .voiceDel{ left:80rpx; top: 50%; width: 170rpx !important; transform: translateX(0%); transform: translateY(-30%); background-color: red; } .voice-volume{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 160rpx; height: 36rpx; } .volumeDel{ width: 80rpx; } .trangle-bottom{ position: absolute; bottom: -38rpx; left:50%; transform: translateX(-50%); border-width: 20rpx; border-style: solid; border-color: #51FF50 transparent transparent transparent; } .trangleDel{ border-color: red transparent transparent transparent; } .voice-send{ position: absolute; bottom: 0; width: 100%; } .voice-middle-wrapper{ width: 100%; display: flex; position:relative; justify-content: space-between; align-items: flex-end; margin-bottom: 40rpx; } .voice-left-wrapper{ display: flex; flex-direction: column; justify-content: center; align-items: flex-end; } .cancel-del{ display:none; } .delTip{ display:block; color:#bfbfbf; margin: 0 22rpx 18rpx 0; } .voice-middle-inner{ display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.2); width: 140rpx; height: 140rpx; border-radius: 50%; } .close{ transform: rotate(350deg); margin-left: 80rpx; } .bigger{ width: 170rpx; height: 170rpx; } .to-text{ transform: rotate(10deg); margin-right: 80rpx; } .close-icon{ width: 80rpx; height: 80rpx; } .wen{ font-size: 40rpx; color:#bfbfbf; } .send-tip{ position: absolute; left: 50%; bottom:0rpx; transform: translate(-50%,36%); color:#bfbfbf; } .sendTipNone{ display: none; } .mask-bottom{ position: relative; width: 100%; height:190rpx; border-top: #BABABB 8rpx solid; border-radius: 300rpx 300rpx 0 0; background-image: linear-gradient(#949794,#e1e3e1); } .mask-bottom image{ position: absolute; width: 60rpx; height: 60rpx; top: 0; right:0; bottom: 0; left: 0; margin: auto; } </style>