<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robot čte skrytý text</title>
<style>
#text {
display: none;
}
#progress {
margin-top: 20px;
font-size: 1.1em;
}
</style>
</head>
<body>
<button onclick="speakText()">Přečíst</button>
<button onclick="pauseSpeech()">Pauza</button>
<button onclick="resumeSpeech()">Pokračovat</button>
<button onclick="stopSpeech()">Zastavit</button>
<button onclick="previousSentence()">← Předchozí</button>
<button onclick="nextSentence()">Další →</button>
<div id="progress">
Délka nahrávky: <span id="total">0</span> vět / <span id="duration">0</span> s<br>
Aktuální věta: <span id="current">0</span> / <span id="elapsed">0</span> s
</div>
<p id="text">
Sem vlož text k přečtení
</p>
<script>
let synth = window.speechSynthesis;
let isPaused = false;
let sentences = [];
let durations = [];
let currentIndex = 0;
let isReading = false;
let selectedVoice = null;
// Vyber český hlas (volá se, když jsou načtené hlasy)
function setCzechVoice() {
const voices = synth.getVoices();
selectedVoice = voices.find(voice => voice.lang === "cs-CZ");
if (!selectedVoice) {
selectedVoice = voices.find(voice => voice.lang.startsWith("cs"));
}
}
synth.onvoiceschanged = setCzechVoice;
function estimateDuration(sentence) {
return Math.round(sentence.length * 0.06); // cca 0.06s na znak
}
function updateProgress() {
const totalDuration = durations.reduce((sum, d) => sum + d, 0);
const elapsedDuration = durations.slice(0, currentIndex).reduce((sum, d) => sum + d, 0);
document.getElementById("total").textContent = sentences.length;
document.getElementById("duration").textContent = totalDuration;
document.getElementById("current").textContent = currentIndex + 1;
document.getElementById("elapsed").textContent = elapsedDuration;
}
function speakSentence(index) {
if (index >= sentences.length || index < 0) return;
synth.cancel();
let speech = new SpeechSynthesisUtterance(sentences[index]);
speech.lang = "cs-CZ";
if (selectedVoice) {
speech.voice = selectedVoice;
}
speech.onend = function() {
if (!isPaused && isReading) {
currentIndex++;
updateProgress();
if (currentIndex < sentences.length) {
speakSentence(currentIndex);
} else {
isReading = false;
}
}
};
updateProgress();
synth.speak(speech);
}
function speakText() {
let text = document.getElementById("text").textContent;
sentences = text.match(/[^.!?]+[.!?]/g) || [text];
durations = sentences.map(estimateDuration);
currentIndex = 0;
isPaused = false;
isReading = true;
updateProgress();
speakSentence(currentIndex);
}
function pauseSpeech() {
isPaused = true;
synth.pause();
}
function resumeSpeech() {
isPaused = false;
synth.resume();
}
function stopSpeech() {
isPaused = true;
isReading = false;
synth.cancel();
updateProgress();
}
function previousSentence() {
if (currentIndex > 0) {
currentIndex--;
isPaused = false;
isReading = true;
speakSentence(currentIndex);
}
}
function nextSentence() {
if (currentIndex < sentences.length - 1) {
currentIndex++;
isPaused = false;
isReading = true;
speakSentence(currentIndex);
}
}
</script>
</body>
</html>