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 });
};

recognition.start();

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

 
140
Kudos
 
140
Kudos

Now read this

Drunk Dialing 5000 Fans or How to Promote a Video

Say you have a new video, a large fan base, and a whole lot of nerve. Hypothetically. Wouldn’t it be cool if you dropped a Twilio powered call-in number somewhere randomly into the video? What if when fans called that number they were... Continue →