Spracheingabe für Etherpad Lite – Wie funktioniert das eigentlich?

5 Jun

Spracheingabe für Etherpad Lite – Wie funktioniert das eigentlich?

Vor Kurzem habe ich ein Plugin für die Spracheingabe in Etherpad Lite veröffentlicht. Nach dem Installieren erscheint in der Button-Leiste ein weiterer Button, der bei Klick darauf die Spracherkennung startet. Doch wie funktioniert das eigentlich? Das will ich im Folgenden erläutern.

Zuerst einmal: Spracheingabe funktioniert derzeit nur in Google Chrome. Andere Browser werden bald sicherlich nachziehen.

Um einem Eingabefeld die Spracheingabe beizubringen, muss dem Eingabefeld nur das Attribut x-webkit-speech hinzugefügt werden. Daraufhin erscheint im Eingabefeld ein Mikrofon-Symbol, das nach einem Klick die Sprachaufzeichnung startet.

Das ganze funktioniert technisch genauso wie „Siri“ auf einem iPhone: die Aufnahme wird an einen Google-Server gesendet und dort ausgewertet. Der erkannte Text erscheint daraufhin im Eingabefeld.

Das versteckte Eingabefeld

Das Problem ist nun: wie schafft man es, dass nach einem Klick auf einen „normalen“ Button die Sprachaufnahme gestartet wird? Die Idee dazu habe ich bei wysihtml5 gefunden: Das Eingabefeld muss über dem eigentlichen Button so positioniert werden, dass das Mikrofon-Symbol genau über dem Button liegt. Anschließend wird das Eingabefeld mit opacity: 0; versteckt. Klicken wir also auf den Button für Spracheingabe, klicken wir eigentlich auf das Mikrofon im Eingabefeld.

Wird nun der gesprochene Text erkannt, erscheint er im versteckten Eingabefeld. Diesen liest mein Plugin dann aus, löscht ihn aus dem Eingabefeld und fügt ihn anschließend ins Pad ein.

Installiert werden kann das Plugin so: npm install ep_speechinput

Weiterführende Links:
ep_speechinput bei npm
ep_speechinput bei Github
Demo von Google
Speech Input API Specification

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: