sun/TTSpeiyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reapply "feat: 初始化OpenAITTS配音台项目"

Browse Source 
This reverts commit e7cd290325.
This commit is contained in:
sun
2026-01-03 00:16:36 +08:00
parent e7cd290325
commit c9f1e41690
6 changed files with 968 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+94
View File
@@ -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>&copy; 2024 OpenAITTS配音台 | 使用自定义API地址</p>
</footer>
</div>
<script src="app.js"></script>
</body>
</html>