This commit is contained in:
fan 2021-04-12 18:19:58 +08:00
commit cbb02621d9
3 changed files with 52 additions and 42 deletions

View File

@ -1100,15 +1100,15 @@ export const asyncRouter = [
meta: {
i18n: 'router.preTheoryData'
}
},
{
path: 'voiceTraining',
component: VoiceTraining,
meta: {
i18n: 'router.voiceTraining'
}
}
// {
// path: 'voiceTraining',
// component: VoiceTraining,
// meta: {
// i18n: 'router.voiceTraining'
// }
// }
// {
// path: 'deviceManage',
// component: DeviceManage,
// meta: {

View File

@ -2,11 +2,11 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.8.107:9000'; // 袁琪
// BASE_API = 'http://192.168.8.169:9000'; // 旭强
// BASE_API = 'http://192.168.8.119:9000'; // 张赛
// BASE_API = 'http://192.168.8.140:9000'; // 杜康
BASE_API = 'http://192.168.8.140:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip';
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康
// BASE_API = 'http://2i38984j47.qicp.vip'; // 张赛

View File

@ -1,34 +1,31 @@
<template>
<div>
<el-card style="width: 80%;margin: 30px auto;">
<div slot="header" style="text-align: center;">
<div slot="header" style="text-align: center;display: flex;align-items: center;justify-content: space-between;">
<span class="userBubble">
<el-button class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
<el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
<span class="iconfont icon-yuyin">&#xe62b;</span>
</el-button>
</span>
<span style="font-size: 20px;color: #000;">语音识别训练</span>
<el-button style="float: right; padding: 3px 0" type="text">清空</el-button>
<el-button style="float: right; padding: 3px 0" type="text" @click="messageList=[]">清空</el-button>
</div>
<div>
<div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
<div class="leftUser">
<div class="userHeader">
<div class="userChatTime">{{ covertTime(chatContent.time) }}</div>
</div>
<div class="userBubble" @click="playAudio(baseUrl+chatContent.src, chatContent)">
<div class="userMessage">
<!-- 语音播放 -->
<div class="wifi-symbol">
<div class="wifi-circle first" />
</div>
</div>
</div>
<audio id="audioPlay" style="display:none" />
</div>
<div class="userHeader" style="display:flex;justify-content:flex-start;align-items:center;margin-bottom: 2px;padding: 7px 17px;">
<div style="display: flex;flex-direction: column;">
<audio :src="getUrl(chatContent)" controls="controls">
Your browser does not support the audio tag.
</audio>
</div>
<div style="flex: 1;padding: 7px; 17px">
<div style="word-break: break-all"> {{chatContent.result||"无"}} </div>
</div>
</div>
</div>
</div>
<div style="position: relative;height: 50px;">
<el-button class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
<el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
<i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
<span class="iconfont icon-yuyin">&#xe62b;</span>
</el-button>
<div v-if="!messageList.length" style="text-align: center;padding: 17px;color: #a1a1a1;">暂无数据</div>
</div>
</el-card>
</div>
@ -45,19 +42,30 @@ export default {
recordSending: false,
recorders: null,
microphone:null,
messageList: [{ filePath: '/8888', result: '测试文字' }]
messageList: []
};
},
methods: {
getUrl(el) {
return `https://oss.joylink.club/oss/joylink${el.filePath}`;
},
covertTime(time) {
const date = new Date(time);
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
second = second > 9 ? second : '0' + second;
return hour + ':' + minute + ':' + second;
},
startRecording() {
this.audioPlay = true;
const that = this;
if (!this.recordSending) {
if (!this.recordSending && !this.recorders && !this.microphone) {
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
navigator.getUserMedia(
{ audio: true } //
, function (stream) {
navigator.getUserMedia({ audio: true }, function (stream) {
that.microphone = stream;
that.recorders = new RecordRTC(that.microphone, {
type: 'audio',
@ -139,9 +147,9 @@ export default {
const fd = new FormData();
fd.append('file', blob);
uploadAudioFiles(fd)
.then((data) => {
that.textContent = '';
.then((resp) => {
that.audioPlay = false;
that.messageList.push(resp.data);
})
.catch(error => {
console.log(error);
@ -174,6 +182,7 @@ export default {
.chatContentInClass{
display: inline-block;
width: 100%;
border: 1px solid #f1f1f1;
}
.leftUser{
float: left;
@ -185,8 +194,8 @@ export default {
font-size: 16px;
text-align: center;
color: #fff;
position: absolute;
right: 5px;
position: relative;
left: 5px;
top: 6px;
line-height: 30px;
cursor: pointer;
@ -215,11 +224,12 @@ export default {
}
.close_icon{
position: absolute;
top: -15px;
left: 11px;
top: 8px;
left: 45px;
font-size: 16px;
color: #333;
font-weight: 600;
padding: 3px;
}
}
</style>