1

Tutorial: Spracherkennung für jede Webseite mit HTML5

speech-webkit-demoSeit Apples Siri ist das Thema Spracherkennung/Sprachsteuerung wieder in den Fokus der Masse gerückt.
Doch Siri ist längst nicht die einzige funktionierende Sprachsteuerung. Es gab vor Siri schon etliche, teils gar nicht schlechte, Umsetzungen von Sprachsteuerungen und es gibt auch jetzt weit mehr als nur Siri.

Wie ihr mit nur einer Zeile Code eine Spracherkennung auch in eure Webseite einbauen könnt, möchte ich euch heute zeigen.
Das Ganze basiert auf HTML5 und stellt sich als ein
input-Element dar. Und so geht’s:

<input type="text" x-webkit-speech />

Wer die Spracherkennung mal in Aktion sehen will, kann das hier tun.
Den einzigen Wermutstropfen, den es gibt, ist dass das diese Spracherkennung bisher nur in Google Browser Chrome implementiert ist. Dennoch könnte ich mir vorstellen, die Spracherkennung zum Beispiel für das Suchfenster auf meinem Blog zu nutzen.
Und damit Nutzer anderer Browser dann nicht ganz ohne Suche dastehen, könnte man per Browserweiche für alle anderen Nutzer ja immer noch das klassische Textinputfeld anzeigen lassen.

Was haltet ihr davon? Wird sich die Spracherkennung durchsetzen? Würdet ihr dieses System hier auf euren Webseiten verwenden?

Viele Grüße,
Raffi

  1. [...] Die Spezifikationen für die “HTML Speech Input API Specifikation” findet ihr auf dieser Seite des W3C. Ein etwas kürzeres Tutorial findet ihr hier bei der Code Bude. [...]