3 Commits
7 changed files with 177 additions and 5 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
+29 -1
View File
@@ -12,7 +12,7 @@ import aiohttp
from fastapi import FastAPI, UploadFile, File, HTTPException, Form
from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse
from fastapi.responses import FileResponse, Response
from pydantic import BaseModel
# 导入 TTS 服务
@@ -255,6 +255,34 @@ async def synthesize_tts(text: str = Form(...), provider: Optional[str] = Form(N
app.mount("/audio", StaticFiles(directory=AUDIO_DIR), name="audio")
# ChatTTS 音频代理(解决 HTTPS 页面访问 HTTP 资源问题)
@app.get("/chattts/audio/{filename}")
async def proxy_chattts_audio(filename: str):
"""代理 ChatTTS 音频文件"""
import aiohttp
chattts_url = os.getenv("CHATTTS_URL", "http://192.168.2.5:12002")
try:
async with aiohttp.ClientSession() as session:
async with session.get(
f"{chattts_url}/audio/{filename}",
timeout=aiohttp.ClientTimeout(total=30)
) as resp:
if resp.status != 200:
raise HTTPException(status_code=404, detail="Audio not found")
audio_data = await resp.read()
return Response(
content=audio_data,
media_type="audio/wav",
headers={"Cache-Control": "public, max-age=3600"}
)
except Exception as e:
logger.error(f"Proxy audio error: {e}")
raise HTTPException(status_code=500, detail=str(e))
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=PORT)
+142 -2
View File
@@ -124,6 +124,96 @@
color: #999;
}
/* TTS 控制选项 */
.tts-controls {
display: flex;
gap: 15px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #eee;
align-items: center;
}
.auto-play-switch {
display: flex;
align-items: center;
gap: 8px;
}
.switch {
position: relative;
width: 44px;
height: 22px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 22px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #667eea;
}
input:checked + .slider:before {
transform: translateX(22px);
}
.volume-control {
display: flex;
align-items: center;
gap: 8px;
}
.volume-control input[type="range"] {
width: 80px;
height: 6px;
border-radius: 3px;
background: #ddd;
outline: none;
-webkit-appearance: none;
}
.volume-control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
}
.volume-value {
font-size: 12px;
color: #666;
min-width: 35px;
}
.voice-select {
margin-top: 10px;
}
@@ -388,6 +478,20 @@
<option value="zh-CN-XiaoyouNeural">晓悠(女)</option>
</select>
</div>
<div class="tts-controls" id="ttsControls" style="display: none;">
<div class="auto-play-switch">
<label class="switch">
<input type="checkbox" id="autoPlaySwitch" checked>
<span class="slider"></span>
</label>
<span>自动播放</span>
</div>
<div class="volume-control">
<span>🔊</span>
<input type="range" id="volumeSlider" min="0.5" max="2" step="0.1" value="1.5">
<span class="volume-value" id="volumeValue">150%</span>
</div>
</div>
</div>
<!-- 录音 -->
@@ -439,6 +543,8 @@
let conversationId = null;
let currentTTSProvider = 'none';
let currentVoice = 'zh-CN-XiaoxiaoNeural';
let autoPlay = true; // 自动播放开关
let volumeLevel = 1.5; // 音量倍率
// 元素
const statusDot = document.getElementById('statusDot');
@@ -453,6 +559,10 @@
const ttsOptions = document.getElementById('ttsOptions');
const voiceSelect = document.getElementById('voiceSelect');
const voiceDropdown = document.getElementById('voiceDropdown');
const ttsControls = document.getElementById('ttsControls');
const autoPlaySwitch = document.getElementById('autoPlaySwitch');
const volumeSlider = document.getElementById('volumeSlider');
const volumeValue = document.getElementById('volumeValue');
// 初始化
async function init() {
@@ -531,6 +641,9 @@
// 显示/隐藏音色选择
voiceSelect.style.display = provider === 'edge' ? 'block' : 'none';
// 显示/隐藏控制选项(有TTS才显示)
ttsControls.style.display = provider !== 'none' ? 'flex' : 'none';
// 保存设置
saveTTSSettings();
}
@@ -766,6 +879,8 @@
const msg = document.createElement('div');
msg.className = `message ${role}`;
let audioBtnId = ''; // 在函数顶部声明
if (role === 'user' && content instanceof Blob) {
const audioUrl = URL.createObjectURL(content);
msg.innerHTML = `
@@ -780,7 +895,8 @@
} else if (role === 'assistant') {
let audioHtml = '';
if (audioData) {
audioHtml = `<button class="play-btn tts-play-btn" onclick="playAudio('${audioData}', this)">
audioBtnId = `audioBtn_${Date.now()}`;
audioHtml = `<button class="play-btn tts-play-btn" id="${audioBtnId}" onclick="playAudio('${audioData}', this)">
<span class="play-icon">🔊</span>
<span>播放回复</span>
</button>`;
@@ -795,6 +911,16 @@
chatSection.appendChild(msg);
chatSection.scrollTop = chatSection.scrollHeight;
// 自动播放(在元素添加到DOM后)
if (role === 'assistant' && audioData && autoPlay && audioBtnId) {
setTimeout(() => {
const btn = document.getElementById(audioBtnId);
if (btn) {
playAudio(audioData, btn);
}
}, 100);
}
}
// 播放音频
@@ -802,13 +928,16 @@
const audio = new Audio(url);
const icon = btn.querySelector('.play-icon');
// 应用音量倍率
audio.volume = Math.min(volumeLevel, 2); // 最大不超过2
audio.onplay = () => {
icon.textContent = '🔊';
btn.classList.add('playing');
};
audio.onended = () => {
icon.textContent = url.startsWith('/audio') ? '🔊' : '▶️';
icon.textContent = url.startsWith('/audio') || url.startsWith('http') ? '🔊' : '▶️';
btn.classList.remove('playing');
};
@@ -862,6 +991,17 @@
saveTTSSettings();
});
// 自动播放开关
autoPlaySwitch.addEventListener('change', () => {
autoPlay = autoPlaySwitch.checked;
});
// 音量控制
volumeSlider.addEventListener('input', () => {
volumeLevel = parseFloat(volumeSlider.value);
volumeValue.textContent = `${Math.round(volumeLevel * 100)}%`;
});
recordBtn.addEventListener('click', () => {
isRecording ? stopRecording() : startRecording();
});
+6 -2
View File
@@ -134,8 +134,12 @@ class ChatTTSProvider(TTSProvider):
raise Exception(f"ChatTTS error: {error}")
data = await resp.json()
# ChatTTS 返回的 URL 是相对路径,需要拼接
audio_url = f"{self.CHATTTS_URL}{data['audio_url']}"
# ChatTTS 返回的 URL 是 /audio/xxx.wav
# 改用本地代理路径(解决 HTTPS 页面访问 HTTP 问题)
original_url = data['audio_url']
# /audio/xxx.wav -> /chattts/audio/xxx.wav (通过本地代理)
filename = original_url.split('/')[-1]
audio_url = f"/chattts/audio/{filename}"
return None, audio_url
def get_name(self) -> str: