|
|
|
<template>
|
|
|
|
<view class="RecordingDevice">
|
|
|
|
<view class="RecordingDevice-2">
|
|
|
|
<VoicePlayback ref="voicePlayback"/>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1">
|
|
|
|
<view class="RecordingDevice-1-i">
|
|
|
|
<view class="RecordingDevice-1-i-taps" v-if="hours || minutes || seconds">
|
|
|
|
<image class="RecordingDevice-1-i-taps-bg" src="@/static/imagesV2/icon64.png" mode="widthFix"></image>
|
|
|
|
|
|
|
|
<view class="RecordingDevice-1-i-taps-c">
|
|
|
|
<image class="RecordingDevice-1-i-taps-c-l" src="@/static/imagesV2/icon65.png" mode="widthFix"></image>
|
|
|
|
|
|
|
|
<text class="RecordingDevice-1-i-taps-c-t">{{ formattedTime }}</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view v-if="isTape === RECORDINGSTATUS.INPROGRESS" @click="pauseRecord">
|
|
|
|
<view class="RecordingDevice-1-i-1">
|
|
|
|
<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon61.png" mode="widthFix"></image>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1-i-2">暂停</view>
|
|
|
|
</view>
|
|
|
|
<view v-else @click="start">
|
|
|
|
<view class="RecordingDevice-1-i-1">
|
|
|
|
<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon66.png" mode="widthFix"></image>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1-i-2">开始</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1-i" @click="stopRecord">
|
|
|
|
<view class="RecordingDevice-1-i-1">
|
|
|
|
<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon62.png" mode="widthFix"></image>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1-i-2">完成</view>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1-i" @click="reRecording">
|
|
|
|
<view class="RecordingDevice-1-i-1">
|
|
|
|
<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon63.png" mode="widthFix"></image>
|
|
|
|
</view>
|
|
|
|
<view class="RecordingDevice-1-i-2">重录</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import VoicePlayback from "@/components/VoicePlayback/index.vue"
|
|
|
|
/**
|
|
|
|
* 录制状态
|
|
|
|
*/
|
|
|
|
const RECORDINGSTATUS = {
|
|
|
|
/**
|
|
|
|
* 未开始
|
|
|
|
* @value 1
|
|
|
|
*/
|
|
|
|
'NOTSTARTEDYET': 1,
|
|
|
|
/**
|
|
|
|
* 进行中
|
|
|
|
* @value 2
|
|
|
|
*/
|
|
|
|
'INPROGRESS': 2,
|
|
|
|
/**
|
|
|
|
* 暂停中
|
|
|
|
* @value 3
|
|
|
|
*/
|
|
|
|
'PAUSED': 3
|
|
|
|
}
|
|
|
|
export default {
|
|
|
|
name: 'RecordingDevice',
|
|
|
|
components: {
|
|
|
|
VoicePlayback
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
formattedTime() {
|
|
|
|
const hours = this.padDigits(this.hours);
|
|
|
|
const minutes = this.padDigits(this.minutes);
|
|
|
|
const seconds = this.padDigits(this.seconds);
|
|
|
|
return `${hours}:${minutes}:${seconds}`;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
RECORDINGSTATUS,
|
|
|
|
// 是否正在录制
|
|
|
|
isTape: RECORDINGSTATUS.NOTSTARTEDYET,
|
|
|
|
recorder: null,
|
|
|
|
seconds: 0,
|
|
|
|
minutes: 0,
|
|
|
|
hours: 0,
|
|
|
|
timer: null,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.recorder = uni.getRecorderManager();
|
|
|
|
this.recorder.onStop(res => {
|
|
|
|
if(this.isTape !== RECORDINGSTATUS.NOTSTARTEDYET) {
|
|
|
|
console.log('停止录制...');
|
|
|
|
console.log('录制文件路径：', res.tempFilePath);
|
|
|
|
this.uploadFiles(res.tempFilePath)
|
|
|
|
this.isTape = RECORDINGSTATUS.NOTSTARTEDYET;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
this.recorder.onStart(() => {
|
|
|
|
this.isTape = RECORDINGSTATUS.INPROGRESS;
|
|
|
|
console.log('开始录制...');
|
|
|
|
});
|
|
|
|
this.recorder.stop();
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
this.stopTimer();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
padDigits(number) {
|
|
|
|
return (number < 10) ? '0' + number : number;
|
|
|
|
},
|
|
|
|
startTimer() {
|
|
|
|
this.timer = setInterval(() => {
|
|
|
|
this.seconds++;
|
|
|
|
if (this.seconds >= 60) {
|
|
|
|
this.seconds = 0;
|
|
|
|
this.minutes++;
|
|
|
|
if (this.minutes >= 60) {
|
|
|
|
this.minutes = 0;
|
|
|
|
this.hours++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 1000);
|
|
|
|
},
|
|
|
|
resetTimer() {
|
|
|
|
clearInterval(this.timer);
|
|
|
|
this.timer = null;
|
|
|
|
this.seconds = 0
|
|
|
|
this.minutes = 0
|
|
|
|
this.hours = 0
|
|
|
|
},
|
|
|
|
stopTimer() {
|
|
|
|
clearInterval(this.timer);
|
|
|
|
this.timer = null;
|
|
|
|
},
|
|
|
|
formatTwoDigits(value) {
|
|
|
|
return value.toString().padStart(2, '0');
|
|
|
|
},
|
|
|
|
reRecording() {
|
|
|
|
this.isTape = RECORDINGSTATUS.NOTSTARTEDYET
|
|
|
|
this.recorder.stop();
|
|
|
|
this.resetTimer()
|
|
|
|
},
|
|
|
|
start() {
|
|
|
|
if(this.isTape === RECORDINGSTATUS.PAUSED) {
|
|
|
|
this.resumeRecord()
|
|
|
|
} else if(this.isTape === RECORDINGSTATUS.NOTSTARTEDYET){
|
|
|
|
this.startRecord()
|
|
|
|
this.resetTimer()
|
|
|
|
}
|
|
|
|
this.startTimer()
|
|
|
|
},
|
|
|
|
startRecord() {
|
|
|
|
this.recorder.start({
|
|
|
|
format: 'mp3',
|
|
|
|
});
|
|
|
|
},
|
|
|
|
pauseRecord() {
|
|
|
|
this.recorder.pause();
|
|
|
|
this.isTape = RECORDINGSTATUS.PAUSED;
|
|
|
|
this.stopTimer()
|
|
|
|
console.log('暂停录制...');
|
|
|
|
},
|
|
|
|
resumeRecord() {
|
|
|
|
this.recorder.resume();
|
|
|
|
this.paused = false;
|
|
|
|
this.isTape = RECORDINGSTATUS.INPROGRESS;
|
|
|
|
console.log('继续录制...');
|
|
|
|
},
|
|
|
|
stopRecord() {
|
|
|
|
if(this.isTape === RECORDINGSTATUS.NOTSTARTEDYET) {
|
|
|
|
uni.showToast({
|
|
|
|
icon: 'none',
|
|
|
|
title: '请录制音频'
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
this.resetTimer()
|
|
|
|
this.recorder.stop();
|
|
|
|
},
|
|
|
|
uploadFiles(tempFilePath) {
|
|
|
|
this.$service.wx_upload(tempFilePath, 'video').then(res => {
|
|
|
|
this.$refs.voicePlayback.setUrl(res.data)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.RecordingDevice{
|
|
|
|
.RecordingDevice-2{
|
|
|
|
background-color: #F5F6F8;
|
|
|
|
padding: 44rpx 43rpx;
|
|
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
|
|
.RecordingDevice-1{
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-around;
|
|
|
|
padding-top: 120rpx;
|
|
|
|
.RecordingDevice-1-i{
|
|
|
|
text-align: center;
|
|
|
|
position: relative;
|
|
|
|
.RecordingDevice-1-i-taps{
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -100%);
|
|
|
|
.RecordingDevice-1-i-taps-bg{
|
|
|
|
height: 68rpx;
|
|
|
|
width: 216rpx;
|
|
|
|
}
|
|
|
|
.RecordingDevice-1-i-taps-c{
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
height: 68rpx;
|
|
|
|
width: 216rpx;
|
|
|
|
padding-bottom: 12rpx;
|
|
|
|
justify-content: center;
|
|
|
|
.RecordingDevice-1-i-taps-c-l{
|
|
|
|
height: 36rpx;
|
|
|
|
width: 36rpx;
|
|
|
|
}
|
|
|
|
.RecordingDevice-1-i-taps-c-t{
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #646464;
|
|
|
|
margin-left: 13rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.RecordingDevice-1-i-1{
|
|
|
|
.RecordingDevice-1-i-1-i{
|
|
|
|
height: 120rpx;
|
|
|
|
width: 120rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.RecordingDevice-1-i-2{
|
|
|
|
font-size: 28rpx;
|
|
|
|
color: #323232;
|
|
|
|
margin-top: 10rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
...
|
...
|
|
