Monday, February 18, 2013

The new Web Speech API => a Flash Cards Application!

In the last couple of months I've been helping my daughter memorize her multiplication and division tables.  To help her get faster we've used traditional flash cards, which work pretty well.  One day I thought to myself "a computer could easily listen to a student's voice and show appropriate cards...  it could even keep score."  I looked around to see if there were any JavaScript libraries that worked with the microphone to provide speech recognition, but didn't find anything worthwhile.  The best I could get was to use Emscripten to port a C library.  I put it on the back burner and worked on some other things for awhile.  

Then I saw a post about Google Chrome version 25.  In it is implemented the new Web Speech API.  HTML5Rocks did an article covering some of the capabilities here.  In short, the API allows you to add speech recognition to your apps!  Just what I needed!

So off to work on the app...  The API is pretty simple.  These are the steps to use it:
  1. You create an instance of the object, via new webkitSpeechRecognition()
  2. Set continuous to true or false to specify whether it should stop after giving a result or keep listening continuously.
  3. Set interminResults to true or false to specify if you want only the final result or all results.
  4. Provide callbacks via onstart, onresult, onerror, and onend.
I hooked it all up and built the application around it.  I think it turned out pretty well.  I use localStorage to track high scores and store custom lists.

For the main page I went Vanilla JS (well almost... I used the Handlebars VM for templates). So the page has a pretty light footprint (35k).  And 15k of that is Google Analytics, so the actual application code (including the Handlebars VM)  is only 20k.  My experience is that Vanilla JS is a little harder than typical jQuery, Backbone, etc... but it is definitely light and fast.  

Anyway... here's the link to the app:

Have fun!