feat: enhance API documentation and UI with Tailwind CSS integration, add API Key management features
This commit is contained in:
王锦强
@@ -4,156 +4,164 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>API文档 - TTS服务</title>
|
||||
<link rel="stylesheet" href="{{.BasePath}}/static/css/style.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/static/icons/favicon.svg">
|
||||
<meta name="description" content="TTS服务API文档">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>TTS服务 API文档</h1>
|
||||
<p>快速、高质量的文本转语音API服务</p>
|
||||
<nav>
|
||||
<a href="{{.BasePath}}/">主页</a>
|
||||
<a href="{{.BasePath}}/api-doc" class="active">API文档</a>
|
||||
<body class="text-gray-800 p-4 font-sans">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8 py-4">
|
||||
<h1 class="text-4xl font-bold mb-2 text-gray-800">TTS服务 API文档</h1>
|
||||
<p class="text-xl text-gray-600 mb-4">快速、高质量的文本转语音API服务</p>
|
||||
<nav class="flex justify-center mt-4">
|
||||
<a href="{{.BasePath}}/" class="mx-2 px-3 py-1 rounded text-blue-500 hover:bg-blue-500 hover:text-white transition-colors">主页</a>
|
||||
<a href="{{.BasePath}}/api-doc" class="mx-2 px-3 py-1 rounded bg-blue-500 text-white">API文档</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="card">
|
||||
<h2>API概述</h2>
|
||||
<p>TTS服务API提供了简单而强大的方式将文本转换为自然语音。我们支持多种语言和声音，并允许您调节语速、语调以适应不同场景需求。</p>
|
||||
<p>基础URL: <code>{{.BasePath}}</code></p>
|
||||
<p>所有API请求均使用HTTP协议，返回标准HTTP状态码表示请求结果。</p>
|
||||
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">API概述</h2>
|
||||
<p class="mb-3">TTS服务API提供了简单而强大的方式将文本转换为自然语音。我们支持多种语言和声音，并允许您调节语速、语调以适应不同场景需求。</p>
|
||||
<p class="mb-3">基础URL: <code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">{{.BasePath}}</code></p>
|
||||
<p class="mb-3">所有API请求均使用HTTP协议，返回标准HTTP状态码表示请求结果。</p>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>文本转语音 API</h2>
|
||||
<h3>端点</h3>
|
||||
<code>GET {{.BasePath}}/tts</code>
|
||||
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">文本转语音 API</h2>
|
||||
|
||||
<h3>参数</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>类型</th>
|
||||
<th>必选</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>t</code></td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>要转换的文本（需要进行URL编码）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>v</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>语音名称，使用short_name格式，默认: {{.DefaultVoice}}。可通过/voices接口获取所有可用语音</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>r</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>语速调整，范围: -100%到100%，默认: {{.DefaultRate}}。正值加快语速，负值减慢语速</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>p</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>语调调整，范围: -100%到100%，默认: {{.DefaultPitch}}。正值提高语调，负值降低语调</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>o</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>输出音频格式，默认: {{.DefaultFormat}}。详见下方支持的格式列表</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>s</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>情感风格，可用值取决于所选语音的style_list属性。例如："cheerful"、"sad"等</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">端点</h3>
|
||||
<code class="block bg-gray-100 p-3 rounded text-sm font-mono mb-4">GET {{.BasePath}}/tts</code>
|
||||
|
||||
<h3>示例请求</h3>
|
||||
<pre><code>curl "{{.BasePath}}/tts?t=%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C&v=zh-CN-XiaoxiaoNeural&r=0%25&p=0%25"</code></pre>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">参数</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">参数</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">类型</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">必选</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">t</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">是</td>
|
||||
<td class="py-2 px-4 border-b">要转换的文本（需要进行URL编码）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">v</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">语音名称，使用short_name格式，默认: {{.DefaultVoice}}。可通过/voices接口获取所有可用语音</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">r</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">语速调整，范围: -100%到100%，默认: {{.DefaultRate}}。正值加快语速，负值减慢语速</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">p</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">语调调整，范围: -100%到100%，默认: {{.DefaultPitch}}。正值提高语调，负值降低语调</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">o</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">输出音频格式，默认: {{.DefaultFormat}}。详见下方支持的格式列表</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">s</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">情感风格，可用值取决于所选语音的style_list属性。例如："cheerful"、"sad"等</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>另一个示例（带情感风格）</h3>
|
||||
<pre><code>curl "{{.BasePath}}/tts?t=%E4%BB%8A%E5%A4%A9%E5%A4%A9%E6%B0%94%E7%9C%9F%E5%A5%BD&v=zh-CN-XiaoxiaoNeural&s=cheerful"</code></pre>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">示例请求</h3>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>curl "{{.BasePath}}/tts?t=%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C&v=zh-CN-XiaoxiaoNeural&r=0%25&p=0%25"</code></pre>
|
||||
|
||||
<h3>响应</h3>
|
||||
<p>返回音频文件，内容类型取决于请求的输出格式。正常响应状态码为200。</p>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">另一个示例（带情感风格）</h3>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>curl "{{.BasePath}}/tts?t=%E4%BB%8A%E5%A4%A9%E5%A4%A9%E6%B0%94%E7%9C%9F%E5%A5%BD&v=zh-CN-XiaoxiaoNeural&s=cheerful"</code></pre>
|
||||
|
||||
<h3>错误响应</h3>
|
||||
<p>如果请求参数有误或服务出现问题，将返回对应的HTTP错误码和错误消息。</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>状态码</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>400</td>
|
||||
<td>参数错误或缺失必要参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>404</td>
|
||||
<td>请求的资源不存在</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>500</td>
|
||||
<td>服务器内部错误</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">响应</h3>
|
||||
<p class="mb-3">返回音频文件，内容类型取决于请求的输出格式。正常响应状态码为200。</p>
|
||||
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">错误响应</h3>
|
||||
<p class="mb-3">如果请求参数有误或服务出现问题，将返回对应的HTTP错误码和错误消息。</p>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">状态码</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b">400</td>
|
||||
<td class="py-2 px-4 border-b">参数错误或缺失必要参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b">404</td>
|
||||
<td class="py-2 px-4 border-b">请求的资源不存在</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b">500</td>
|
||||
<td class="py-2 px-4 border-b">服务器内部错误</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>获取可用语音 API</h2>
|
||||
<h3>端点</h3>
|
||||
<code>GET {{.BasePath}}/voices</code>
|
||||
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">获取可用语音 API</h2>
|
||||
|
||||
<h3>参数</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>类型</th>
|
||||
<th>必选</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>locale</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>筛选特定语言的语音，例如：zh-CN（中文）、en-US（英文）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>gender</code></td>
|
||||
<td>string</td>
|
||||
<td>否</td>
|
||||
<td>筛选特定性别的语音，可选值：Male（男性）、Female（女性）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">端点</h3>
|
||||
<code class="block bg-gray-100 p-3 rounded text-sm font-mono mb-4">GET {{.BasePath}}/voices</code>
|
||||
|
||||
<h3>示例请求</h3>
|
||||
<pre><code>curl "{{.BasePath}}/voices?locale=zh-CN&gender=Female"</code></pre>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">参数</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">参数</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">类型</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">必选</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">locale</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">筛选特定语言的语音，例如：zh-CN（中文）、en-US（英文）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">gender</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">筛选特定性别的语音，可选值：Male（男性）、Female（女性）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>响应</h3>
|
||||
<p>返回JSON格式的可用语音列表：</p>
|
||||
<pre><code>[
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">示例请求</h3>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>curl "{{.BasePath}}/voices?locale=zh-CN&gender=Female"</code></pre>
|
||||
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">响应</h3>
|
||||
<p class="mb-3">返回JSON格式的可用语音列表：</p>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>[
|
||||
{
|
||||
"name": "Microsoft Server Speech Text to Speech Voice (zh-CN, XiaoxiaoNeural)",
|
||||
"display_name": "Xiaoxiao",
|
||||
@@ -166,64 +174,67 @@
|
||||
},
|
||||
...
|
||||
]</code></pre>
|
||||
<p>响应字段说明：</p>
|
||||
<ul>
|
||||
<li><strong>name</strong>：语音的完整名称</li>
|
||||
<li><strong>display_name</strong>：显示用名称（拉丁字符）</li>
|
||||
<li><strong>local_name</strong>：本地化名称</li>
|
||||
<li><strong>short_name</strong>：简短名称（用于API调用的v参数）</li>
|
||||
<li><strong>gender</strong>：性别（Male或Female）</li>
|
||||
<li><strong>locale</strong>：语言代码</li>
|
||||
<li><strong>locale_name</strong>：语言本地化名称</li>
|
||||
<li><strong>style_list</strong>：支持的情感风格列表（如有）</li>
|
||||
<p class="mb-3">响应字段说明：</p>
|
||||
<ul class="list-disc pl-5 mb-4 space-y-1">
|
||||
<li><span class="font-semibold">name</span>：语音的完整名称</li>
|
||||
<li><span class="font-semibold">display_name</span>：显示用名称（拉丁字符）</li>
|
||||
<li><span class="font-semibold">local_name</span>：本地化名称</li>
|
||||
<li><span class="font-semibold">short_name</span>：简短名称（用于API调用的v参数）</li>
|
||||
<li><span class="font-semibold">gender</span>：性别（Male或Female）</li>
|
||||
<li><span class="font-semibold">locale</span>：语言代码</li>
|
||||
<li><span class="font-semibold">locale_name</span>：语言本地化名称</li>
|
||||
<li><span class="font-semibold">style_list</span>：支持的情感风格列表（如有）</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>兼容OpenAI接口 API</h2>
|
||||
<h3>语音合成</h3>
|
||||
<code>POST {{.BasePath}}/v1/audio/speech</code>
|
||||
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">兼容OpenAI接口 API</h2>
|
||||
|
||||
<h3>请求体 (JSON)</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>类型</th>
|
||||
<th>必选</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>model</code></td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>当前仅支持值: "tts-1"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>input</code></td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>要转换的文本内容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>voice</code></td>
|
||||
<td>string</td>
|
||||
<td>是</td>
|
||||
<td>声音名称，使用Microsoft语音格式，例如：ja-JP-KeitaNeural、zh-CN-XiaoxiaoNeural</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>speed</code></td>
|
||||
<td>number</td>
|
||||
<td>否</td>
|
||||
<td>语速调整，范围: 0.5到2.0，默认: 1.0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">语音合成</h3>
|
||||
<code class="block bg-gray-100 p-3 rounded text-sm font-mono mb-4">POST {{.BasePath}}/v1/audio/speech</code>
|
||||
|
||||
<h3>示例请求</h3>
|
||||
<pre><code>curl -X POST "{{.BasePath}}/v1/audio/speech" \
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">请求体 (JSON)</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">参数</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">类型</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">必选</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">model</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">是</td>
|
||||
<td class="py-2 px-4 border-b">当前仅支持值: "tts-1"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">input</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">是</td>
|
||||
<td class="py-2 px-4 border-b">要转换的文本内容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">voice</code></td>
|
||||
<td class="py-2 px-4 border-b">string</td>
|
||||
<td class="py-2 px-4 border-b">是</td>
|
||||
<td class="py-2 px-4 border-b">声音名称，使用Microsoft语音格式，例如：ja-JP-KeitaNeural、zh-CN-XiaoxiaoNeural</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">speed</code></td>
|
||||
<td class="py-2 px-4 border-b">number</td>
|
||||
<td class="py-2 px-4 border-b">否</td>
|
||||
<td class="py-2 px-4 border-b">语速调整，范围: 0.5到2.0，默认: 1.0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">示例请求</h3>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>curl -X POST "{{.BasePath}}/v1/audio/speech" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"model": "tts-1",
|
||||
@@ -231,8 +242,8 @@
|
||||
"voice": "zh-CN-XiaoxiaoNeural"
|
||||
}'</code></pre>
|
||||
|
||||
<h3>另一个示例（带速度调整）</h3>
|
||||
<pre><code>curl -X POST "{{.BasePath}}/v1/audio/speech" \
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">另一个示例（带速度调整）</h3>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>curl -X POST "{{.BasePath}}/v1/audio/speech" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"model": "tts-1",
|
||||
@@ -241,12 +252,12 @@
|
||||
"speed": 1.2
|
||||
}'</code></pre>
|
||||
|
||||
<h3>响应</h3>
|
||||
<p>返回音频文件，内容类型取决于请求的输出格式。正常响应状态码为200。</p>
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">响应</h3>
|
||||
<p class="mb-3">返回音频文件，内容类型取决于请求的输出格式。正常响应状态码为200。</p>
|
||||
|
||||
<h3>错误响应</h3>
|
||||
<p>如果请求有误，将返回JSON格式的错误信息：</p>
|
||||
<pre><code>{
|
||||
<h3 class="text-xl font-semibold text-blue-600 mt-6 mb-2">错误响应</h3>
|
||||
<p class="mb-3">如果请求有误，将返回JSON格式的错误信息：</p>
|
||||
<pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto mb-4"><code>{
|
||||
"error": {
|
||||
"message": "错误信息描述",
|
||||
"type": "错误类型",
|
||||
@@ -255,57 +266,58 @@
|
||||
}</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>支持的输出格式</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>格式名称</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>audio-16khz-32kbitrate-mono-mp3</code></td>
|
||||
<td>MP3格式，16kHz, 32kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>audio-16khz-64kbitrate-mono-mp3</code></td>
|
||||
<td>MP3格式，16kHz, 64kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>audio-16khz-128kbitrate-mono-mp3</code></td>
|
||||
<td>MP3格式，16kHz, 128kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>audio-24khz-48kbitrate-mono-mp3</code></td>
|
||||
<td>MP3格式，24kHz, 48kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>audio-24khz-96kbitrate-mono-mp3</code></td>
|
||||
<td>MP3格式，24kHz, 96kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>audio-24khz-160kbitrate-mono-mp3</code></td>
|
||||
<td>MP3格式，24kHz, 160kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>riff-16khz-16bit-mono-pcm</code></td>
|
||||
<td>WAV格式，16kHz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>riff-24khz-16bit-mono-pcm</code></td>
|
||||
<td>WAV格式，24kHz</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">支持的输出格式</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full bg-white mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">格式名称</th>
|
||||
<th class="py-3 px-4 bg-gray-100 font-semibold text-sm text-left border-b">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">audio-16khz-32kbitrate-mono-mp3</code></td>
|
||||
<td class="py-2 px-4 border-b">MP3格式，16kHz, 32kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">audio-16khz-64kbitrate-mono-mp3</code></td>
|
||||
<td class="py-2 px-4 border-b">MP3格式，16kHz, 64kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">audio-16khz-128kbitrate-mono-mp3</code></td>
|
||||
<td class="py-2 px-4 border-b">MP3格式，16kHz, 128kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">audio-24khz-48kbitrate-mono-mp3</code></td>
|
||||
<td class="py-2 px-4 border-b">MP3格式，24kHz, 48kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">audio-24khz-96kbitrate-mono-mp3</code></td>
|
||||
<td class="py-2 px-4 border-b">MP3格式，24kHz, 96kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">audio-24khz-160kbitrate-mono-mp3</code></td>
|
||||
<td class="py-2 px-4 border-b">MP3格式，24kHz, 160kbps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">riff-16khz-16bit-mono-pcm</code></td>
|
||||
<td class="py-2 px-4 border-b">WAV格式，16kHz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-4 border-b"><code class="bg-gray-100 px-1 rounded text-sm font-mono">riff-24khz-16bit-mono-pcm</code></td>
|
||||
<td class="py-2 px-4 border-b">WAV格式，24kHz</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 TTS服务 | <a href="{{.BasePath}}/">返回主页</a></p>
|
||||
<footer class="text-center mt-10 py-4 text-gray-600 text-sm">
|
||||
<p>© 2025 TTS服务 | <a href="{{.BasePath}}/" class="text-blue-500 hover:underline">返回主页</a></p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,84 +4,111 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>文本转语音 - TTS服务</title>
|
||||
<link rel="stylesheet" href="{{.BasePath}}/static/css/style.css">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/static/icons/favicon.svg">
|
||||
<meta name="description" content="基于Microsoft Azure语音服务的在线文本转语音工具">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>文本转语音 (TTS)</h1>
|
||||
<p>将文本转换为自然流畅的语音</p>
|
||||
<nav>
|
||||
<a href="{{.BasePath}}/" class="active">主页</a>
|
||||
<a href="{{.BasePath}}/api-doc">API文档</a>
|
||||
<body class="bg-gray-50 text-gray-800 p-4 font-sans">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<header class="text-center mb-8 py-4">
|
||||
<h1 class="text-4xl font-bold mb-2 text-gray-800">文本转语音 (TTS)</h1>
|
||||
<p class="text-xl text-gray-600 mb-4">将文本转换为自然流畅的语音</p>
|
||||
<nav class="flex justify-center mt-4">
|
||||
<a href="{{.BasePath}}/" class="mx-2 px-3 py-1 rounded bg-blue-500 text-white">主页</a>
|
||||
<a href="{{.BasePath}}/api-doc" class="mx-2 px-3 py-1 rounded text-blue-500 hover:bg-blue-500 hover:text-white transition-colors">API文档</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="card">
|
||||
<h2>输入文本</h2>
|
||||
<div class="input-group">
|
||||
<textarea id="text" placeholder="输入要转换的文本..." rows="6" maxlength="5000"></textarea>
|
||||
<div class="char-counter"><span id="charCount">0</span>/5000</div>
|
||||
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<div id="api-key-group" class="mb-6 border-b border-gray-200 pb-4">
|
||||
<div class="flex flex-col md:flex-row md:items-end gap-3">
|
||||
<div class="flex-grow">
|
||||
<label for="api-key" class="block mb-1 font-semibold text-gray-700">API Key:</label>
|
||||
<div class="relative">
|
||||
<input type="password" id="api-key" placeholder="请输入有效的API Key以继续操作"
|
||||
class="w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
<button id="toggle-password" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-600 hover:text-blue-500 focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap md:flex-nowrap gap-2" id="api-key-buttons">
|
||||
<!-- 按钮将通过JS添加 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="api-key-group" style="display: none;" class="api-key-container">
|
||||
<label for="api-key">API Key:</label>
|
||||
<input type="password" id="api-key" placeholder="请输入有效的API Key以继续操作">
|
||||
<h2 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">输入文本</h2>
|
||||
<div class="relative mb-4">
|
||||
<textarea id="text" placeholder="输入要转换的文本..." rows="6" maxlength="5000"
|
||||
class="w-full p-3 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
|
||||
<div class="absolute bottom-2 right-2 text-sm text-gray-500">
|
||||
<span id="charCount">0</span>/5000
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings">
|
||||
<div class="setting-group">
|
||||
<label for="voice">语音:</label>
|
||||
<select id="voice">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div class="flex flex-col">
|
||||
<label for="voice" class="mb-1 font-semibold text-gray-700">语音:</label>
|
||||
<select id="voice"
|
||||
class="p-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
<option value="loading">加载中...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-group">
|
||||
<label for="style">风格:</label>
|
||||
<select id="style">
|
||||
<div class="flex flex-col">
|
||||
<label for="style" class="mb-1 font-semibold text-gray-700">风格:</label>
|
||||
<select id="style"
|
||||
class="p-2 border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
<option value="loading">加载中...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-row">
|
||||
<div class="setting-group half-width">
|
||||
<label for="rate">语速:</label>
|
||||
<input type="range" id="rate" min="-100" max="100" value="0">
|
||||
<span id="rateValue">0%</span>
|
||||
<div class="flex flex-wrap -mx-2">
|
||||
<div class="w-full md:w-1/2 px-2 mb-4">
|
||||
<label for="rate" class="mb-1 font-semibold text-gray-700">语速:</label>
|
||||
<div class="flex items-center">
|
||||
<input type="range" id="rate" min="-100" max="100" value="0"
|
||||
class="w-full mr-2 focus:outline-none">
|
||||
<span id="rateValue" class="text-sm text-gray-600 w-10">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-group half-width">
|
||||
<label for="pitch">语调:</label>
|
||||
<input type="range" id="pitch" min="-100" max="100" value="0">
|
||||
<span id="pitchValue">0%</span>
|
||||
<div class="w-full md:w-1/2 px-2 mb-4">
|
||||
<label for="pitch" class="mb-1 font-semibold text-gray-700">语调:</label>
|
||||
<div class="flex items-center">
|
||||
<input type="range" id="pitch" min="-100" max="100" value="0"
|
||||
class="w-full mr-2 focus:outline-none">
|
||||
<span id="pitchValue" class="text-sm text-gray-600 w-10">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button id="speak" class="primary-button">转换为语音</button>
|
||||
<div class="flex justify-center mt-6">
|
||||
<button id="speak" class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">转换为语音</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card" id="resultSection" style="display:none;">
|
||||
<h2>语音输出</h2>
|
||||
<div class="audio-player">
|
||||
<audio id="audioPlayer" controls></audio>
|
||||
<div class="audio-controls">
|
||||
<button id="download" class="secondary-button">下载音频</button>
|
||||
<button id="copyLink" class="secondary-button">复制链接</button>
|
||||
<button id="copyHttpTtsLink" class="secondary-button">复制HttpTTS链接</button>
|
||||
<section id="resultSection" class="bg-white rounded-lg shadow-md p-6 mb-6 hidden">
|
||||
<h2 class="text-xl font-bold mb-4 pb-2 border-b border-gray-200 text-gray-800">语音输出</h2>
|
||||
<div class="flex flex-col items-center">
|
||||
<audio id="audioPlayer" controls class="w-full mb-4"></audio>
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<button id="download" class="m-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">下载音频</button>
|
||||
<button id="copyLink" class="m-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">复制链接</button>
|
||||
<button id="copyHttpTtsLink" class="m-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">复制HttpTTS链接</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 TTS服务 | <a href="{{.BasePath}}/api-doc">API文档</a></p>
|
||||
<footer class="text-center mt-10 py-4 text-gray-600 text-sm">
|
||||
<p>© 2025 TTS服务 | <a href="{{.BasePath}}/api-doc" class="text-blue-500 hover:underline">API文档</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user