feat 添加风格支持及首页
This commit is contained in:
zuoban
37
templates/api-doc.html
Normal file
37
templates/api-doc.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>TTS</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1> 支持接口 </h1>
|
||||
<h2>语音合成</h2>
|
||||
<div>
|
||||
<strong>/tts</strong> | GET / POST(json)
|
||||
<a target="_blank" href="/tts?t=岂曰无衣？与子同袍。王于兴师，修我戈矛，与子同仇！岂曰无衣？与子同泽。王于兴师，修我矛戟，与子偕作！岂曰无衣？与子同裳。王于兴师，修我甲兵，与子偕行!&v=zh-CN-XiaoxiaoMultilingualNeural&r=0&p=0&o=audio-24khz-48kbitrate-mono-mp3">try</a>
|
||||
</div>
|
||||
|
||||
|
||||
<pre>
|
||||
参数列表：
|
||||
1. t: 文本内容 (必填)
|
||||
2. v: 语音名称 (可选), 默认为 zh-CN-XiaoxiaoMultilingualNeural
|
||||
3. r: 语速 (可选), 默认为 0
|
||||
4. p: 语调 (可选), 默认为 0
|
||||
5. o: 输出格式 (可选), 默认为audio-24khz-48kbitrate-mono-mp3
|
||||
</pre>
|
||||
|
||||
|
||||
<h2>声音列表</h2>
|
||||
|
||||
<div>
|
||||
<strong>/voices</strong> | GET <a target="_blank" href="/voices?l=zh">try</a>
|
||||
</div>
|
||||
<pre>
|
||||
参数列表：
|
||||
1. l: 语言区域 (可选), 使用 contains 匹配,如 l=zh
|
||||
2. d: 显示详细信息 (可选) , 默认为 false, 如需显示详细信息, 请添加参数d , 如 /voices?d
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,36 +2,120 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>TTS</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>TTS Demo</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
.top-right {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1> 支持接口 </h1>
|
||||
<h2>语音合成</h2>
|
||||
<div>
|
||||
<strong>/tts</strong> | GET / POST(json)
|
||||
<a target="_blank" href="/tts?t=岂曰无衣？与子同袍。王于兴师，修我戈矛，与子同仇！岂曰无衣？与子同泽。王于兴师，修我矛戟，与子偕作！岂曰无衣？与子同裳。王于兴师，修我甲兵，与子偕行!&v=zh-CN-XiaoxiaoMultilingualNeural&r=0&p=0&o=audio-24khz-48kbitrate-mono-mp3">try</a>
|
||||
<body class="bg-gradient-to-r from-blue-100 to-purple-100 min-h-screen flex items-center justify-center p-4">
|
||||
<div class="top-right">
|
||||
<a href="/doc" class="hover:underline p-2 rounded">Documentation</a>
|
||||
</div>
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-4xl">
|
||||
<h1 class="text-4xl font-bold mb-8 text-center text-gray-800">语音合成演示</h1>
|
||||
|
||||
|
||||
<div id="ttsForm" class="space-y-6">
|
||||
<textarea id="textInput" rows="6" class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700 text-lg resize-none" placeholder="请输入要合成的文本">欢迎使用我们的语音合成演示系统。这项技术能够将文字转换成自然流畅的语音。您可以尝试调整语速和语调，体验不同的合成效果。我们提供多种语言和声音选项，满足您的各种需求。无论是阅读文章、语言学习，还是辅助视障人士，语音合成技术都能发挥重要作用。希望这个演示能让您感受到科技的魅力。祝您使用愉快！</textarea>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="localeSelect" class="block text-sm font-medium text-gray-700 mb-1">语言</label>
|
||||
<select id="localeSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700">
|
||||
<option value="zh-CN">中文 (中国)</option>
|
||||
<option value="en-US">English (US)</option>
|
||||
<option value="ja-JP">日本語 (日本)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="voiceSelect" class="block text-sm font-medium text-gray-700 mb-1">声音</label>
|
||||
<select id="voiceSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700"></select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="styleSelect" class="block text-sm font-medium text-gray-700 mb-1">风格</label>
|
||||
<select id="styleSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-4">
|
||||
<div class="w-1/2 space-y-2">
|
||||
<label for="rateInput" class="block text-sm font-medium text-gray-700">语速</label>
|
||||
<input type="range" id="rateInput" min="-100" max="100" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
|
||||
</div>
|
||||
|
||||
<div class="w-1/2 space-y-2">
|
||||
<label for="pitchInput" class="block text-sm font-medium text-gray-700">语调</label>
|
||||
<input type="range" id="pitchInput" min="-100" max="100" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="synthesizeButton" class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 text-lg font-semibold shadow-md">合成并播放</button>
|
||||
</div>
|
||||
|
||||
<audio id="audioPlayer" controls class="w-full mt-6 hidden"></audio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let globalVoices = []
|
||||
function updateVoices(locale) {
|
||||
$('#voiceSelect').empty();
|
||||
$.get('/voices?d&l=' + locale, function(voices) {
|
||||
globalVoices = voices.voices
|
||||
globalVoices.forEach(function(voice) {
|
||||
$('#voiceSelect').append($('<option>', {
|
||||
value: voice.ShortName,
|
||||
text: voice.LocalName + ' (' + voice.ShortName + ')'
|
||||
}));
|
||||
});
|
||||
updateStyles($('#voiceSelect').val());
|
||||
});
|
||||
}
|
||||
|
||||
<pre>
|
||||
参数列表：
|
||||
1. t: 文本内容 (必填)
|
||||
2. v: 语音名称 (可选), 默认为 zh-CN-XiaoxiaoMultilingualNeural
|
||||
3. r: 语速 (可选), 默认为 0
|
||||
4. p: 语调 (可选), 默认为 0
|
||||
5. o: 输出格式 (可选), 默认为audio-24khz-48kbitrate-mono-mp3
|
||||
</pre>
|
||||
function updateStyles(voice) {
|
||||
const currentVoice = globalVoices.filter(v => v.ShortName === voice)[0]
|
||||
if (currentVoice) {
|
||||
$('#styleSelect').empty()
|
||||
currentVoice?.StyleList?.forEach(function(style) {
|
||||
$('#styleSelect').append($('<option>', {
|
||||
value: style,
|
||||
text: style
|
||||
}));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateVoices($('#localeSelect').val());
|
||||
|
||||
<h2>声音列表</h2>
|
||||
$('#localeSelect').change(function() {
|
||||
updateVoices($(this).val());
|
||||
});
|
||||
|
||||
<div>
|
||||
<strong>/voices</strong> | GET <a target="_blank" href="/voices?l=zh">try</a>
|
||||
</div>
|
||||
<pre>
|
||||
参数列表：
|
||||
1. l: 语言区域 (可选), 使用 contains 匹配,如 l=zh
|
||||
2. d: 显示详细信息 (可选) , 默认为 false, 如需显示详细信息, 请添加参数d , 如 /voices?d
|
||||
</pre>
|
||||
$('#voiceSelect').change(function() {
|
||||
updateStyles($(this).val());
|
||||
});
|
||||
|
||||
$('#synthesizeButton').click(function() {
|
||||
var text = $('#textInput').val();
|
||||
var voice = $('#voiceSelect').val();
|
||||
var rate = $('#rateInput').val();
|
||||
var pitch = $('#pitchInput').val();
|
||||
var locale = $('#localeSelect').val();
|
||||
var style = $('#styleSelect').val();
|
||||
|
||||
var url = `/tts?t=${encodeURIComponent(text)}&v=${encodeURIComponent(voice)}&r=${rate}&p=${pitch}&l=${locale}&s=${style}`;
|
||||
|
||||
$('#audioPlayer').attr('src', url).removeClass('hidden')[0].play();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user