Ich hatte vor langer Zeit mal ein kleines Einsteiger-Tutorial über SpeechSynthesis Web API geschrieben. Wie so oft lag der Grund, warum ich das damals geschrieben habe, in einer Aufgabe, die ich lösen musste. Den Task von damals musste ich mittlerweile erweitern. Deswegen zeige ich dir, wie du zusätzliche Funktionen zur Anpassung der Lautstärke, Geschwindigkeit und Sprache der Text-to-Speech-Ausgabe implementierst. Dabei bauen wir auf dem Code aus dem vorherigen Tutorial auf.

Schritt 1: Erweitere die HTML-Struktur

Füge der vorhandenen HTML-Struktur neue Steuerelemente hinzu, um Lautstärke, Geschwindigkeit und Sprache anzupassen:

Schritt 2: Erweitere den JavaScript-Code

Aktualisiere die app.js-Datei, um die neuen Steuerelemente zu berücksichtigen und die entsprechenden Anpassungen an der Text-to-Speech-Ausgabe vorzunehmen:

// DOM-Elemente auswählen
const volumeControl = document.getElementById('volume');
const rateControl = document.getElementById('rate');
const voiceSelect = document.getElementById('voice-select');

// Funktion zum Aktualisieren der verfügbaren Stimmen
function updateVoices() {
  const voices = synth.getVoices();
  voices.forEach(voice => {
    const option = document.createElement('option');
    option.textContent = `${voice.name} (${voice.lang})`;
    option.setAttribute('data-lang', voice.lang);
    option.setAttribute('data-name', voice.name);
    voiceSelect.appendChild(option);
  });
}

// Event Listener zum Aktualisieren der Stimmen
synth.addEventListener('voiceschanged', updateVoices);

// Funktion zum Vorlesen des Textes (aktualisiert)
function speakText() {
  // Neues SpeechSynthesisUtterance-Objekt erstellen
  const utterance = new SpeechSynthesisUtterance(textToSpeak.value);

  // Ausgewählte Stimme festlegen
  const selectedVoiceName = voiceSelect.selectedOptions[0].getAttribute('data-name');
  const selectedVoice = synth.getVoices().find(voice => voice.name === selectedVoiceName);
  utterance.voice = selectedVoice;

  // Lautstärke, Geschwindigkeit und Sprache festlegen
  utterance.volume = parseFloat(volumeControl.value);
  utterance.rate = parseFloat(rateControl.value);
  utterance.lang = selectedVoice.lang;

  // Text vorlesen
  synth.speak(utterance);
}

// Stimmen aktualisieren (zum Laden der Seite)
updateVoices();

In diesem Codeabschnitt haben wir folgende Anpassungen vorgenommen:

1. Wir haben die neuen DOM-Elemente volume, rate und voice-select ausgewählt.
2. Wir haben eine updateVoices-Funktion erstellt, um die verfügbaren Stimmen in der Dropdown-Liste anzuzeigen.
3. Wir haben der synth-Instanz einen Event Listener hinzugefügt, der die updateVoices-Funktion aufruft, wenn sich die verfügbaren Stimmen ändern.
4. Wir haben die speakText-Funktion aktualisiert, um die ausgewählte Stimme, Lautstärke, Geschwindigkeit und Sprache zu berücksichtigen.

Schritt 3: Testen der erweiterten Text-to-Speech-Funktion

Öffne die HTML-Datei erneut in einem Browser und teste die erweiterten Funktionen. Gib einen Text in das Textfeld ein und passe die Lautstärke, Geschwindigkeit und Sprache mithilfe der neuen Steuerelemente an. Klicke auf die Schaltfläche "Sprich den Text", um die Text-to-Speech-Funktion zu testen. Du solltest hören, wie der eingegebene Text mit den angepassten Einstellungen vorgelesen wird.

Fazit

Herzlichen Glückwunsch! Du hast die Text-to-Speech-Funktion deiner Website erfolgreich erweitert, um die Lautstärke, Geschwindigkeit und Sprache der Sprachausgabe anzupassen. Die SpeechSynthesis Web API bietet viele weitere Möglichkeiten zur Anpassung und Verbesserung der Text-to-Speech-Funktion.

Du kannst weiterhin neue Funktionen und Verbesserungen hinzufügen, um die Benutzerfreundlichkeit deiner Website zu erhöhen und den Anforderungen deiner Besucher*innen gerecht zu werden. Nutze diese erweiterten Funktionen als Ausgangspunkt, um noch tiefer in die Möglichkeiten der SpeechSynthesis Web API einzutauchen und deine Kenntnisse in der Webentwicklung weiter zu vertiefen.

Viel Erfolg bei deinen zukünftigen Projekten und beim Experimentieren mit der SpeechSynthesis Web API!