|
|
@ -1,23 +1,23 @@ |
|
|
<template> |
|
|
<template> |
|
|
<el-dialog class="chat-voice" title="语音录制" :visible.sync="visible" width="600px" :before-close="handleClose"> |
|
|
<el-dialog class="chat-voice" title="语音录制" :visible.sync="visible" width="600px" :before-close="onClose"> |
|
|
<div v-show="mode=='RECORD'"> |
|
|
<div v-show="mode=='RECORD'"> |
|
|
<div class="chat-voice-tip">{{stateTip}}</div> |
|
|
<div class="chat-voice-tip">{{stateTip}}</div> |
|
|
<div>时长: {{state=='STOP'?0:parseInt(rc.duration)}}s</div> |
|
|
<div>时长: {{state=='STOP'?0:parseInt(rc.duration)}}s</div> |
|
|
</div> |
|
|
</div> |
|
|
<audio v-show="mode=='PLAY'" :src="url" controls ref="audio" @ended="handleStopAudio()"></audio> |
|
|
<audio v-show="mode=='PLAY'" :src="url" controls ref="audio" @ended="onStopAudio()"></audio> |
|
|
<el-divider content-position="center"></el-divider> |
|
|
<el-divider content-position="center"></el-divider> |
|
|
<el-row class="chat-voice-btn-group"> |
|
|
<el-row class="chat-voice-btn-group"> |
|
|
<el-button round type="primary" v-show="state=='STOP'" @click="handleStartRecord()">开始录音</el-button> |
|
|
<el-button round type="primary" v-show="state=='STOP'" @click="onStartRecord()">开始录音</el-button> |
|
|
<el-button round type="warning" v-show="state=='RUNNING'" @click="handlePauseRecord()">暂停录音</el-button> |
|
|
<el-button round type="warning" v-show="state=='RUNNING'" @click="onPauseRecord()">暂停录音</el-button> |
|
|
<el-button round type="primary" v-show="state=='PAUSE'" @click="handleResumeRecord()">继续录音</el-button> |
|
|
<el-button round type="primary" v-show="state=='PAUSE'" @click="onResumeRecord()">继续录音</el-button> |
|
|
<el-button round type="danger" v-show="state=='RUNNING'||state=='PAUSE'" @click="handleCompleteRecord()"> |
|
|
<el-button round type="danger" v-show="state=='RUNNING'||state=='PAUSE'" @click="onCompleteRecord()"> |
|
|
结束录音</el-button> |
|
|
结束录音</el-button> |
|
|
<el-button round type="success" v-show="state=='COMPLETE' && mode!='PLAY'" @click="handlePlayAudio()">播放录音 |
|
|
<el-button round type="success" v-show="state=='COMPLETE' && mode!='PLAY'" @click="onPlayAudio()">播放录音 |
|
|
</el-button> |
|
|
</el-button> |
|
|
<el-button round type="warning" v-show="state=='COMPLETE' && mode=='PLAY'" @click="handleStopAudio()">停止播放 |
|
|
<el-button round type="warning" v-show="state=='COMPLETE' && mode=='PLAY'" @click="onStopAudio()">停止播放 |
|
|
</el-button> |
|
|
</el-button> |
|
|
<el-button round type="primary" v-show="state=='COMPLETE'" @click="handleRestartRecord()">重新录音</el-button> |
|
|
<el-button round type="primary" v-show="state=='COMPLETE'" @click="onRestartRecord()">重新录音</el-button> |
|
|
<el-button round type="primary" v-show="state=='COMPLETE'" @click="handleSendRecord()">立即发送</el-button> |
|
|
<el-button round type="primary" v-show="state=='COMPLETE'" @click="onSendRecord()">立即发送</el-button> |
|
|
</el-row> |
|
|
</el-row> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
@ -45,7 +45,7 @@ |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
handleClose() { |
|
|
onClose() { |
|
|
// 关闭前清除数据 |
|
|
// 关闭前清除数据 |
|
|
this.rc.destroy(); |
|
|
this.rc.destroy(); |
|
|
this.rc = new Recorder(); |
|
|
this.rc = new Recorder(); |
|
|
@ -55,7 +55,7 @@ |
|
|
this.stateTip = '未开始'; |
|
|
this.stateTip = '未开始'; |
|
|
this.$emit("close"); |
|
|
this.$emit("close"); |
|
|
}, |
|
|
}, |
|
|
handleStartRecord() { |
|
|
onStartRecord() { |
|
|
this.rc.start().then((stream) => { |
|
|
this.rc.start().then((stream) => { |
|
|
this.state = 'RUNNING'; |
|
|
this.state = 'RUNNING'; |
|
|
this.stateTip = "正在录音..."; |
|
|
this.stateTip = "正在录音..."; |
|
|
@ -67,34 +67,34 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
handlePauseRecord() { |
|
|
onPauseRecord() { |
|
|
this.rc.pause(); |
|
|
this.rc.pause(); |
|
|
this.state = 'PAUSE'; |
|
|
this.state = 'PAUSE'; |
|
|
this.stateTip = "已暂停录音"; |
|
|
this.stateTip = "已暂停录音"; |
|
|
}, |
|
|
}, |
|
|
handleResumeRecord() { |
|
|
onResumeRecord() { |
|
|
this.rc.resume(); |
|
|
this.rc.resume(); |
|
|
this.state = 'RUNNING'; |
|
|
this.state = 'RUNNING'; |
|
|
this.stateTip = "正在录音..."; |
|
|
this.stateTip = "正在录音..."; |
|
|
}, |
|
|
}, |
|
|
handleCompleteRecord() { |
|
|
onCompleteRecord() { |
|
|
this.rc.pause(); |
|
|
this.rc.pause(); |
|
|
this.state = 'COMPLETE'; |
|
|
this.state = 'COMPLETE'; |
|
|
this.stateTip = "已结束录音"; |
|
|
this.stateTip = "已结束录音"; |
|
|
}, |
|
|
}, |
|
|
handlePlayAudio() { |
|
|
onPlayAudio() { |
|
|
let wav = this.rc.getWAVBlob(); |
|
|
let wav = this.rc.getWAVBlob(); |
|
|
let url = URL.createObjectURL(wav); |
|
|
let url = URL.createObjectURL(wav); |
|
|
this.$refs.audio.src = url; |
|
|
this.$refs.audio.src = url; |
|
|
this.$refs.audio.play(); |
|
|
this.$refs.audio.play(); |
|
|
this.mode = 'PLAY'; |
|
|
this.mode = 'PLAY'; |
|
|
}, |
|
|
}, |
|
|
handleStopAudio() { |
|
|
onStopAudio() { |
|
|
console.log(this.$refs.audio); |
|
|
console.log(this.$refs.audio); |
|
|
this.$refs.audio.pause(); |
|
|
this.$refs.audio.pause(); |
|
|
this.mode = 'RECORD'; |
|
|
this.mode = 'RECORD'; |
|
|
}, |
|
|
}, |
|
|
handleRestartRecord() { |
|
|
onRestartRecord() { |
|
|
this.rc.destroy(); |
|
|
this.rc.destroy(); |
|
|
this.rc = new Recorder() |
|
|
this.rc = new Recorder() |
|
|
this.rc.start(); |
|
|
this.rc.start(); |
|
|
@ -102,7 +102,7 @@ |
|
|
this.mode = 'RECORD'; |
|
|
this.mode = 'RECORD'; |
|
|
this.stateTip = "正在录音..."; |
|
|
this.stateTip = "正在录音..."; |
|
|
}, |
|
|
}, |
|
|
handleSendRecord() { |
|
|
onSendRecord() { |
|
|
let wav = this.rc.getWAVBlob(); |
|
|
let wav = this.rc.getWAVBlob(); |
|
|
let name = new Date().getDate() + '.wav'; |
|
|
let name = new Date().getDate() + '.wav'; |
|
|
var formData = new window.FormData() |
|
|
var formData = new window.FormData() |
|
|
@ -120,7 +120,7 @@ |
|
|
url: url |
|
|
url: url |
|
|
} |
|
|
} |
|
|
this.$emit("send", data); |
|
|
this.$emit("send", data); |
|
|
this.handleClose(); |
|
|
this.onClose(); |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
xsx
2 years ago