joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

语音训练代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-29 10:21:51 +08:00
parent 5678d8dfad
commit 330416f0e0
1 changed files with 82 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/views/system/voiceTraining/index.vue
View File

@ -2,30 +2,34 @@
<div> <div>
<el-card style="width: 80%;margin: 30px auto;"> <el-card style="width: 80%;margin: 30px auto;">
<div slot="header" style="text-align: center;display: flex;align-items: center;justify-content: space-between;"> <div slot="header" style="text-align: center;display: flex;align-items: center;justify-content: space-between;">
<span class="userBubble"> <span class="userBubble">
<el-button class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()"> <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" /> <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()" /> <i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
<span class="iconfont icon-yuyin">&#xe62b;</span> <span class="iconfont icon-yuyin">&#xe62b;</span>
</el-button> </el-button>
</span> </span>
<span style="font-size: 20px;color: #000;">语音识别训练</span> <span style="font-size: 20px;color: #000;">语音识别训练</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="messageList=[]">清空</el-button> <el-button style="float: right; padding: 3px 0" type="text" @click="messageList=[]">清空</el-button>
</div> </div>
<div> <div>
<div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass"> <div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
<div class="userHeader" style="display:flex;justify-content:flex-start;align-items:center;margin-bottom: 2px;padding: 7px 17px;"> <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;"> <div style="display: flex;flex-direction: column;">
<audio :src="getUrl(chatContent)" controls="controls"> <audio :src="getUrl(chatContent)" controls="controls">
Your browser does not support the audio tag. Your browser does not support the audio tag.
</audio> </audio>
</div> </div>
<div style="flex: 1;padding: 7px; 17px"> <div style="flex: 1;padding: 7px 17px">
<div style="word-break: break-all"> {{chatContent.result||"无"}} </div> <div style="word-break: break-all"> {{ chatContent.result||"无" }} </div>
</div> </div>
</div> <div style="">
<el-input type="textarea" style="width:300px;vertical-align:top;margin-right:100px;" placeholder="备注" />
<el-button type="text" style="margin-right:10px;" @click="deleteRecord(index)">删除</el-button>
</div>
</div>
</div> </div>
<div v-if="!messageList.length" style="text-align: center;padding: 17px;color: #a1a1a1;">暂无数据</div> <div v-if="!messageList.length" style="text-align: center;padding: 17px;color: #a1a1a1;">暂无数据</div>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -46,10 +50,10 @@ export default {
}; };
}, },
methods: { methods: {
getUrl(el) { getUrl(el) {
return `https://oss.joylink.club/oss/joylink${el.filePath}`; return `https://oss.joylink.club/oss/joylink${el.filePath}`;
}, },
covertTime(time) { covertTime(time) {
const date = new Date(time); const date = new Date(time);
let hour = date.getHours(); let hour = date.getHours();
let minute = date.getMinutes(); let minute = date.getMinutes();
@ -66,60 +70,60 @@ export default {
if (!this.recordSending && !this.recorders && !this.microphone) { if (!this.recordSending && !this.recorders && !this.microphone) {
const StereoAudioRecorder = RecordRTC.StereoAudioRecorder; const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
navigator.getUserMedia({ audio: true }, function (stream) { navigator.getUserMedia({ audio: true }, function (stream) {
that.microphone = stream; that.microphone = stream;
that.recorders = new RecordRTC(that.microphone, { that.recorders = new RecordRTC(that.microphone, {
type: 'audio', type: 'audio',
recorderType: StereoAudioRecorder, recorderType: StereoAudioRecorder,
numberOfAudioChannels: 1, numberOfAudioChannels: 1,
bitsPerSecond:256000, bitsPerSecond:256000,
desiredSampRate: 16000 desiredSampRate: 16000
}); });
that.recorders.startRecording(); that.recorders.startRecording();
that.recordSending = true; that.recordSending = true;
that.audioPlay = false; that.audioPlay = false;
that.inter = setInterval(() => { that.inter = setInterval(() => {
if (that.seconds < 60) { if (that.seconds < 60) {
that.seconds++; that.seconds++;
} else { } else {
clearInterval(that.inter); clearInterval(that.inter);
that.stopRecording(); that.stopRecording();
}
}, 1000);
}, function (error) {
switch (error.code || error.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
that.$message({
showClose: true,
message: '用户拒绝提供信息',
type: 'error'
});
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
that.$message({
showClose: true,
message: '浏览器不支持硬件设备',
type: 'error'
});
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
that.$message({
showClose: true,
message: '无法发现指定的硬件设备',
type: 'error'
});
break;
default:
that.$message({
showClose: true,
message: '无法打开麦克风',
type: 'error'
});
break;
} }
}, 1000);
}, function (error) {
switch (error.code || error.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
that.$message({
showClose: true,
message: '用户拒绝提供信息',
type: 'error'
});
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
that.$message({
showClose: true,
message: '浏览器不支持硬件设备',
type: 'error'
});
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
that.$message({
showClose: true,
message: '无法发现指定的硬件设备',
type: 'error'
});
break;
default:
that.$message({
showClose: true,
message: '无法打开麦克风',
type: 'error'
});
break;
} }
}
); );
} }
} else { } else {
@ -149,7 +153,7 @@ export default {
uploadAudioFiles(fd) uploadAudioFiles(fd)
.then((resp) => { .then((resp) => {
that.audioPlay = false; that.audioPlay = false;
that.messageList.push(resp.data); that.messageList.push(resp.data);
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
@ -163,6 +167,9 @@ export default {
that.recorders = null; that.recorders = null;
} }
}); });
},
deleteRecord(index) {
this.messageList.splice(index, 1);
} }
} }
}; };
@ -232,4 +239,5 @@ export default {
padding: 3px; padding: 3px;
} }
} }
.deleteRecord{}
</style> </style>