feat: 初始化OpenAITTS配音台项目
创建了完整的文本转语音工具,包括: - 后端:Go语言实现的HTTP服务(main.go) - 支持自定义API地址配置 - 提供/api/tts端点 - 兼容OpenAI TTS API格式 - 前端: - index.html:简洁大方的用户界面 - styles.css:现代渐变设计和响应式布局 - app.js:完整的交互逻辑和状态管理 - 配置: - config.example.json:API地址和端口配置示例 - 支持配置文件、环境变量和前端直接配置三种方式 - 文档: - README.md:详细的使用说明和API文档 功能特点: - ✅ 自定义API地址支持 - ✅ 多种声音模型(tts-1/tts-1-hd) - ✅ 6种语音类型选择 - ✅ 实时字符计数 - ✅ 音频播放和下载 - ✅ 本地存储API配置 - ✅ 友好的错误提示
This commit is contained in:
+94
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenAITTS配音台</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>OpenAITTS配音台</h1>
|
||||
<p class="subtitle">简洁高效的文本转语音工具</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- API配置区域 -->
|
||||
<section class="config-section">
|
||||
<h2>API配置</h2>
|
||||
<div class="config-grid">
|
||||
<div class="form-group">
|
||||
<label for="apiKey">API Key</label>
|
||||
<input type="password" id="apiKey" placeholder="sk-..." class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="apiBase">API Base URL</label>
|
||||
<input type="text" id="apiBase" placeholder="https://api.openai.com" value="https://api.openai.com" class="form-input">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 文本输入区域 -->
|
||||
<section class="text-section">
|
||||
<h2>输入文本</h2>
|
||||
<div class="text-input-container">
|
||||
<textarea id="textInput" placeholder="请输入要转换为语音的文本..." rows="8"></textarea>
|
||||
<div class="text-info">
|
||||
<span id="charCount">0</span> 字符
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 参数设置区域 -->
|
||||
<section class="params-section">
|
||||
<h2>语音参数</h2>
|
||||
<div class="params-grid">
|
||||
<div class="form-group">
|
||||
<label for="model">模型</label>
|
||||
<select id="model" class="form-select">
|
||||
<option value="tts-1">tts-1</option>
|
||||
<option value="tts-1-hd" selected>tts-1-hd</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="voice">声音</label>
|
||||
<select id="voice" class="form-select">
|
||||
<option value="alloy">alloy (清晰自然)</option>
|
||||
<option value="echo">echo (沉稳有力)</option>
|
||||
<option value="fable">fable (温暖亲切)</option>
|
||||
<option value="onyx">onyx (成熟稳重)</option>
|
||||
<option value="nova">nova (活泼开朗)</option>
|
||||
<option value="shimmer">shimmer (柔美动听)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 控制区域 -->
|
||||
<section class="controls-section">
|
||||
<div class="controls-grid">
|
||||
<button id="generateBtn" class="btn btn-primary">生成语音</button>
|
||||
<button id="playBtn" class="btn btn-secondary" disabled>播放</button>
|
||||
<button id="downloadBtn" class="btn btn-secondary" disabled>下载</button>
|
||||
</div>
|
||||
<div id="status" class="status"></div>
|
||||
</section>
|
||||
|
||||
<!-- 音频播放区域 -->
|
||||
<section class="audio-section">
|
||||
<h2>音频播放</h2>
|
||||
<div class="audio-player-container">
|
||||
<audio id="audioPlayer" controls class="audio-player"></audio>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 OpenAITTS配音台 | 使用自定义API地址</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user