作者 徐浩

添加音频功能

<template>
<view class="RecordingDevice">
<view class="RecordingDevice-2">
<VoicePlayback ref="voicePlayback"/>
<view class="RecordingDevice-2" v-if="speech.url">
<VoicePlayback ref="voicePlayback" />
</view>
<view class="RecordingDevice-1">
<view class="RecordingDevice-1-i">
... ... @@ -67,10 +67,33 @@
}
export default {
name: 'RecordingDevice',
props: {
value: {
type: Object,
default: () => {
return {
duration: 0,
url: ''
}
}
}
},
model: {
event: 'input',
prop: 'value'
},
components: {
VoicePlayback
},
computed: {
speech: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
},
formattedTime() {
const hours = this.padDigits(this.hours);
const minutes = this.padDigits(this.minutes);
... ... @@ -84,6 +107,7 @@
// 是否正在录制
isTape: RECORDINGSTATUS.NOTSTARTEDYET,
recorder: null,
totalTime: 0,
seconds: 0,
minutes: 0,
hours: 0,
... ... @@ -115,6 +139,7 @@
},
startTimer() {
this.timer = setInterval(() => {
this.totalTime++
this.seconds++;
if (this.seconds >= 60) {
this.seconds = 0;
... ... @@ -129,6 +154,7 @@
resetTimer() {
clearInterval(this.timer);
this.timer = null;
this.totalTime = 0
this.seconds = 0
this.minutes = 0
this.hours = 0
... ... @@ -179,12 +205,23 @@
})
return
}
let result = {
duration: this.totalTime
}
this.speech = { ...this.speech, ...result }
this.resetTimer()
this.recorder.stop();
},
uploadFiles(tempFilePath) {
this.$service.wx_upload(tempFilePath, 'video').then(res => {
this.$refs.voicePlayback.setUrl(res.data)
this.$set(this.speech, 'url', res.data)
let result = {
url: res.data
}
this.speech = { ...this.speech, ...result }
this.$nextTick(() => {
this.$refs.voicePlayback.init(this.speech)
})
})
}
}
... ...
... ... @@ -22,7 +22,6 @@
}
},
mounted() {
this.init()
},
onUnload() {
this.audioContext.stop();
... ... @@ -36,12 +35,13 @@
this.audioContext.pause()
}
},
setUrl(url) {
setUrl({url, duration}) {
this.audioContext.src = url
this.duration = duration
},
init() {
init({ url, duration }) {
this.audioContext = wx.createInnerAudioContext();
this.audioContext.src = require("@/static/imagesV2/test.mp3")
this.audioContext.src = url
this.audioContext.onPlay(() => {
this.isPlay = true
});
... ... @@ -58,12 +58,11 @@
this.audioContext.play()
this.audioContext.pause()
setTimeout(() => {
this.duration = this.audioContext.duration
this.duration = duration
this.remainingTime = this.duration
}, 100)
})
this.audioContext.onTimeUpdate(() => {
this.duration = this.audioContext.duration
this.currentTime = this.audioContext.currentTime
this.remainingTime = this.duration - this.currentTime
});
... ...
... ... @@ -52,7 +52,7 @@
<view class="myQuestion-2-i-3-c-1-r">{{info.answer_time}}</view>
</view>
<view style="margin-top: 28rpx;" v-if="isVoiceReply">
<VoicePlayback />
<VoicePlayback ref="voicePlaybackRef"/>
</view>
<view class="myQuestion-2-i-3-c-2" v-else>
{{info.answer}}
... ... @@ -74,7 +74,7 @@
<textarea class="onLineDetails-1-2-c" placeholder="请输入" v-model="answer"></textarea>
</view>
<view v-else>
<RecordingDevice />
<RecordingDevice v-model="speech" />
</view>
</view>
... ... @@ -103,7 +103,11 @@
answerType: MESSAGETYPE.TEXTANSWER,
value: 5,
answer: '',
info: {}
info: {},
speech: {
duration: 0,
url: ''
}
};
},
computed: {
... ... @@ -113,7 +117,7 @@
},
// 是否查看
isWatch() {
return this.info.answer_type === ANSWERTYPE.ANSWERED
return this.info.answer_type !== ANSWERTYPE.TOBEANSWERED
},
// 是否语音回复
isVoiceReply() {
... ... @@ -145,6 +149,15 @@
uni.hideLoading();
if (res.code == 1) {
this.info = res.data;
if(this.info.answer_type === MESSAGETYPE.VOICEANSWERS) {
let result = this.info.answer
if(result) {
result = JSON.parse(result)
this.$nextTick(() => {
this.$refs.voicePlaybackRef.init(result)
})
}
}
}else {
if (res.msg) {
uni.showToast({
... ... @@ -174,15 +187,23 @@
title: '提交中',
mask: true
})
const { answerType, answer, id } = this;
let { answerType, answer, id } = this;
if(answerType === MESSAGETYPE.TEXTANSWER && !answer) {
uni.showToast({
title: '请输入解答内容',
icon: 'none'
});
return false;
} else if(answerType === MESSAGETYPE.VOICEANSWERS && !this.speech.url) {
uni.showToast({
title: '请录制音频',
icon: 'none'
});
return false;
}
if(answerType === MESSAGETYPE.VOICEANSWERS) {
answer = JSON.stringify(this.speech)
}
this.$service.P_post('/lecturer/answer', {
answer_type: answerType,
answer,
... ...