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

On Smashing Pumpkins, My Sister, and SoundCloud Premiere

For best results, stream the new record “Oceania” while reading. Smashing Pumpkins represent three “firsts” for me: My first concert. November 27, 1996 at the Gulfcoast Coliseum in Biloxi, MS. Garbage opened. My first contact high. (See... Continue →