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

From Users to Heroes

I hadn’t heard of Beats Antique until Alec Steinfeld of C3 Presents introduced me to them by asking for my help on developing an online campaign to compliment their latest album A Thousand Faces: Act I and it’s successfully kickstarted... Continue →