Sprachausgabe im Web mit der Web Speech API

erstellt am: 12.11.2024 | Kategorien: Webentwicklung | Schlagworte: Javascript • Web Speach API

Wenn du wie ich begeisterter Entwickler bist und gerne neue Web-Technologien ausprobierst, dann ist die Web Speech API eine jener Schnittstellen, die auf den ersten Blick einfach wirken, aber eine beeindruckende Tiefe bieten.

Als ich das erste Mal die speechSynthesis-API in meinem Browser ausprobierte, war ich fasziniert, wie einfach es ist, einen Text mit der Stimme des Computers auszugeben. Die Kernfunktion ist dabei SpeechSynthesisUtterance, die im Wesentlichen dafür sorgt, dass ein Text in hörbare Sprache umgewandelt wird. Mit ein paar Zeilen Code lässt sich so eine Anwendung erstellen, die Texte “vorliest”.

Hier ist die Funktion, die ich verwendet habe:

function speakText(text) {
    if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(text);
        const systemLanguage = navigator.language || 'en-US';
        utterance.lang = systemLanguage;

        const voices = window.speechSynthesis.getVoices();
        const systemVoice = voices.find(voice => voice.lang === systemLanguage);
        if (systemVoice) {
            utterance.voice = systemVoice;
        }

        window.speechSynthesis.speak(utterance);
    } else {
        console.error('Speech synthesis is not available in this browser.');
    }
}

Was macht diese Funktion genau?

Diese Funktion speakText prüft zunächst, ob die speechSynthesis-Funktion im aktuellen Browser verfügbar ist. Wenn ja, wird ein neues SpeechSynthesisUtterance-Objekt mit dem übergebenen Text erstellt. Das Objekt wird anschließend konfiguriert:

• Sprachauswahl: Die Sprache wird anhand der Browsereinstellung (navigator.language) festgelegt, um sicherzustellen, dass die Sprache dem Benutzerumfeld entspricht.
• Stimmauswahl: Das Skript durchsucht die verfügbaren Stimmen (window.speechSynthesis.getVoices()) und wählt eine, die zur Systemsprache passt.
• Wiedergabe: Mit window.speechSynthesis.speak() wird der Text schließlich abgespielt.

Wenn die Funktion in einem Browser ausgeführt wird, der keine Unterstützung für speechSynthesis bietet, gibt es eine Fehlermeldung in der Konsole.

Möglichkeiten und praktische Anwendungen

Die speechSynthesis-API öffnet eine Vielzahl von Türen für innovative Projekte:

• Barrierefreiheit: Websites können so gestaltet werden, dass sie Inhalte für Nutzer mit Sehbehinderungen vorlesen.
• Lernanwendungen: Sprachfunktionen sind ideal für Sprachlern-Apps oder interaktive Bildungsanwendungen.
• Assistenten und Chatbots: In Kombination mit anderen APIs (z.B. Web Speech Recognition für Spracherkennung) lassen sich komplette sprachbasierte Assistenten umsetzen.

Ein großer Pluspunkt ist, dass die API auf einfache Weise in bestehenden Websites oder Apps integriert werden kann und keine zusätzlichen Bibliotheken benötigt. Auch die Möglichkeit, die Sprache dynamisch auszuwählen, ist eine feine Sache, insbesondere wenn man mit einer internationalen Nutzerbasis arbeitet.

Grenzen und Herausforderungen der API

Wie bei jeder Technologie gibt es auch bei der Web Speech API Einschränkungen:

• Browserunterstützung: Die speechSynthesis-API ist nicht in allen Browsern und Versionen verfügbar. Während sie in modernen Versionen von Chrome, Firefox und Safari gut funktioniert, können ältere Versionen Probleme bereiten.
• Stimmenqualität und Anzahl der Stimmen: Je nach Betriebssystem und Browser können die verfügbaren Stimmen stark variieren. Einige Benutzer werden feststellen, dass sie nur eine eingeschränkte Auswahl an Stimmen haben, während andere eine Vielzahl von Stimmen mit unterschiedlichen Akzenten und Geschlechtern nutzen können.
• Latenzzeiten: Die Methode window.speechSynthesis.getVoices() liefert die verfügbaren Stimmen asynchron, was dazu führen kann, dass die Stimmenliste nicht sofort beim ersten Aufruf verfügbar ist. Ein onvoiceschanged-Eventlistener kann helfen, diese Hürde zu überwinden.
• Benutzererfahrung: Obwohl die API robust ist, kann das Ergebnis je nach genutzter Stimme monoton oder wenig natürlich klingen. Hier helfen Feinjustierungen in den Eigenschaften wie pitch, rate, und volume, um die Sprachausgabe zu optimieren.

Ich habe in Kombination mit der weniger unterstützten Spracherkennung der Web Speach API folgende Demo gebaut:

Demo Sprachein- und -ausgabe über Web Speach API

Als erster einen Kommentar schreiben.