cansnow
177 lines
4.9 KiB
Vue
177 lines
4.9 KiB
Vue
<template>
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view class="voice_title" @touchstart.stop.prevent="startVoice"
|
||
@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
|
||
@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
|
||
<text>{{ voiceTitle }}</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
</template>
|
||
|
||
<script>
|
||
import {mapActions,mapGetters} from "vuex";
|
||
export default {
|
||
name:"Recoder",
|
||
props: {
|
||
placeholder: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
maxlength: {
|
||
type: Number,
|
||
default: -1,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
recording:false,
|
||
sendMsgTimmer: null, //发送时间定时器
|
||
sendDuring: 0, //发送时间计数器 1分钟以内的信息不显示时间
|
||
sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
|
||
voiceTitle:"点击录音",
|
||
AudioExam:null,
|
||
isStopVoice : false,
|
||
voiceCanSend : true,
|
||
voiceIconText : "正在录音...",
|
||
PointX : 0,
|
||
PointY : 0,
|
||
voiceInterval:null,
|
||
voiceTime:0,
|
||
};
|
||
},
|
||
watch: {
|
||
voiceIconText(nv,ov){
|
||
this.$emit('RecodeEvent',{type:"voiceIconTextChange",text:nv})
|
||
},
|
||
recording(nv,ov){
|
||
this.$emit('RecodeEvent',{type:"recordingStateChange",state:nv})
|
||
}
|
||
},
|
||
created() {
|
||
const _this = this;
|
||
//录音器，getRecorderManager不支持H5
|
||
// #ifdef APP-PLUS
|
||
//获取全局唯一的录音管理器（https://uniapp.dcloud.net.cn/api/media/record-manager.html#getrecordermanager）
|
||
_this.Recorder = uni.getRecorderManager();
|
||
//录音开始事件
|
||
_this.Recorder.onStart(e => {
|
||
_this.beginVoice();
|
||
});
|
||
//录音结束事件
|
||
_this.Recorder.onStop(res => {
|
||
clearInterval(_this.voiceInterval);
|
||
_this.handleRecorder(res);
|
||
});
|
||
// #endif
|
||
},
|
||
methods: {
|
||
...mapActions("message", ["updateCurrentMsg"]),
|
||
/*----------------------------------------------------（H5不支持）录音相关 start-------------------------------------- */
|
||
//准备开始录音
|
||
startVoice(e) {
|
||
//如果音频正在播放 先暂停。
|
||
this.updateCurrentMsg={clientMsgID:""};
|
||
this.recording = true;
|
||
this.isStopVoice = false;
|
||
this.voiceCanSend = true;
|
||
this.voiceIconText = "正在录音..."
|
||
this.PointY = e.touches[0].clientY;
|
||
this.Recorder.start({
|
||
format: 'mp3'
|
||
});
|
||
},
|
||
//录音已经开始
|
||
beginVoice() {
|
||
let that = this;
|
||
if (that.isStopVoice) {
|
||
that.Recorder.stop();
|
||
return;
|
||
}
|
||
that.voiceTitle = '松开 结束'
|
||
that.voiceInterval = setInterval(() => {
|
||
console.log("that.voiceTime", that.voiceTime);
|
||
if (that.voiceTime > 49) {
|
||
that.voiceIconText = "录音结束倒计时[" + (60 - that.voiceTime) + "]s";
|
||
};
|
||
if (that.voiceTime == 60) {
|
||
clearInterval(that.voiceInterval);
|
||
that.endVoice();
|
||
}
|
||
that.voiceTime++;
|
||
}, 1000)
|
||
},
|
||
//move 正在录音中
|
||
moveVoice(e) {
|
||
const PointY = e.touches[0].clientY;
|
||
const slideY = this.PointY - PointY;
|
||
if (slideY > uni.upx2px(120)) {
|
||
this.voiceCanSend = false;
|
||
this.voiceIconText = '松开手指 取消发送 '
|
||
} else if (slideY > uni.upx2px(60)) {
|
||
this.voiceCanSend = true;
|
||
this.voiceIconText = '手指上滑 取消发送 '
|
||
} else {
|
||
this.voiceIconText = '正在录音... '
|
||
}
|
||
},
|
||
//结束录音
|
||
endVoice() {
|
||
this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
|
||
this.Recorder.stop();
|
||
this.voiceTitle = '按住 说话'
|
||
},
|
||
//录音被打断
|
||
cancelVoice(e) {
|
||
console.log("路由被打断", e);
|
||
this.voiceTime = 0;
|
||
this.voiceTitle = '按住 说话';
|
||
this.voiceCanSend = false;
|
||
this.Recorder.stop();
|
||
},
|
||
//处理录音文件
|
||
handleRecorder({tempFilePath,duration }) {
|
||
if (this.voiceTime < 1) {
|
||
this.voiceIconText = "说话时间过短";
|
||
setTimeout(() => {
|
||
this.recording = false;
|
||
}, 500)
|
||
return;
|
||
}
|
||
let contentDuration = this.voiceTime;
|
||
this.voiceTime = 0;
|
||
this.recording = false;
|
||
clearInterval(this.voiceInterval);
|
||
//console.log("录音文件", tempFilePath);
|
||
//console.log("是否发送语音信息", this.voiceCanSend);
|
||
let voiceFile = {
|
||
tempFilePath: tempFilePath,
|
||
contentDuration: Math.ceil(contentDuration),
|
||
anmitionPlay: false,
|
||
};
|
||
if (this.voiceCanSend) {
|
||
//console.log("=====上传语音文件，并发送语音信息====");
|
||
this.$emit('RecodeEvent',{type:"sendVoiceMessage",audio:voiceFile})
|
||
return;
|
||
} else {
|
||
console.log("=====已经取消发送语音信息====")
|
||
return;
|
||
}
|
||
}
|
||
/*-------------------------------------录音相关方法块 end---------------------------------------------------*/
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.voice_title {
|
||
text-align: center;
|
||
background-color: #ffffff;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
border-radius: 12rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
</style>
|
||
|