14
This commit is contained in:
cansnow
@@ -0,0 +1,176 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user