1

Tutorial: Spracherkennung für jede Webseite mit HTML5

Veröffentlicht am 9. Januar 2012 von

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

3

JavaScript Progressbar mit HTML5 Canvas

Veröffentlicht am 30. Juni 2011 von

JavaScript Progressbar

Da ich für ein zukünftiges Webprojekt eine Progressbar brauchte, wenn möglich auf JavaScript basierend, und ich keine Komponente finden konnte, die meinen Vorstellungen entspricht, habe ich mich entschieden, meine eigene Progressbar zu schreiben.

Umgesetzt wurde das Projekt in Javascript unter Zuhilfenahme des HTML5 Canvas Elements. Dadurch kommt die Progressbar vollständig ohne irgendwelche Bilddateien aus, wie es zumeist bei anderen JS/CSS Lösungen der Fall ist. Die Progressbar kann momentan einen Status von 1 bis 100 Prozent anzeigen. Fehleingaben werden abgefangen und es wird, auch optisch, eine Errormeldung angezeigt.

Da ich meine Entwicklungen gerne teile und sicherlich nicht der Oberprofi in JavaScript bin, stelle ich euch die Progressbar natürlich zur Verfügung. Für Kritik, Lob und Verbesserungsvorschläge bin ich wie immer jederzeit offen.

Eine Demo der Progressbar könnt ihr euch hier anschauen. Denn Quellcode findet ihr hier: pbar.js
Nachfolgend zeige ich euch noch schnell, wie man die Progressbar verwenden kann.

In eurer HTML-Seite müsst ihr zuerst das Progressbar-Script, sowie die jQuery Library einbinden. Danach benötigt ihr ein Canvas-Element, dessen Größenangaben gleichzeitig auch bestimmen, wie groß eure Progressbar gerendert wird. Zu guter Letzt müsst ihr die Progressbar noch zeichnen lassen.

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<script type="text/javascript" src="pbar.js"></script>
	</head>
	<body>
		<canvas id="cvs" width="800" height="50">
			Dein Browser kann diese Grafik nicht darstellen.
		</canvas>
		<script>
		drawCanvas(55,'cvs'); //Progressbar mit 55% in Canvas mit ID=cvs rendern
		</script>
	</body>
</html>

Das war’s auch schon. Ich hoffe der ein oder andere von euch findet seine Freude daran!

Viele Grüße,
Raffi