6 Commits
10 changed files with 110 additions and 19 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
+34 -1
View File
@@ -4,14 +4,18 @@
import os
import uvicorn
import aiohttp
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import FileResponse
from fastapi.responses import FileResponse, Response
from fastapi.staticfiles import StaticFiles
# 导入后端服务
from server import app as api_app
# 确保音频缓存目录存在
os.makedirs("audio_cache", exist_ok=True)
# 主应用
app = FastAPI(title="Voice Chat Web")
@@ -24,6 +28,35 @@ app.add_middleware(
allow_headers=["*"],
)
# ChatTTS 音频代理(解决 HTTPS 页面访问 HTTP 资源问题)
@app.get("/chattts/audio/{filename}")
async def proxy_chattts_audio(filename: str):
"""代理 ChatTTS 音频文件"""
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:
return Response(content=b'{"detail":"Audio not found"}', status_code=404, media_type="application/json")
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:
return Response(content=f'{"detail":"{str(e)}"}'.encode(), status_code=500, media_type="application/json")
# 挂载音频文件目录(Edge TTS 生成的 MP3
app.mount("/audio", StaticFiles(directory="audio_cache"), name="audio")
# 挂载 API
app.mount("/api", api_app)
+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)
+41 -15
View File
@@ -453,6 +453,9 @@
<!-- TTS 设置 -->
<div class="tts-section">
<h3>🔊 TTS语音合成设置</h3>
<div class="browser-tip" id="browserTip" style="display: none; background: #fff3cd; padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 13px; color: #856404;">
⚠️ 当前浏览器可能限制音频播放,建议使用 Chrome/Firefox,或点击页面任意位置解锁播放
</div>
<div class="tts-options" id="ttsOptions">
<div class="tts-option" data-provider="none">
<div class="name">❌ 无 TTS</div>
@@ -545,6 +548,16 @@
let currentVoice = 'zh-CN-XiaoxiaoNeural';
let autoPlay = true; // 自动播放开关
let volumeLevel = 1.5; // 音量倍率
let userInteracted = false; // 用户是否已交互
// 用户点击页面解锁音频播放能力
document.addEventListener('click', () => {
userInteracted = true;
}, { once: true });
document.addEventListener('touchstart', () => {
userInteracted = true;
}, { once: true });
// 元素
const statusDot = document.getElementById('statusDot');
@@ -569,10 +582,25 @@
await checkStatus();
await loadTTSProviders();
// 检测特殊浏览器(小米浏览器等)
checkBrowser();
// 定时检查状态
setInterval(checkStatus, 10000);
}
// 检测浏览器兼容性
function checkBrowser() {
const ua = navigator.userAgent.toLowerCase();
const browserTip = document.getElementById('browserTip');
// 小米浏览器、华为浏览器等国产浏览器UA特征
if (ua.includes('miui') || ua.includes('xiaomi') || ua.includes('huawei') ||
ua.includes('micromessenger') || ua.includes('quark') || ua.includes('ucbrowser')) {
browserTip.style.display = 'block';
}
}
// 检查服务状态
async function checkStatus() {
try {
@@ -879,6 +907,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 = `
@@ -892,7 +922,6 @@
`;
} else if (role === 'assistant') {
let audioHtml = '';
let audioBtnId = '';
if (audioData) {
audioBtnId = `audioBtn_${Date.now()}`;
audioHtml = `<button class="play-btn tts-play-btn" id="${audioBtnId}" onclick="playAudio('${audioData}', this)">
@@ -904,22 +933,22 @@
<div class="role">AI</div>
<div class="content">${content}${audioHtml}</div>
`;
// 自动播放(如果开启)
if (audioData && autoPlay) {
setTimeout(() => {
const btn = document.getElementById(audioBtnId);
if (btn) {
playAudio(audioData, btn);
}
}, 100);
}
} else {
msg.innerHTML = `<div class="role">我</div><div class="content">${content}</div>`;
}
chatSection.appendChild(msg);
chatSection.scrollTop = chatSection.scrollHeight;
// 自动播放(在元素添加到DOM后)
if (role === 'assistant' && audioData && autoPlay && audioBtnId && userInteracted) {
setTimeout(() => {
const btn = document.getElementById(audioBtnId);
if (btn) {
playAudio(audioData, btn);
}
}, 100);
}
}
// 播放音频
@@ -927,16 +956,13 @@
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') || url.startsWith('http') ? '🔊' : '▶️';
icon.textContent = url.startsWith('/audio') || url.startsWith('http') || url.startsWith('blob:') ? '🔊' : '▶️';
btn.classList.remove('playing');
};
+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: