功能:
按住录音,移开取消,调用的微信录音api,因手机端H5长按图片文字会放大或者选中,得禁止
效果图:
html
<van-popup
v-model="vanPopupShow"
round
position="bottom"
:style="{ height: '40%' }"
>
<div class="bottom_popup">
<div
v-if="isTitle"
class="no-select bottom_popup_p"
:class="newTitle == '松手取消发送' ? 'isRed' : ''"
style="height: 20%; width: 100%"
>
{{ newTitle }}
</div>
<div
v-else
class="no-select bottom_popup_p"
style="height: 20%; width: 100%"
>
{{ recordingTime }}s
</div>
<!-- <div class="bottom_popup_img">
<img @touchstart.prevent="startRecording" class="no-select" style="width:50px" src="../../../assets/img/叉.png" alt="">
</div> -->
<div
ref="touchElement"
:class="{ pressed: isPressed }"
class="img-select"
@touchstart.prevent="startRecording"
@touchend="stopRecording"
@touchmove="cancelRecording"
>
<div v-if="!isTitle" class="siri-like-wave"></div>
</div>
</div>
</van-popup>
js
startRecording(event) {
this.isTitle = false;
this.isPressed = true;
// 阻止默认的触摸开始事件
event.preventDefault();
this.recording = true;
this.startTime = Date.now();
this.updateRecordingTime();
// 获取触摸元素的位置信息
const rect = this.$refs.touchElement.getBoundingClientRect();
this.elementBounds = {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
};
// 判断初始触摸位置是否在元素内部
this.isInside = this.isInsideElement(event.touches[0]);
const _this = this;
wx.ready(function () {
wx.startRecord({
success: () => {
_this.isrecreding = true;
if (_this.timer) {
clearInterval(_this.timer);
_this.timer = null;
}
// 开始录音时启动计时器
_this.timer = setInterval(() => {
_this.time++;
}, 1000);
},
fail: (res) => {
_this.$toast(res);
console.error(res);
},
});
});
},
stopRecording() {
if (this.newTitle == "松手取消发送") {
this.recording = false;
this.isPressed = false;
// 处理录音结束逻辑
this.recordingTime = 0;
this.isTitle = true;
this.newTitle = "长按开始录音";
return;
}
if (this.recordingTime < 5) {
this.newTitle = "录音时间太短";
this.recording = false;
this.isPressed = false;
// 处理录音结束逻辑
this.recordingTime = 0;
this.isTitle = true;
return;
}
this.recording = false;
this.isPressed = false;
// 处理录音结束逻辑
this.recordingTime = 0;
this.isTitle = true;
this.newTitle = "长按开始录音";
this.vanPopupShow = false;
wx.stopRecord({
success: (res) => {
// this.$toast(res.localId);
this.localId = res.localId;
this.uploadRecording();
},
fail: (res) => {
console.error(res);
},
});
},
uploadRecording() {
wx.uploadVoice({
localId: this.localId,
success: (res) => {
// this.$toast(res.serverId);
this.serverId = res.serverId;
getDownloadVoice({
mediaId: this.serverId,
}).then((res) => {
this.$store.commit("setAudioConfig", {
fileUrl: res.data,
isWXAudio: true,
localId: this.localId,
// dataBase64Url: 'https://buudoo-tts-demo.oss-cn-beijing.aliyuncs.com/f2b07711-1dcb-4c6e-a94f-0c03d8101674_tongsheng.wav',
});
// 停止录音时清除计时器
clearInterval(this.timer);
this.timer = null;
this.time = 0;
this.$router.push({
path: "/video/list",
query: {
outerTab: 1,
puuid: this.$route.query.puuid,
},
});
});
},
fail: (res) => {
console.error(res);
},
});
},
cancelRecording(event) {
// 判断移动位置是否在元素外部
// const isOutside = !this.isInsideElement(event.touches[0]);
// if (this.isInside && isOutside) {
// // 在元素内部开始移动,后来移动到外部
// // 执行相应的操作
// this.isTitle = true;
// this.newTitle = "松手取消发送";
// // 可以在这里执行你想要的操作
// } else {
// this.isTitle = false;
// this.newTitle = "长按开始录音";
// }
// const touch = event.touches[0];
// const deltaY = touch.pageY - touch.clientY;
// if (deltaY < -this.cancelRecordingThreshold) {
// // 取消录音
// this.recording = false;
// this.recordingTime = 0;
// // 处理取消录音逻辑
// }
},
isInsideElement(touch) {
// 判断触摸点是否在元素内部
return (
touch.clientX >= this.elementBounds.left &&
touch.clientX <= this.elementBounds.right &&
touch.clientY >= this.elementBounds.top &&
touch.clientY <= this.elementBounds.bottom
);
},
updateRecordingTime() {
if (this.recording) {
const currentTime = Math.floor((Date.now() - this.startTime) / 1000);
this.recordingTime = currentTime;
setTimeout(() => {
this.updateRecordingTime();
}, 1000);
}
},```
css:
```javascript
.siri-like-wave {
width: 100px;
height: 100px;
border: 3px solid #3498db;
border-top: none;
border-right: none;
animation: rotate 2s infinite linear;
z-index: 1;
position: absolute;
top: 0%;
// left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}