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

 
141
Kudos
 
141
Kudos

Now read this

Waveforms, Let’s Talk About Them

I’ve worked at SoundCloud for over two years now, and if there’s one thing I do a lot, it’s color waveforms. Tons of them. And, I’ve done it several different ways. Today, Johannes and I are pumped to announce a new JavaScript library... Continue →