Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-22 15:13:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2816 from xinnan-tech/20260105

Browse Source 
修复音色播放按钮显示错误
This commit is contained in:
hrz
2026-01-08 12:39:33 +08:00
committed by GitHub
parent a731c1d01f 3a61ec84b3
commit 36eaefb8b0
8 changed files with 113 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/roleConfig.vue
+28 -57
View File
@@ -599,21 +599,15 @@ export default {
this.voiceOptions = data.data.map((voice) => ({
value: voice.id,
label: voice.name,
// 复制音频相关字段，确保hasAudioPreview能检测到
// 只保留后端实际返回的音频相关字段
voiceDemo: voice.voiceDemo,
demoUrl: voice.demoUrl,
audioUrl: voice.audioUrl,
voice_demo: voice.voice_demo,
sample_voice: voice.sample_voice,
referenceAudio: voice.referenceAudio,
// 新增：添加克隆音频相关字段
cloneAudioUrl: voice.cloneAudioUrl,
hasCloneAudio: voice.hasCloneAudio || false,
// 保存训练状态字段，用于判断是否为克隆音频
// 使用后端实际返回的 isClone 字段
isClone: Boolean(voice.isClone),
// 保存训练状态字段
train_status: voice.trainStatus,
}));
// 保存完整的音色信息，添加调试信息
console.log("获取到的音色数据:", data.data);
this.voiceDetails = data.data.reduce((acc, voice) => {
acc[voice.id] = voice;
return acc;
@@ -746,32 +740,15 @@ export default {
},
// 检查是否有音频预览
hasAudioPreview(item) {
// 检查item中是否包含有效的音频URL字段或克隆音频字段
// 克隆音频通过hasCloneAudio标志或ID格式判断（非TTS开头的ID）
const isCloneAudio =
item.hasCloneAudio || (item.value && !item.value.startsWith("TTS"));
const audioFields = [
item.voiceDemo,
item.demoUrl,
item.audioUrl,
item.voice_demo,
item.sample_voice,
item.referenceAudio,
item.cloneAudioUrl, // 克隆音频的URL
];
// 检查是否有任何音频字段是有效的URL
const hasUrlAudio = audioFields.some(
(field) =>
field !== undefined &&
field !== null &&
typeof field === "string" &&
field.trim() !== "" &&
field.toLowerCase().startsWith("http")
);
return hasUrlAudio || isCloneAudio;
// 检查是否为克隆音频
// 使用后端实际返回的 isClone 字段
const isCloneAudio = Boolean(item.isClone);
// 检查是否有有效的音频URL，只使用后端实际返回的字段
const hasValidAudioUrl = !!((item.voice_demo || item.voiceDemo)?.trim());
// 克隆音频始终显示播放按钮，普通音频需要有有效URL才显示
return isCloneAudio || hasValidAudioUrl;
},
// 播放/暂停音频切换
@@ -782,7 +759,7 @@ export default {
// 从暂停状态恢复播放
this.currentAudio.play().catch((error) => {
console.error("恢复播放失败:", error);
this.$message.warning("无法恢复播放音频");
this.$message.warning(this.$t('roleConfig.cannotResumeAudio'));
});
this.isPaused = false;
} else {
@@ -803,7 +780,7 @@ export default {
const targetVoiceId = voiceId || this.form.ttsVoiceId;
if (!targetVoiceId) {
this.$message.warning("请先选择一个音色");
this.$message.warning(this.$t('roleConfig.selectVoiceFirst'));
return;
}
@@ -830,10 +807,8 @@ export default {
let isCloneAudio = false;
if (voiceDetail) {
// 首先检查是否是克隆音频（通过ID格式判断，非TTS开头的ID）
isCloneAudio =
voiceDetail.hasCloneAudio ||
(voiceDetail.id && !voiceDetail.id.startsWith("TTS"));
// 使用后端实际返回的 isClone 字段判断是否为克隆音频
isCloneAudio = Boolean(voiceDetail.isClone);
console.log(
"克隆音频判断结果:",
isCloneAudio,
@@ -889,7 +864,7 @@ export default {
// 设置超时，防止加载过长时间
const timeoutId = setTimeout(() => {
if (this.currentAudio && this.playingVoice) {
this.$message.warning("音频加载时间较长，请稍后重试");
this.$message.warning(this.$t('roleConfig.audioLoadTimeout'));
this.playingVoice = false;
}
}, 10000); // 10秒超时
@@ -898,7 +873,7 @@ export default {
this.currentAudio.onerror = () => {
clearTimeout(timeoutId);
console.error("克隆音频播放错误");
this.$message.warning("克隆音频播放失败");
this.$message.warning(this.$t('roleConfig.cloneAudioPlayFailed'));
this.playingVoice = false;
};
@@ -920,12 +895,12 @@ export default {
this.currentAudio.play().catch((error) => {
clearTimeout(timeoutId);
console.error("播放克隆音频失败:", error);
this.$message.warning("无法播放克隆音频");
this.$message.warning(this.$t('roleConfig.cannotPlayCloneAudio'));
this.playingVoice = false;
});
} else {
clearTimeout(timeoutId);
this.$message.warning("获取克隆音频失败");
this.$message.warning(this.$t('roleConfig.getCloneAudioFailed'));
this.playingVoice = false;
}
});
@@ -933,14 +908,10 @@ export default {
// 返回，避免继续执行下面的普通音频播放逻辑
return;
} else {
// 对于普通音频，尝试各种可能的URL字段
// 对于普通音频，只使用后端实际返回的字段
audioUrl =
voiceDetail.voiceDemo ||
voiceDetail.demoUrl ||
voiceDetail.audioUrl ||
voiceDetail.voice_demo ||
voiceDetail.sample_voice ||
voiceDetail.cloneAudioUrl; // 克隆音频URL
voiceDetail.voice_demo;
}
// 如果没有找到，尝试检查是否有URL格式的字段
@@ -965,7 +936,7 @@ export default {
if (!audioUrl) {
// 如果没有音频URL，显示友好的提示
this.$message.warning("该音色暂无可预览的音频");
this.$message.warning(this.$t('roleConfig.noPreviewAudio'));
return;
}
@@ -984,7 +955,7 @@ export default {
// 设置超时，防止加载过长时间
const timeoutId = setTimeout(() => {
if (this.currentAudio && this.playingVoice) {
this.$message.warning("音频加载时间较长，请稍后重试");
this.$message.warning(this.$t('roleConfig.audioLoadTimeout'));
this.playingVoice = false;
}
}, 10000); // 10秒超时
@@ -993,7 +964,7 @@ export default {
this.currentAudio.onerror = () => {
clearTimeout(timeoutId);
console.error("音频播放错误");
this.$message.warning("音频播放失败");
this.$message.warning(this.$t('roleConfig.audioPlayFailed'));
this.playingVoice = false;
};
@@ -1011,13 +982,13 @@ export default {
this.currentAudio.play().catch((error) => {
clearTimeout(timeoutId);
console.error("播放失败:", error);
this.$message.warning("无法播放音频");
this.$message.warning(this.$t('roleConfig.cannotPlayAudio'));
this.playingVoice = false;
});
}
} catch (error) {
console.error("播放音频过程出错:", error);
this.$message.error("播放音频过程出错");
this.$message.error(this.$t('roleConfig.audioPlayError'));
this.playingVoice = false;
}
},