How to add speech recognition to any website with HTML5

speech-webkit-demoSince Apple’s Siri voice recognition/voice control has again got back in focus of the crowd.  But Siri is far from being the only working voice control solution. There were already a number implementations before, some good some bad, and there is still far more than just Siri.
How you can “install” a voice recognition into your website with just one line of code, is what I want to show you today. The whole thing is based on HTML5 and is established as an  input element-tag.
And this is how it works:

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

Who wants to see the speech recognition in action, should go over there.  The only downside of this solution is the fact, that this speech recognition is far from cross-browser compatible. So at the moment it’s only implemented in Google’s Chrome browser. However, I could imagine […]

Tutorial: How to create a simple HTML5 JavaScript based progress bar

JavaScript Progressbar
Since I needed a javascript based progress bar for a Web project and I could not find a component that meets my expectations, I decided to write my own progressbar.
The project was implemented in JavaScript with help of the HTML5 canvas element. The progress bar gets along without any image files, as it is usually the case with other JS / CSS progress bar solutions. By default it can handle 100 states (0-100%) and input errors will be caught and visualized.
Since I like to share my developments I present you the progressbar of course. I’m always open for criticism, praise and suggestions.
For a demo / example click here. The source can be found over here: pbar.js
Below I will show you quickly how to use the progressbar.
At first you have to embed the progress bar script and […]