mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-28 19:13:52 +08:00
添加新功能,声纹选择的时候可以听取音频文件
--VoicePrintDialog.vue 添加听取音频的功能
This commit is contained in:
@@ -14,8 +14,13 @@
|
|||||||
<el-form :model="form" :rules="rules" ref="form" label-width="110px" label-position="left" class="param-form">
|
<el-form :model="form" :rules="rules" ref="form" label-width="110px" label-position="left" class="param-form">
|
||||||
<el-form-item label="声纹向量" prop="audioId" class="form-item">
|
<el-form-item label="声纹向量" prop="audioId" class="form-item">
|
||||||
<el-select v-model="form.audioId" placeholder="请选择一条语言消息" class="custom-select">
|
<el-select v-model="form.audioId" placeholder="请选择一条语言消息" class="custom-select">
|
||||||
<el-option v-for="item in valueTypeOptions" :key="item.audioId" :label="item.content"
|
<el-option v-for="item in valueTypeOptions" :key="item.audioId" :label="item.content" :value="item.audioId">
|
||||||
:value="item.audioId" />
|
<span style="float: left">{{ item.content }}</span>
|
||||||
|
<span style="float: right; color: #8492a6; font-size: 13px">
|
||||||
|
<i :class="getAudioIconClass(item.audioId)" @click.stop="playAudio(item.audioId)"
|
||||||
|
class="audio-icon"></i>
|
||||||
|
</span>
|
||||||
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
@@ -71,6 +76,8 @@ export default {
|
|||||||
return {
|
return {
|
||||||
dialogKey: Date.now(),
|
dialogKey: Date.now(),
|
||||||
saving: false,
|
saving: false,
|
||||||
|
playingAudioId: null,
|
||||||
|
audioElement: null,
|
||||||
valueTypeOptions: [
|
valueTypeOptions: [
|
||||||
{ audioId: '', content: '' }
|
{ audioId: '', content: '' }
|
||||||
],
|
],
|
||||||
@@ -88,6 +95,45 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getAudioIconClass(audioId) {
|
||||||
|
if (this.playingAudioId === audioId) {
|
||||||
|
return 'el-icon-loading';
|
||||||
|
}
|
||||||
|
return 'el-icon-video-play';
|
||||||
|
},
|
||||||
|
playAudio(audioId) {
|
||||||
|
if (this.playingAudioId === audioId) {
|
||||||
|
// 如果正在播放当前音频,则停止播放
|
||||||
|
if (this.audioElement) {
|
||||||
|
this.audioElement.pause();
|
||||||
|
this.audioElement = null;
|
||||||
|
}
|
||||||
|
this.playingAudioId = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 停止当前正在播放的音频
|
||||||
|
if (this.audioElement) {
|
||||||
|
this.audioElement.pause();
|
||||||
|
this.audioElement = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 先获取音频下载ID
|
||||||
|
this.playingAudioId = audioId;
|
||||||
|
api.agent.getAudioId(audioId, (res) => {
|
||||||
|
if (res.data && res.data.data) {
|
||||||
|
// 使用获取到的下载ID播放音频
|
||||||
|
this.audioElement = new Audio(api.getServiceUrl() + `/agent/play/${res.data.data}`);
|
||||||
|
|
||||||
|
this.audioElement.onended = () => {
|
||||||
|
this.playingAudioId = null;
|
||||||
|
this.audioElement = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.audioElement.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
submit() {
|
submit() {
|
||||||
this.$refs.form.validate((valid) => {
|
this.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
@@ -148,6 +194,13 @@ export default {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.audio-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0 5px;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
.param-dialog-wrapper {
|
.param-dialog-wrapper {
|
||||||
.dialog-container {
|
.dialog-container {
|
||||||
padding: 24px 32px;
|
padding: 24px 32px;
|
||||||
|
|||||||
Reference in New Issue
Block a user