539 lines
20 KiB
HTML
539 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>文本转语音</title>
|
||
<style>
|
||
* {
|
||
margin: 0; padding: 0; box-sizing: border-box;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
body {
|
||
background-color: #f5f7fa;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
header {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
background: linear-gradient(135deg, #3498db, #8e44ad);
|
||
color: white;
|
||
border-radius: 10px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||
}
|
||
h1 {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 10px;
|
||
font-weight: 700;
|
||
}
|
||
.subtitle {
|
||
font-size: 1.1rem;
|
||
opacity: 0.9;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.main-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.form-section {
|
||
flex: 1;
|
||
min-width: 300px;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.result-section {
|
||
flex: 1;
|
||
min-width: 300px;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
padding: 25px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
select, textarea {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
transition: border 0.3s;
|
||
}
|
||
|
||
select:focus, textarea:focus {
|
||
border-color: #3498db;
|
||
outline: none;
|
||
}
|
||
|
||
textarea {
|
||
min-height: 150px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
transition: background 0.3s;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #3498db;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
.btn:disabled {
|
||
background-color: #95a5a6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.audio-player {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.loading {
|
||
display: none;
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.loading.active {
|
||
display: block;
|
||
}
|
||
|
||
.spinner {
|
||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 50%;
|
||
border-top: 4px solid #3498db;
|
||
width: 40px;
|
||
height: 40px;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 15px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.voice-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.voice-card {
|
||
border: 1px solid #ddd;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.voice-options p {
|
||
color: #666;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.voice-card:hover {
|
||
border-color: #3498db;
|
||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
|
||
}
|
||
|
||
.voice-card.selected {
|
||
border-color: #3498db;
|
||
background-color: #e8f4fd;
|
||
}
|
||
|
||
.voice-name {
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.voice-description {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
}
|
||
|
||
.error-message {
|
||
color: #e74c3c;
|
||
margin-top: 10px;
|
||
display: none;
|
||
}
|
||
|
||
.success-message {
|
||
color: #2ecc71;
|
||
margin-top: 10px;
|
||
display: none;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.main-content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.8rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>文本转语音</h1>
|
||
<p class="subtitle">选择音色，输入文本，生成高质量语音</p>
|
||
</header>
|
||
|
||
<div class="main-content">
|
||
<div class="form-section">
|
||
<h2>语音设置</h2>
|
||
|
||
<div class="form-group">
|
||
<label for="category-select">音色分类</label>
|
||
<select id="category-select">
|
||
<option value="">请选择音色分类</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>选择音色</label>
|
||
<div id="voice-options" class="voice-options">
|
||
<p>请先选择音色分类</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="text-input">输入文本</label>
|
||
<textarea id="text-input" placeholder="请输入要转换为语音的文本..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="speed-ratio">语速</label>
|
||
<select id="speed-ratio">
|
||
<option value="0.8">较慢</option>
|
||
<option value="1.0" selected>正常</option>
|
||
<option value="1.2">较快</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="volume-ratio">音量</label>
|
||
<select id="volume-ratio">
|
||
<option value="0.8">较小</option>
|
||
<option value="1.0" selected>正常</option>
|
||
<option value="1.2">较大</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="pitch-ratio">音调</label>
|
||
<select id="pitch-ratio">
|
||
<option value="0.8">较低</option>
|
||
<option value="1.0" selected>正常</option>
|
||
<option value="1.2">较高</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button id="generate-btn" class="btn btn-primary">生成语音</button>
|
||
|
||
<div id="error-message" class="error-message"></div>
|
||
<div id="success-message" class="success-message"></div>
|
||
</div>
|
||
|
||
<div class="result-section">
|
||
<h2>生成结果</h2>
|
||
|
||
<div id="loading" class="loading">
|
||
<div class="spinner"></div>
|
||
<p>正在生成语音，请稍候...</p>
|
||
</div>
|
||
|
||
<div id="audio-result" style="display: none;">
|
||
<audio id="audio-player" class="audio-player" controls></audio>
|
||
<div class="form-group" style="margin-top: 20px;">
|
||
<button id="download-btn" class="btn btn-primary">下载音频</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="empty-result" style="text-align: center; padding: 40px 0; color: #999;">
|
||
<p>暂无生成结果</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 获取DOM元素
|
||
const categorySelect = document.getElementById('category-select');
|
||
const voiceOptions = document.getElementById('voice-options');
|
||
const textInput = document.getElementById('text-input');
|
||
const speedRatio = document.getElementById('speed-ratio');
|
||
const volumeRatio = document.getElementById('volume-ratio');
|
||
const pitchRatio = document.getElementById('pitch-ratio');
|
||
const generateBtn = document.getElementById('generate-btn');
|
||
const loading = document.getElementById('loading');
|
||
const audioResult = document.getElementById('audio-result');
|
||
const audioPlayer = document.getElementById('audio-player');
|
||
const downloadBtn = document.getElementById('download-btn');
|
||
const emptyResult = document.getElementById('empty-result');
|
||
const errorMessage = document.getElementById('error-message');
|
||
const successMessage = document.getElementById('success-message');
|
||
|
||
// 当前选中的音色
|
||
let selectedVoiceType = null;
|
||
|
||
// API基础URL
|
||
const apiBaseUrl = '/api/VideoRetalk';
|
||
|
||
// 获取所有音色分类
|
||
async function loadVoiceCategories() {
|
||
try {
|
||
const response = await fetch(`${apiBaseUrl}/voices/categories`);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
// 清空现有选项
|
||
categorySelect.innerHTML = '<option value="">请选择音色分类</option>';
|
||
|
||
// 添加分类选项
|
||
data.data.forEach(category => {
|
||
const option = document.createElement('option');
|
||
option.value = category;
|
||
option.textContent = category;
|
||
categorySelect.appendChild(option);
|
||
});
|
||
} else {
|
||
showError('获取音色分类失败: ' + data.message);
|
||
}
|
||
} catch (error) {
|
||
showError('获取音色分类失败: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// 根据分类获取音色列表
|
||
async function loadVoicesByCategory(category) {
|
||
try {
|
||
const response = await fetch(`${apiBaseUrl}/voices/by-category/${category}`);
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
// 清空现有音色选项
|
||
voiceOptions.innerHTML = '';
|
||
|
||
// 添加数据类型检查
|
||
if (typeof data.data !== 'object' || data.data === null) {
|
||
showError('获取的音色列表格式不正确');
|
||
return;
|
||
}
|
||
|
||
// 将对象转换为数组格式 [{voice_type, name, description}, ...]
|
||
const voicesArray = Object.entries(data.data).map(([voiceType, description]) => {
|
||
// 从描述中提取名称和说明（假设格式为 "名称（说明）"）
|
||
const match = description.match(/^(.*?)\((.*?)\)$/);
|
||
return {
|
||
voice_type: voiceType,
|
||
name: match ? match[1] : description,
|
||
description: match ? match[2] : '无描述'
|
||
};
|
||
});
|
||
|
||
// 检查数组是否为空
|
||
if (voicesArray.length === 0) {
|
||
voiceOptions.innerHTML = '<p>该分类下没有可用音色</p>';
|
||
return;
|
||
}
|
||
|
||
// 添加音色卡片
|
||
voicesArray.forEach(voice => {
|
||
const voiceCard = document.createElement('div');
|
||
voiceCard.className = 'voice-card';
|
||
voiceCard.dataset.voiceType = voice.voice_type;
|
||
|
||
const voiceName = document.createElement('div');
|
||
voiceName.className = 'voice-name';
|
||
voiceName.textContent = voice.name;
|
||
|
||
const voiceDescription = document.createElement('div');
|
||
voiceDescription.className = 'voice-description';
|
||
voiceDescription.textContent = voice.description || '暂无描述';
|
||
|
||
voiceCard.appendChild(voiceName);
|
||
voiceCard.appendChild(voiceDescription);
|
||
|
||
// 添加点击事件
|
||
voiceCard.addEventListener('click', function() {
|
||
// 移除其他卡片的选中状态
|
||
document.querySelectorAll('.voice-card').forEach(card => {
|
||
card.classList.remove('selected');
|
||
});
|
||
|
||
// 添加当前卡片的选中状态
|
||
this.classList.add('selected');
|
||
|
||
// 保存选中的音色类型
|
||
selectedVoiceType = this.dataset.voiceType;
|
||
});
|
||
|
||
voiceOptions.appendChild(voiceCard);
|
||
});
|
||
} else {
|
||
voiceOptions.innerHTML = '<p>获取音色列表失败: ' + data.message + '</p>';
|
||
}
|
||
} catch (error) {
|
||
voiceOptions.innerHTML = '<p>获取音色列表失败: ' + error.message + '</p>';
|
||
}
|
||
}
|
||
|
||
// 生成语音
|
||
async function generateAudio() {
|
||
// 验证输入
|
||
if (!selectedVoiceType) {
|
||
showError('请选择音色');
|
||
return;
|
||
}
|
||
|
||
if (!textInput.value.trim()) {
|
||
showError('请输入要转换的文本');
|
||
return;
|
||
}
|
||
|
||
// 隐藏错误和成功消息
|
||
hideMessages();
|
||
|
||
// 显示加载状态
|
||
loading.classList.add('active');
|
||
audioResult.style.display = 'none';
|
||
emptyResult.style.display = 'none';
|
||
generateBtn.disabled = true;
|
||
|
||
try {
|
||
// 准备请求数据
|
||
const requestData = {
|
||
text: textInput.value.trim(),
|
||
voice_type: selectedVoiceType,
|
||
speed_ratio: parseFloat(speedRatio.value),
|
||
volume_ratio: parseFloat(volumeRatio.value),
|
||
pitch_ratio: parseFloat(pitchRatio.value),
|
||
encoding: 'mp3'
|
||
};
|
||
|
||
// 发送请求
|
||
const response = await fetch(`${apiBaseUrl}/tts`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(requestData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
// 显示成功消息
|
||
showSuccess('语音生成成功');
|
||
|
||
// 设置音频播放器
|
||
audioPlayer.src = data.audio_url;
|
||
audioResult.style.display = 'block';
|
||
|
||
// 设置下载按钮
|
||
downloadBtn.onclick = function() {
|
||
const a = document.createElement('a');
|
||
a.href = data.audio_url;
|
||
a.download = 'tts_audio.mp3';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
};
|
||
} else {
|
||
showError('语音生成失败: ' + data.message);
|
||
emptyResult.style.display = 'block';
|
||
}
|
||
} catch (error) {
|
||
showError('语音生成失败: ' + error.message);
|
||
emptyResult.style.display = 'block';
|
||
} finally {
|
||
// 隐藏加载状态
|
||
loading.classList.remove('active');
|
||
generateBtn.disabled = false;
|
||
}
|
||
}
|
||
|
||
// 显示错误消息
|
||
function showError(message) {
|
||
errorMessage.textContent = message;
|
||
errorMessage.style.display = 'block';
|
||
successMessage.style.display = 'none';
|
||
}
|
||
|
||
// 显示成功消息
|
||
function showSuccess(message) {
|
||
successMessage.textContent = message;
|
||
successMessage.style.display = 'block';
|
||
errorMessage.style.display = 'none';
|
||
}
|
||
|
||
// 隐藏所有消息
|
||
function hideMessages() {
|
||
errorMessage.style.display = 'none';
|
||
successMessage.style.display = 'none';
|
||
}
|
||
|
||
// 事件监听器
|
||
categorySelect.addEventListener('change', function() {
|
||
const category = this.value;
|
||
if (category) {
|
||
loadVoicesByCategory(category);
|
||
} else {
|
||
voiceOptions.innerHTML = '<p>请先选择音色分类</p>';
|
||
selectedVoiceType = null;
|
||
}
|
||
});
|
||
|
||
generateBtn.addEventListener('click', generateAudio);
|
||
|
||
// 初始化
|
||
loadVoiceCategories();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |