Speaking in color: A Web Speech API experiment

Week 14

It's been nearly a year now, but back when Chrome 25 came out one of the exciting new features was support for the Web Speech API. Finally, all of the far-flung wizardry of Siri and Google Voice was coming to your friendly neighborhood browsers! Well, one of them anyway. Now, like any new feature in it's infancy, it's got plenty of room for improvement, but having easy access to the speech recognition software without any backend setup is a huge step forward. I've always had more than a passing interest in Natural Language Processing, so naturally, this called for an experiment.


In this demo, once you activate your microphone you can speak the names of different colors (only CSS color names, mind you) and the screen background will change to match. For some good old-fashioned audio feedback, I also incorporated a separate text-to-speech library, speak.js. ( Google Chrome and Safari on iOS 7 can now achieve this with the Speech Synthesis API as well. ) Give it a try for yourself here.

Given that there is not widespread support for this feature yet, I've not seen too many real world uses of this API. Examples tend to be either dictation or translation applications or basic tutorials, but in a world where a large swath of the population has Siri riding around in their pocket and Her is a best picture nominee, you can see how this has the potential to change how we think about interaction design. Do I want to talk to my computer or my phone all of the time? Not really ( telepathy would be much better ) but there are definitely some intriguing use cases and I'm excited to see where this can go.