122 lines
5.7 KiB
HTML
122 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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 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());
|
|
});
|
|
}
|
|
|
|
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());
|
|
|
|
$('#localeSelect').change(function() {
|
|
updateVoices($(this).val());
|
|
});
|
|
|
|
$('#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>
|
|
|