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:
- You create an instance of the object, via new webkitSpeechRecognition()
- Set continuous to true or false to specify whether it should stop after giving a result or keep listening continuously.
- Set interminResults to true or false to specify if you want only the final result or all results.
- 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: https://iambrandonn.github.io/FlashCards/