feat: 添加TTS语音播放功能
Backend: - 新增edge-tts依赖 - 新增/api/tts API生成语音 - 新增/api/tts/voices API获取语音列表 - 系统配置新增tts_provider和tts_voice字段 前端app.js: - 新增TTS状态变量(enableTTS, ttsVoice, ttsQueue等) - 智能体对话和普通对话header添加TTS开关按钮 - 消息操作栏添加语音播放按钮 - 实现playTTS和cleanTTS函数 - 加载后台TTS配置 前端admin.js: - 系统设置页面添加TTS方案和语音配置 - 支持选择晓晓/云希/云扬/晓伊等中文语音 前端style.css: - 新增.tts-btn样式
This commit is contained in:
23
www/admin.js
23
www/admin.js
@@ -1264,6 +1264,25 @@ async function loadSystemPage(content) {
|
||||
<input type="text" class="form-input" id="adminPassword" value="${systemConfigs.admin_password?.value || ''}" placeholder="修改管理员密码">
|
||||
</div>
|
||||
|
||||
<h3 style="margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid #e2e8f0;">TTS语音配置</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">TTS方案</label>
|
||||
<select class="form-select" id="ttsProvider">
|
||||
<option value="edge" ${systemConfigs.tts_provider?.value === 'edge' ? 'selected' : ''}>Edge TTS (微软)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">TTS语音</label>
|
||||
<select class="form-select" id="ttsVoice">
|
||||
<option value="zh-CN-XiaoxiaoNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoxiaoNeural' ? 'selected' : ''}>晓晓 (女声)</option>
|
||||
<option value="zh-CN-YunxiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunxiNeural' ? 'selected' : ''}>云希 (男声)</option>
|
||||
<option value="zh-CN-YunyangNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-YunyangNeural' ? 'selected' : ''}>云扬 (男声)</option>
|
||||
<option value="zh-CN-XiaoyiNeural" ${systemConfigs.tts_voice?.value === 'zh-CN-XiaoyiNeural' ? 'selected' : ''}>晓伊 (女声)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="form-submit" onclick="saveSystemConfig()">保存设置</button>
|
||||
</div>
|
||||
|
||||
@@ -1282,7 +1301,9 @@ async function saveSystemConfig() {
|
||||
guest_chat_sessions: document.getElementById('guestChatSessions').value,
|
||||
guest_chat_messages: document.getElementById('guestChatMessages').value,
|
||||
guest_agent_messages: document.getElementById('guestAgentMessages').value,
|
||||
admin_password: document.getElementById('adminPassword').value
|
||||
admin_password: document.getElementById('adminPassword').value,
|
||||
tts_provider: document.getElementById('ttsProvider').value,
|
||||
tts_voice: document.getElementById('ttsVoice').value
|
||||
};
|
||||
|
||||
await fetchAPI('/api/admin/system', 'POST', data);
|
||||
|
||||
153
www/app.js
153
www/app.js
@@ -123,6 +123,11 @@ async function loadBackendConfig() {
|
||||
console.log('LLM能力: 思考模式=', llmCapabilities.thinking, '视觉=', llmCapabilities.vision);
|
||||
}
|
||||
|
||||
// 加载 TTS 配置
|
||||
if (backendConfig.system) {
|
||||
ttsVoice = backendConfig.system.ttsVoice || 'zh-CN-XiaoxiaoNeural';
|
||||
}
|
||||
|
||||
updateAgentsDisplay();
|
||||
console.log('后台配置已加载', backendConfig);
|
||||
} catch (e) {
|
||||
@@ -296,6 +301,13 @@ let llmCapabilities = {
|
||||
vision: false // 是否支持视觉能力
|
||||
};
|
||||
|
||||
// TTS 语音播放状态
|
||||
let enableTTS = false; // 是否启用语音播放（新建对话默认关闭）
|
||||
let currentPlayingAudio = null; // 当前播放的音频对象
|
||||
let ttsVoice = 'zh-CN-XiaoxiaoNeural'; // TTS 语音
|
||||
let ttsQueue = []; // TTS 待播放队列
|
||||
let isTTSPlaying = false; // 是否正在播放队列
|
||||
|
||||
// DOM 元素（初始为 null，在 openConversation 时重新获取）
|
||||
let appContainer = null;
|
||||
let messagesContainer = null;
|
||||
@@ -2915,6 +2927,9 @@ function showAgentChatPage() {
|
||||
<p class="agent-desc-header">${currentAgent.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="feature-btn tts-btn ${enableTTS ? 'active' : ''}" id="ttsBtn" title="语音播放">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="messages-container" id="messagesContainer">
|
||||
@@ -3033,6 +3048,21 @@ function showAgentChatPage() {
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定 TTS 开关按钮（智能体对话）
|
||||
const ttsBtn = document.getElementById('ttsBtn');
|
||||
if (ttsBtn) {
|
||||
ttsBtn.addEventListener('click', () => {
|
||||
enableTTS = !enableTTS;
|
||||
ttsBtn.classList.toggle('active', enableTTS);
|
||||
showToast(enableTTS ? '语音播放已开启' : '语音播放已关闭');
|
||||
// 如果关闭，停止当前播放
|
||||
if (!enableTTS && currentPlayingAudio) {
|
||||
currentPlayingAudio.pause();
|
||||
currentPlayingAudio = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定输入事件
|
||||
userInput.addEventListener('keydown', handleKeyDown);
|
||||
userInput.addEventListener('input', (e) => autoResize(e.target));
|
||||
@@ -3380,8 +3410,8 @@ function openConversation(id) {
|
||||
<span class="logo">🤖</span>
|
||||
<h1>${escapeHtml(currentConversation.title)}</h1>
|
||||
</div>
|
||||
<button class="clear-btn" id="clearBtn" title="清空对话">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
|
||||
<button class="feature-btn tts-btn ${enableTTS ? 'active' : ''}" id="ttsBtn" title="语音播放">
|
||||
<svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@@ -3496,6 +3526,21 @@ function openConversation(id) {
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定 TTS 开关按钮（普通对话）
|
||||
const ttsBtn = document.getElementById('ttsBtn');
|
||||
if (ttsBtn) {
|
||||
ttsBtn.addEventListener('click', () => {
|
||||
enableTTS = !enableTTS;
|
||||
ttsBtn.classList.toggle('active', enableTTS);
|
||||
showToast(enableTTS ? '语音播放已开启' : '语音播放已关闭');
|
||||
// 如果关闭，停止当前播放
|
||||
if (!enableTTS && currentPlayingAudio) {
|
||||
currentPlayingAudio.pause();
|
||||
currentPlayingAudio = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定置顶置底按钮事件
|
||||
const scrollTopBtn = document.getElementById('scrollTopBtn');
|
||||
const scrollBottomBtn = document.getElementById('scrollBottomBtn');
|
||||
@@ -4158,6 +4203,8 @@ function renderMessages() {
|
||||
|
||||
const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
|
||||
|
||||
const playIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.54 7-8.77s-2.99-7.86-7-8.77z"/></svg>`;
|
||||
|
||||
const actions = isUser
|
||||
? `<div class="message-actions">
|
||||
<button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
|
||||
@@ -4166,6 +4213,7 @@ function renderMessages() {
|
||||
</button>
|
||||
</div>`
|
||||
: `<div class="message-actions">
|
||||
<button class="action-btn tts-btn" data-index="${index}" title="语音播放">${playIcon}</button>
|
||||
<button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
|
||||
<button class="action-btn regenerate-btn" data-index="${index}" title="重新生成">
|
||||
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
|
||||
@@ -4189,6 +4237,9 @@ function renderMessages() {
|
||||
}).join('');
|
||||
|
||||
// 绑定消息操作按钮事件（事件委托）
|
||||
messagesDiv.querySelectorAll('.tts-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => playTTS(parseInt(btn.dataset.index)));
|
||||
});
|
||||
messagesDiv.querySelectorAll('.copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => copyMessage(parseInt(btn.dataset.index)));
|
||||
});
|
||||
@@ -4556,4 +4607,100 @@ async function streamGenerateWithFile(content, fileName) {
|
||||
saveConversations();
|
||||
renderMessages();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== TTS 语音播放 ====================
|
||||
|
||||
// TTS 手动播放（点击消息上的播放按钮）
|
||||
async function playTTS(index) {
|
||||
if (!currentConversation || index < 0) return;
|
||||
|
||||
const msg = currentConversation.messages[index];
|
||||
if (!msg || msg.role !== 'assistant') return;
|
||||
|
||||
const text = msg.content;
|
||||
if (!text) {
|
||||
showToast('没有可播放的内容');
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果正在播放，停止
|
||||
if (currentPlayingAudio) {
|
||||
currentPlayingAudio.pause();
|
||||
currentPlayingAudio = null;
|
||||
showToast('已停止播放');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
showToast('正在生成语音...');
|
||||
|
||||
const response = await fetch('/api/tts', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: cleanTTS(text), voice: ttsVoice })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
showToast(error.error || '语音生成失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const audioBlob = await response.blob();
|
||||
const audioUrl = URL.createObjectURL(audioBlob);
|
||||
|
||||
currentPlayingAudio = new Audio(audioUrl);
|
||||
await currentPlayingAudio.play();
|
||||
showToast('开始播放');
|
||||
|
||||
currentPlayingAudio.onended = () => {
|
||||
URL.revokeObjectURL(audioUrl);
|
||||
currentPlayingAudio = null;
|
||||
};
|
||||
|
||||
} catch (e) {
|
||||
console.error('TTS播放失败:', e);
|
||||
showToast('语音播放失败');
|
||||
}
|
||||
}
|
||||
|
||||
// 清理TTS文本（过滤Markdown特殊字符）
|
||||
function cleanTTS(text) {
|
||||
if (!text) return '';
|
||||
|
||||
// 移除Markdown标题标记
|
||||
text = text.replace(/^#{1,6}\s+/gm, '');
|
||||
|
||||
// 移除粗体/斜体标记
|
||||
text = text.replace(/\*{1,2}([^*]+)\*{1,2}/g, '$1');
|
||||
text = text.replace(/_{1,2}([^_]+)_{1,2}/g, '$1');
|
||||
|
||||
// 移除代码块
|
||||
text = text.replace(/```[\s\S]*?```/g, '');
|
||||
text = text.replace(/`([^`]+)`/g, '$1');
|
||||
|
||||
// 移除链接，只保留文本
|
||||
text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
|
||||
|
||||
// 移除引用标记
|
||||
text = text.replace(/^>\s+/gm, '');
|
||||
|
||||
// 移除分割线
|
||||
text = text.replace(/^[-*_]{3,}$/gm, '');
|
||||
|
||||
// 移除列表标记
|
||||
text = text.replace(/^[\s]*[-*+]\s+/gm, '');
|
||||
text = text.replace(/^[\s]*\d+\.\s+/gm, '');
|
||||
|
||||
// 移除表情符号（emoji）
|
||||
text = text.replace(/[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu, '');
|
||||
|
||||
// 清理多余空白
|
||||
text = text.replace(/\n{3,}/g, '\n\n');
|
||||
text = text.trim();
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
// ==================== 工具函数 ====================
|
||||
@@ -3057,4 +3057,26 @@ body {
|
||||
|
||||
.stop-generate-btn svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
/* TTS 语音播放按钮 */
|
||||
.tts-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tts-btn:hover {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.tts-btn.active {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tts-btn svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user