Speaking Colors in 7 Lines

Speech To Color

Yesterday I released a little experiment which allows you to change the color of a webpage by speaking color names into your microphone. It’s called Speech to Color and it’s a perfect example of magic with minimal code. Seven lines to be exact:

recognition = new webkitSpeechRecognition();
recognition.continuous = true;

recognition.onresult = function(e) {
  color = $.trim(e.results[e.results.length - 1][0]["transcript"]);
  $("body").css({ background: color });


The key here is the Web Speech API which Google specified on October 19th 2012. Yeh… that long ago. You probably noticed when they added the mic icon to Google.com allowing for “search by voice” around then also. Anyway, let’s go through each line:

  1. Initialize the Web Speech API recognition engine
  2. Set it to transcribe continuously
  3. Listen for new spoken words
  4. Grab the last transcribed word and trim any unwanted spaces
  5. Change the page’s body color with the result
  6. Close your god damn bracket
  7. Start the Web Speech API

That’s it.

If the user speaks any of over 100 CSS color names, the background will change color. Want a nice transition? Just add another line of CSS:

-webkit-transition: 2s background;

Check out Glen Shires HTML5Rocks tutorial for more on voice driven web apps and go speak some colors


Now read this

Awareness Dat

New Orleans hasn’t had a good snow since 2008 and well… we didn’t have one yesterday either. Unless, of course, you’re talking about the flurry of visitors that went to Is It Snowing In NOLA. 55,000 to be exact. Generating over 100,000... Continue →