Blog

Spracherkennung und Sprachsynthese im Browser

Léon Rodenburg

Léon Rodenburg

Aktualisiert Oktober 21, 2025
5 Minuten

Mit dem jüngsten Aufschwung von Siri, Google Assistant und Amazons Alexa sind Spracherkennung und -synthese zu einem immer wichtigeren Werkzeug im Werkzeugkasten der Entwickler geworden. Die Arbeit mit Sprachdaten kann nicht nur die Zugänglichkeit Ihrer Anwendung verbessern. Sie kann auch die Konversionsrate in Ihrem Webshop erhöhen, insbesondere wenn Kunden über ihr Mobiltelefon einkaufen. Native Apps haben in diesem Bereich einen großen Vorteil, denn mit dem SiriKit von Apple und dem Assistant SDK von Google können Sie in wenigen Minuten bis Stunden loslegen.

Bei Browsern sieht die Sache anders aus. Wenn wir die nativen Apps einmal außer Acht lassen, scheinen die einfachen Websites (oder progressiven Web-Apps) deutlich hinterherzuhinken. Wie viele Websites können Sie auf Anhieb nennen, die Ihnen die Möglichkeit bieten, mit Ihrer Stimme zu suchen? Mir fällt da nur eine Handvoll ein. Liegt es daran, dass die Menschen Angst haben, mit ihren Laptops zu sprechen, es aber gut finden, ihren Smartphones Geschichten zu erzählen? Wahrscheinlich nicht. Das größte Problem ist, dass es die einfachen Lösungen, die Bibliotheken wie SiriKit bieten, für das Web nicht gibt. Oder sind sie das?

Für die Spracherkennung und -synthese benötigen Sie eine riesige Menge an Trainingsdaten für alle Arten von Sprachen in allen möglichen Umgebungen. Als Einzelkämpfer oder kleines Startup ist es nahezu unmöglich, eine solche Menge an Daten zu sammeln. Also wenden Sie sich an die Unternehmen, die es bereits geschafft haben, ihre neuronalen Netze zu trainieren: die Googles und Amazons. Für einen geringen Betrag pro transkribierter Audiosekunde können Sie Ihre Audiodateien an Googles Cloud Speech-to-Text API oder Amazon Transcribe senden. Diese transkribieren die Audiodateien in einer Reaktionszeit von weniger als einer Sekunde. Die Technologie ist zwar cool, aber die Einrichtung kann mühsam sein, vor allem, wenn Sie den im Browser enthaltenen Audiorecorder verwenden möchten. Das Aufnahmeformat des Browsers stimmt nicht immer mit den Vorgaben der Cloud-Transkriptoren überein. Daher müssen Sie ein anderes Backend ansteuern, um die Dateien in ein funktionierendes Format umzuwandeln. Ja, ich weiß, igitt.


Als ich vor kurzem mit einigen meiner Kollegen ein Proof of Concept für die Sprachsuche implementieren musste, stießen wir auf eine Spezifikation für die Spracherkennung aus dem Jahr 2012 (!), die Web Speech API Specification. Darin fanden wir mehrere Schnittstellen wie und , die genau das zu tun schienen, wonach wir suchten. Eine weitere Runde bei Google brachte uns auf die folgende MDN-Seite zur Web Speech API. Zu unserer großen Überraschung zeigte die Tabelle der Browserunterstützung Folgendes an:

[caption id="attachment_26057" align="aligncenter" width="2128"] Desktop-Unterstützung für Web Speech API[/caption]

Was Sie nicht sagen! Chrome wird seit etwa 2013 unterstützt, als Chrome 25 veröffentlicht wurde. Wenn ich so darüber nachdenke, ist es sogar noch merkwürdiger, dass so wenige Websites die nativen APIs nutzen, die von Chrome, Firefox und Edge unterstützt werden. Ohne Rücksicht auf den Teil der Nutzer, der noch den Internet Explorer verwendet, setzten wir unsere Reise fort.


Wir haben unsere Implementierung auf ein Repository gestützt, das die MDN-Seite begleitet(hier verfügbar). Nachdem wir es ein wenig verkleinert hatten, sah unsere Implementierung in etwa wie folgt aus:

Und es hat funktioniert! Dieses Stück Code fragt Sie nach 3 Sekunden nach Ihrer Erlaubnis, das Mikrofon zu benutzen. Wenn Sie auf 'Erlauben' klicken, wird er sich anhören, wie gut Sie Bahasa Indonesia aussprechen können. Schließlich protokolliert er die transkribierten Ergebnisse in Ihrer Konsole. Wenn Ihr Bahasa eingerostet ist, können Sie natürlich den Sprachcode in Zeile 6 in eine der unterstützten Sprachen ändern, die in dieser Demo gezeigt werden. Beachten Sie, dass dies die in Chrome verfügbaren Sprachen sind, andere Browser haben möglicherweise eine andere Liste.

Die Web Speech API scheint bei der Transkription von Benutzerbefehlen in verschiedenen Sprachen recht gute Arbeit zu leisten. Standardmäßig wird die Aufnahme gestoppt, sobald der Benutzer aufhört zu sprechen. Wenn Sie längere Audiostücke transkribieren möchten, können Sie recognition.continuous auch auf true einstellen. In Produktionsumgebungen sollten Sie zunächst prüfen, ob die SpeechRecognition-Schnittstelle unterstützt wird und wie Sie mit deren Fehlen umgehen. Außerdem könnte es ratsam sein, die Aufnahme erst zu starten, wenn der Benutzer auf eine Schaltfläche klickt, anstatt sie mit window.setTimeout() auszulösen. Aber das überlasse ich Ihnen als Übung.


Die Spracherkennung ist mit der Web Speech API ein Kinderspiel. Die Sprachsynthese ist sogar noch einfacher zu implementieren, was Sie hier unter Beweis stellen können. Wenn Sie Ihre Website mit Spracherkennung ausstatten, können Sie das Benutzererlebnis bei der Suche oder beim Einkaufen deutlich verbessern. Unerfahrene Kunden möchten vielleicht ihre Absicht in natürlicher Sprache ausdrücken und beschreiben, was sie tun oder finden möchten. Bei herkömmlichen Benutzeroberflächen ist dies oft nicht möglich. Die meisten Sucheingaben zwingen Sie dazu, eine verkürzte Sprache einzutippen, die nicht einmal annähernd einem grammatikalisch korrekten Satz oder einer Handlung ähnelt - ein Problem, das die Spracherkennung lösen könnte. Die Sprachsynthese wiederum kann unter anderem im Bereich der Chatbots, der Benachrichtigungen oder der Nachrichten helfen. Kurz gesagt: Intelligente Assistententechnologien können uns nicht nur zu Hause oder auf unseren Telefonen helfen, sondern wir können sie auch überall im Internet einsetzen, wo die natürliche Sprache ein gutes Transportmittel für die Kommunikation mit Ihren Benutzern ist. Wie werden Sie sie also in Ihrer App einsetzen?

Verfasst von

Léon Rodenburg

Léon Rodenburg is a full stack development consultant at Xebia. He has a background in Computer Science and Sinology and is always on the lookout for the crossroads between the two. Having lived and studied in China for quite some time, he has put his knowledge of the Chinese language into practice by experiencing on- and offline daily life in Beijing like a local.

Contact

Let’s discuss how we can support your journey.