<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text-to-Speech mit Stimmenauswahl</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
textarea {
width: 80%;
height: 150px;
margin-bottom: 10px;
}
button, select {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Text-to-Speech mit Stimmenauswahl</h1>
<p>Geben Sie unten Ihren Text ein und wählen Sie eine Stimme aus.</p>
<textarea id="textInput" placeholder="Geben Sie hier Ihren Text ein..."></textarea><br>
<select id="voiceSelect">
<option value="">Lade Stimmen...</option>
</select><br><br>
<button onclick="speak()">Vorlesen</button>
<script>
const voiceSelect = document.getElementById('voiceSelect');
let voices = [];
function loadVoices() {
voices = speechSynthesis.getVoices();
if (voices.length === 0) {
setTimeout(loadVoices, 500); // Warten, falls Stimmen nicht sofort verfügbar sind
return;
}
voiceSelect.innerHTML = ''; // Clear loading message
voices.forEach((voice, index) => {
const option = document.createElement('option');
option.value = index;
option.textContent = `${voice.name} (${voice.lang})`;
voiceSelect.appendChild(option);
});
}
function speak() {
const text = document.getElementById("textInput").value;
if (!text) {
alert("Bitte geben Sie einen Text ein!");
return;
}
const utterance = new SpeechSynthesisUtterance(text);
const selectedVoice = voices[voiceSelect.value];
if (selectedVoice) utterance.voice = selectedVoice;
speechSynthesis.speak(utterance);
}
// Stimmen laden, wenn die Seite geladen wird
window.onload = () => {
loadVoices();
speechSynthesis.onvoiceschanged = loadVoices;
};
</script>
</body>
</html>