Because I’m an idiot, I’ve decided that what my life needs is voice activated lightbulbs. But voice control is so 2015. Let’s make these bulbs react to SINGING!

Here’s a demo – fair warning, my vocal prowess is “limited”.

OK, here’s how to do this.

This was a 5 minute hack, so my code is quite shameful, but here are the basics.

Firstly, we need an HTML page with JavaScript to detect the speech. At the moment, this only seems to work in Chrome (AKA the IE6 of 2016).

<html> <head> <script type="text/javascript"> var red = ["red", "read","ret"]; var yellow = ["yellow", "yell", "yeah"]; // new instance of speech recognition var recognition = new webkitSpeechRecognition(); recognition.lang = "en-GB"; // set params recognition.continuous = true; recognition.interimResults = true; recognition.start(); recognition.onresult = function(event){ // delve into words detected results & get the latest // total results detected var resultsLength = event.results.length -1 ; // get length of latest results var ArrayLength = event.results[resultsLength].length -1; // get last word detected var saidWord = event.results[resultsLength][ArrayLength].transcript; saidWord = saidWord.trim(); console.log(saidWord); xmlhttp=new XMLHttpRequest(); if (red.indexOf(saidWord) >= 0) { console.log("sending red!"); xmlhttp.open("GET","lifx.php?colour=red",true); xmlhttp.send(); } if (yellow.indexOf(saidWord) >= 0) { console.log("sending yellow!"); xmlhttp.open("GET","lifx.php?colour=yellow",true); xmlhttp.send(); }

If it detects one of our magic words, it sends it to a server component. I just don’t trust JavaScript with my API keys. The server page is a simple PHP script.

<?php $link = "https://api.lifx.com/v1/lights/all/state"; $authToken = ""; $colour = htmlspecialchars($_GET["colour"]); $data = array("color" => $colour, "duration" => "0.5"); $ch = curl_init($link); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT"); curl_setopt($ch, CURLOPT_POSTFIELDS,http_build_query($data)); $headers = array('Authorization: Bearer ' . $authToken); curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); $response = curl_exec($ch);

Take the colour and send it to the bulb. Make the transition time fairly quick (half a second). The “Rainbow” command just sends random colours with a much shorter transition.

And… err… that’s it! The Lifx API lets you send colours as strings, hex codes, HSB, etc, so it is fairly flexible.

Sure, I could have bought an Amazon Echo (not available in my country) or a Google Home (not launched, will be abandoned next year) or a Raspberry Pi (too easy to lose) or built an app for my phone (just too much hard work) – but I’m quite happy playing around in the browser.

Here’s the video again, if you like watching things on Twitter.

My Lifx bulbs now react to my (*atrocious*) singing. Forgive me! Source Code: https://t.co/0oukNamvnU pic.twitter.com/s8lXBJH9w7 — Terence Eden (@edent) May 18, 2016

If you enjoyed this blog post, buy yourself some Lifx bulbs or you could send me something from my wishlist.