Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Die Web Speech API bietet zwei unterschiedliche Funktionalitäten — Spracherkennung und Sprachsynthese (auch bekannt als Text-to-Speech oder TTS) — die interessante Möglichkeiten für Barrierefreiheit und Steuerung eröffnen. Dieser Artikel bietet eine Einführung in beide Bereiche, zusammen mit Demos.
Spracherkennung umfasst das Empfangen von Audio von einem Mikrofon eines Geräts (oder von einem Audiotrack), das dann von einem Spracherkennungsdienst geprüft wird. Wenn der Dienst ein Wort oder eine Phrase erfolgreich erkennt, gibt er eine Textzeichenfolge (oder eine Liste von Zeichenfolgen) zurück, die Sie verwenden können, um weitere Aktionen zu initiieren.
Die Web Speech API bietet hierfür eine Hauptsteuerungsschnittstelle — SpeechRecognition — und mehrere zugehörige Schnittstellen zur Darstellung von Ergebnissen.
In der Regel wird das Spracherkennungssystem des Geräts des Nutzers für die Spracherkennung verwendet. Die meisten modernen Betriebssysteme verfügen über ein Spracherkennungssystem zur Ausgabe von Sprachbefehlen, wie beispielsweise Dictation auf macOS oder Copilot auf Windows.
Standardmäßig beinhaltet die Verwendung der Spracherkennung auf einer Webseite eine serverbasierte Erkennungs-Engine. Ihr Audio wird an einen Webdienst zur Erkennungsverarbeitung gesendet, sodass es offline nicht funktioniert.
Um die Privatsphäre und Leistung zu verbessern, können Sie angeben, dass die Spracherkennung auf dem Gerät durchgeführt werden soll. Dies stellt sicher, dass weder das Audio noch die transkribierte Sprache an einen Drittanbieterdienst zur Verarbeitung gesendet werden. Wir behandeln die On-Device-Funktionalität im Abschnitt On-Device-Spracherkennung ausführlicher.
Um die Verwendung der Spracherkennung zu demonstrieren, haben wir eine Beispiel-App namens Speech color changer erstellt. Nachdem Sie die Start recognition-Taste gedrückt haben, geben Sie ein HTML-Farbkeyword an. Die Hintergrundfarbe der App ändert sich dann zu dieser Farbe.
Um die Demo auszuführen, navigieren Sie zur Live-Demo-URL in einem unterstützenden Browser.
Das HTML und CSS für die App sind grundlegend. Es gibt einen Titel, einen Anleitungsabsatz (<p>), eine Steuerung <button> und einen Ausgabebereich, in dem wir diagnostische Nachrichten anzeigen, einschließlich der vom App erkannten Worte.
Das CSS sorgt für ein einfaches, responsives Styling, sodass es auf allen Geräten gut aussieht.
Schauen wir uns das JavaScript etwas genauer an.
Einige Browser unterstützen derzeit die Spracherkennung mit präfixierten Eigenschaften. Daher haben wir zu Beginn unseres Codes diese Zeilen eingefügt, um sowohl präfixierte als auch nicht präfixierte Versionen zu unterstützen:
Der nächste Teil unseres Codes definiert einige Beispiel-Farben, die wir in die UI drucken, um den Benutzern eine Vorstellung davon zu geben, was sie sagen sollen:
Als nächstes definieren wir eine Spracherkennung-Instanz, um die Erkennung in unserer App zu steuern. Wir tun dies, indem wir den SpeechRecognition() Konstruktor verwenden.
Wir setzen dann einige Eigenschaften der Erkennungsinstanz:
Nach dem Erfassen von Referenzen auf den Ausgabebereich, das <html>-Element, den Anleitungsabsatz und den <button>, implementieren wir einen onclick-Handler. Wenn ein Benutzer die Taste drückt, startet der Spracherkennungsservice durch Aufrufen von SpeechRecognition.start(). Wir haben auch die forEach()-Methode verwendet, um farbige Indikatoren auszugeben, die zeigen, welche Farben Benutzer probieren können zu sagen.
Sobald die Spracherkennung gestartet wurde, stehen mehrere Ereignishandler zur Verfügung, die Sie verwenden können, um Ergebnisse und andere verwandte Informationen abzurufen (siehe Events für SpeechRecognition). Das gebräuchlichste ist das result-Ereignis, das ausgelöst wird, nachdem ein erfolgreiches Ergebnis empfangen wurde:
Die zweite Zeile ist etwas komplex, daher erklären wir hier jeden Teil:
Wir verwenden auch das speechend-Ereignis, um den Spracherkennungsservice zu stoppen (mit SpeechRecognition.stop()) nachdem ein einzelnes Wort erkannt wurde:
Die letzten zwei Handler decken Fälle ab, in denen der gesprochene Begriff nicht erkannt wird oder ein Fehler mit der Erkennung auftritt. Das nomatch-Ereignis soll den ersten Fall behandeln, obwohl die Erkennungs-Engine in den meisten Fällen etwas zurückgibt, auch wenn es unverständlich ist:
Das error-Ereignis behandelt Fälle, in denen ein tatsächlicher Fehler mit der Erkennung auftritt — die SpeechRecognitionErrorEvent.error-Eigenschaft enthält den zurückgegebenen Fehler:
Die Spracherkennung wird in der Regel mit einem Online-Service durchgeführt. Das bedeutet, dass eine Audioaufnahme an einen Server zur Verarbeitung gesendet wird, und die Ergebnisse dann an den Browser zurückgegeben werden. Dies hat ein paar Probleme:
Um diese Probleme zu mildern, ermöglicht die Web Speech API, dass Sie angeben, dass die Spracherkennung direkt im Browser auf dem Gerät durchgeführt werden soll. Dies erfordert einen einmaligen Sprachpaket-Download für jede Sprache, die Sie erkennen möchten; sobald installiert, steht die Funktionalität offline zur Verfügung.
Dieser Abschnitt erklärt, wie man die On-Device-Spracherkennung verwendet.
Zur Demonstration der On-Device-Spracherkennung haben wir eine Beispiel-App namens On-device speech color changer erstellt (Demo live ausführen).
Diese Demo funktioniert ähnlich wie die zuvor diskutierte Online-Sprach-Farbwechsler-Demo, mit unten aufgeführten Unterschieden.
Um anzugeben, dass die On-Device-Verarbeitung des Browsers verwendet werden soll, setzen Sie die Eigenschaft SpeechRecognition.processLocally auf true, bevor Sie die Spracherkennung starten (der Standardwert ist false):
Damit die On-Device-Spracherkennung funktioniert, muss der Browser ein Sprachpaket für die Sprache installiert haben, die Sie erkennen möchten. Wenn Sie die start()-Methode ausführen, nachdem processLocally = true festgelegt wurde, aber das richtige Sprachpaket nicht installiert ist, schlägt der Funktionsaufruf mit einem language-not-supported Fehler fehl.
Um das richtige Sprachpaket zu installieren, befolgen Sie diese zwei Schritte:
Diese Schritte werden im folgenden click-Ereignishandler der App-Steuerung <button> behandelt:
Die available()-Methode nimmt ein Optionsobjekt mit zwei Eigenschaften:
Wenn diese Methode ausgeführt wird, gibt sie eine Promise zurück, die mit einem enumerierten Wert aufgelöst wird, der die Verfügbarkeit der angegebenen Sprachen anzeigt. In unserer Demo testen wir für drei Bedingungen:
Die install()-Methode funktioniert ähnlich wie die available()-Methode, außer dass ihr Optionsobjekt nur das langs-Array enthält. Wenn sie ausgeführt wird, beginnt sie mit dem Herunterladen aller Sprachpakete für die in langs angegebenen Sprachen und gibt ein Promise zurück, das mit einem Boolean-Wert aufgelöst wird, der angibt, ob die angegebenen Sprachpakete erfolgreich heruntergeladen und installiert wurden (true) oder nicht (false).
Für diese Demo drucken wir eine Diagnose-Nachricht, um die Erfolgs- und Misserfolgsfälle anzuzeigen. In einer vollständigeren App würden Sie wahrscheinlich die Steuerungen während des Downloadprozesses deaktivieren und sie nach der Auflösung des Versprechens wieder aktivieren.
Die Verwendung der available()- und install()-Methoden wird durch die on-device-speech-recognition Permissions-Policy gesteuert. Speziell, wenn eine definierte Richtlinie die Nutzung blockiert, schlagen alle Versuche, diese Methoden aufzurufen, fehl.
Der Standard-Allowlist-Wert für on-device-speech-recognition ist self. Das bedeutet, dass Sie sich keine Sorgen über das Anpassen der Richtlinie machen müssen, es sei denn, Sie versuchen, diese Methoden in eingebetteten Cross-Origin-Dokumenten zu verwenden oder möchten ihre Verwendung explizit deaktivieren.
In der ursprünglichen Speach-Color-Wechsler-Demo haben wir zusätzliche Zeilen hinzugefügt, um Browser zu behandeln, die die Web Speech API nur mit herstellerspezifischen Präfix-Eigenschaften unterstützen (siehe den Abschnitt Präfix-Eigenschaften für weitere Details).
In der On-Device-Version der Demo ist kein Präfix-Handhabungs-Code erforderlich, da die Implementierungen, die diese Funktionalität unterstützen, dies ohne Präfixe tun.
Es wird Zeiten geben, in denen ein Spracherkennungsdienst ein bestimmtes Wort oder einen bestimmten Satz nicht korrekt erkennt. Dies tritt am häufigsten bei fachspezifischen Begriffen auf (wie medizinisches oder wissenschaftliches Vokabular), Eigennamen, ungewöhnlichen Phrasen oder Wörtern, die sich ähnlich wie andere Wörter anhören und daher möglicherweise falsch identifiziert werden.
Zum Beispiel fanden wir während des Tests heraus, dass unser On-device speech color changer Probleme hatte, die Farbe azure zu erkennen - sie gab immer wieder Ergebnisse wie "as you" zurück. Andere Farben, die häufig falsch erkannt wurden, waren khaki ("car key"), tan und thistle ("this all").
Um solche Probleme zu mildern, ermöglicht die Web Speech API, dass Sie Hinweise an die Erkennungs-Engine geben, um Phrasen hervorzuheben, die wahrscheinlich gesprochen werden, und auf die die Engine voreingenommen sein sollte. Dies macht es wahrscheinlicher, dass diese Wörter und Phrasen korrekt erkannt werden.
Sie können dies erreichen, indem Sie ein Array von SpeechRecognitionPhrase-Objekten als den Wert der SpeechRecognition.phrases-Eigenschaft festlegen. Jedes SpeechRecognitionPhrase-Objekt enthält:
In unserer "On-device speech color changer"-Demo handhaben wir dies, indem wir ein Array von zu verstärkenden Phrasen und deren Verstärkungswerten erstellen:
Diese müssen als ObservableArray von SpeechRecognitionPhrase-Objekten dargestellt werden. Wir handhaben dies, indem wir das ursprüngliche Array abbilden, um jedes Arrayelement in ein SpeechRecognitionPhrase-Objekt mit dem SpeechRecognitionPhrase() Konstruktor zu konvertieren:
Nachdem wir die SpeechRecognition-Instanz erstellt haben, fügen wir unsere kontextuellen Beeinflussungsp
hrasen hinzu, indem wir das phraseObjects-Array als Wert der SpeechRecognition.phrases-Eigenschaft festlegen:
Das Phrasenarray kann wie ein normales JavaScript-Array modifiziert werden, zum Beispiel durch das dynamische Hinzufügen neuer Phrasen:
Mit diesem Code stellten wir fest, dass die problematischen Farbstichworte genauer erkannt wurden als zuvor.
Die Sprachsynthese (auch bekannt als Text-to-Speech oder TTS) umfasst das Umsetzen von Text, der in einer App enthalten ist, in Sprache und das Abspielen über einen Lautsprecher oder den Audioausgang eines Geräts.
Die Web Speech API bietet eine Hauptsteuerungsschnittstelle für diese — SpeechSynthesis — sowie eine Reihe eng verwandter Schnittstellen zur Darstellung des zu synthetisierenden Textes (bekannt als Äußerungen), der für die Äußerung zu verwendenden Stimmen usw. Auch hier haben die meisten Betriebssysteme irgendein Sprachsynthesesystem, das von der API für diese Aufgabe verwendet wird, sofern verfügbar.
Um zu demonstrieren, wie Sie die Web-Sprachsynthese verwenden, haben wir eine Beispiel-App namens Speech synthesizer erstellt. Sie hat ein Eingabefeld, in das Sie den zu synthetisierenden Text eingeben können. Sie können die Geschwindigkeit und Tonhöhe anpassen und auch eine Stimme im Dropdown-Menü auswählen, die für den gesprochenen Text verwendet werden soll. Nachdem Sie Ihren Text eingegeben haben, drücken Sie Enter/Return oder klicken Sie auf die Taste Play, um sich den Text laut vorlesen zu lassen.
Um die Demo auszuführen, navigieren Sie zur Live-Demo-URL in einem unterstützenden Browser.
Das HTML und CSS für diese App sind ziemlich grundlegend. Es gibt einen Titel, einige Benutzungsanweisungen und ein Formular mit grundlegenden Steuerungen. Das <select>-Element ist zunächst leer; es wird über JavaScript mit <option>s gefüllt (später behandelt).
Untersuchen wir das JavaScript, das diese App antreibt.
Zuerst erfassen wir Referenzen für alle DOM-Elemente, die an der Benutzeroberfläche beteiligt sind, aber interessanterweise erfassen wir eine Referenz zu Window.speechSynthesis. Dies ist der Einstiegspunkt der API — sie gibt eine Instanz von SpeechSynthesis zurück, die Steuerungsschnittstelle für die Web-Sprachsynthese.
Um das <select>-Element mit den verschiedenen Stimmoptionen zu füllen, die das Gerät zur Verfügung hat, haben wir eine populateVoiceList()-Funktion geschrieben. Zuerst rufen wir SpeechSynthesis.getVoices() auf, das eine Liste aller verfügbaren Stimmen zurückgibt, dargestellt durch SpeechSynthesisVoice-Objekte. Wir durchlaufen diese Liste — für jede Stimme erstellen wir ein <option>-Element, setzen dessen Textinhalt so, dass der Name der Stimme angezeigt wird (ausgelesen von SpeechSynthesisVoice.name), die Sprache der Stimme (ausgelesen von SpeechSynthesisVoice.lang) und -- DEFAULT, wenn die Stimme die Standardstimme für die Synthese-Engine ist (überprüft, indem wir prüfen, ob SpeechSynthesisVoice.default true zurückgibt).
Wir erstellen auch data--Attribute für jede Option, die den Namen und die Sprache der zugehörigen Stimme enthalten, sodass wir später einfach darauf zugreifen können, und fügen die Optionen dann als Kinder der Auswahl hinzu.
Ältere Browser unterstützen das voiceschanged-Ereignis nicht und geben einfach eine Liste von Stimmen zurück, wenn SpeechSynthesis.getVoices() ausgelöst wird. Auf anderen wiederum, wie Chrome, muss man warten, bis das Ereignis auslöst, bevor man die Liste füllt. Um beide Fälle abzudecken, führen wir die Funktion wie gezeigt aus:
Als nächstes erstellen wir einen Ereignishandler, um den in das Textfeld eingegebenen Text sprechen zu lassen. Wir verwenden einen onsubmit-Handler auf dem Formular, damit die Aktion beim Drücken von Enter/Return stattfindet. Wir erstellen zuerst eine neue Instanz von SpeechSynthesisUtterance() mit dessen Konstruktor — dieser wird mit dem Wert des Texteingabefeldes als Parameter übergeben.
Als nächstes müssen wir herausfinden, welche Stimme verwendet werden soll. Wir verwenden die HTMLSelectElement selectedOptions-Eigenschaft, um das derzeit ausgewählte <option>-Element zurückzugeben. Wir verwenden dann das data-name-Attribut dieses Elements, um das SpeechSynthesisVoice-Objekt zu finden, dessen Name mit dem Wert dieses Attributs übereinstimmt. Wir setzen das übereinstimmende Sprachobjekt als den Wert der SpeechSynthesisUtterance.voice-Eigenschaft.
Schließlich setzen wir die SpeechSynthesisUtterance.pitch und die SpeechSynthesisUtterance.rate auf die Werte der entsprechenden Bereichsformularelemente. Dann, mit allen notwendigen Vorbereitungen, starten wir die Äußerung, indem wir SpeechSynthesis.speak() aufrufen und die SpeechSynthesisUtterance-Instanz als Parameter übergeben.
Im letzten Teil des Handlers schließen wir ein pause-Ereignis ein, um zu demonstrieren, wie SpeechSynthesisEvent gut genutzt werden kann. Wenn SpeechSynthesis.pause() aufgerufen wird, wird eine Nachricht zurückgegeben, die die Zahl des Zeichens und den Namen meldet, bei dem die Sprache pausiert wurde.
Schließlich rufen wir blur() auf dem Texteingabefeld auf. Dies dient hauptsächlich dazu, die Tastatur auf Firefox OS auszublenden.
Der letzte Teil des Codes aktualisiert die pitch/rate-Werte, die in der Benutzeroberfläche angezeigt werden, jedes Mal, wenn die Schiebereglerpositionen bewegt werden.
Der Bauplan für ein besseres Internet.
Besuche die gemeinnützige Muttergesellschaft der Mozilla Corporation, die Mozilla Foundation.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.