Singing to my light bulbs

@edenthacks IoT lifx lights Smart Home · 3 comments · 550 words · read ~1,177 times.

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.

I recently got a bunch of Lfix bulbs as part of a bug bounty.
There's a full API for the Lifx bulbs.
My mate Ruth has written a great demo on the Chome Web Speech API
So, speech + Lifx = awesome.

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.

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

3 thoughts on “Singing to my light bulbs”

2016-05-19 22:57

Rik says:

https://twitter.com/Viss/status/730117789197860864

2016-05-20 22:53

evert says:

Pretty messed up if you need to rely on a third-party hosted service to control your own bulbs! Or do you control api.lifx.com ?

2016-05-21 16:46

Terence Eden says:

Lifx provide a LAN protocol which doesn't touch their servers - https://lan.developer.lifx.com/

I was too lazy to use it though.

Reply

What links here from around this blog?