LightBox Music Visualizer




Introduction: LightBox Music Visualizer

The LightBox uses your phone's or tablet's built-in microphone to analyze music to generate beautiful light patterns that match the music. Just start the app, place your phone or tablet somewhere near a sound source, and your box will visualize the sound in real-time. The LightBox can also be used a colorful ambient light.

Have fun!!!

Step 1: Gather Materials

You will need the following materials:

  • 1 m of wooden lath 4 x 0.5 cm (for the frame)
  • 1 m of wooden lath 1.2 x 0.5 cm (for the front border)
  • 15 cm of square wooden staff 0.8 x 0.8 cm
  • 1 x wooden plate 22 x 18 x 0.3 cm (for the back plate)
  • 1 x milk white acrylic glass plate 22 x 18 x 0.3 cm (for the front plate)
  • 1 x RGB LED strip, type WS2812B, 5 Volt, 1 m length, with 60 LEDs
  • 1 x ESP8266 module. I used the Adafruit Huzzah, but you can use a different module.
  • 1 x 5.5 x 2.1 DC barrel jack
  • Wire (different colors)
  • Some velcro tape

Tools you will need:

  • Wood saw
  • Miter box
  • Wood glue
  • Soldering iron

Step 2: Build the Box

The Frame

First, use the miter box to cut the lath for the frame. Cut the pieces with a 45° angle, so you can fit them together to form the outer frame (see pictures). You will need two pieces of length 23 cm (for top and bottom) and two pieces of length 19 cm (for left side and right side). The lengths refer to the longer edge.

Tip: If you cut the pieces in the order in which the edges will be put together (e.g., first the top piece, then the right piece, then the bottom piece, then the left piece), you ensure that the edges will fit perfectly.

Now, glue the pieces for the frame together. Make sure that you can fit the acrylic glass plate in the box on one side and the back plate on the other side. Don't worry if there are small gaps -- gaps on the front side will be covered by the border and the back side won't be visible.

The Front Plate

Next, cut the square wooden staff into four pieces, each of 3 cm length. Fit the acrylic glass plate in the box, so that it's flush with the front. Glue the pieces of square wood into the corners of the box and to the back side of the acrylic plate. Make sure that you don't use too much glue, so no glue gets onto the acrylic except where it's glued to the wooden pieces.

The Border

Use the miter box again to cut the lath for the border. Cut them with a 45° angle (see pictures). Again you will need two pieces of length 23 cm and two pieces of length 19 cm (lengths again refer to the longer edge).

Glue the pieces for the border together and glue the border onto the front of the box. Again, be careful that no glue spills onto the acrylic.

Step 3: Install Firmware on the Controller

Go to your Arduino Library Manager and make sure the FastLED library is installed. It will be used by the firmware.

Download the firmware for your ESP8266 from Github.

Use the Arduino IDE to upload the firmware to your ESP8266 module.

Note on using different numbers of LEDs: I built the LightBox with an LED strip of 60 LEDs. But you can use as many LEDs as you like. The only thing you need to do is to change the NUM_ROWS and NUM_COLUMNS constants in the firmware. The app will automatically adapt to the number of LEDs you defined. This way you can build large or small LightBoxes, just as you like.

Step 4: Build the Back Plate

In this step, we will cut the LED strip into smaller strips, solder them together with some wire, and glue them to the back plate to form a grid. The result should look as shown in the pictures.

Caution: There are little arrows printed on the LED strip. These arrows indicate the direction in which the data signal is propagated. You must glue and solder the strips in such a way that you can follow the arrows beginning at the wire that gets connected to the pin on the ESP8266 module, along the strips, all the way to the end of the last strip.

Cut the LED strip into six strips with 10 LEDs each. The LED strip has markings where it can be cut and resoldered. Measure the size of your ESP8266 module. Use a pencil to mark where each strip should go on the back plate. The spacing between the strips should be equal and you must leave a border wide enough to place the ESP8266 module there without covering any of the LEDs.

Next, glue the strips to the back plate. Get out your soldering iron, some wire, and solder the LED strips together. The strips have three lines: +5V, GND, and DO. Make sure you always connect matching lines. Use wires of different color to avoid mistakes.

Drill a hole for the DC barrel jack into the back plate. I used some hot glue to glue the jack to the plate.

Connect the +5V and the GND line of the LED strip to the corresponding terminals of the barrel jack. If you don't know which terminal is positive and which is negative, plug in a 5V power supply and use a multimeter to find out which is which.

Connect the 5V and the GND connectors of your ESP8266 module to the corresponding terminals of the barrel jack. Connect pin 5 of the ESP8266 module to the data line of the LED strip. You can either use jumper cables, if you want to reuse the module later on, or solder the cables to the connectors of the module directly.

Glue the ESP8266 module on the back plate or use some velcro tape to attach it.

Step 5: Have Fun!

It's time to download the app from the Google Play Store. It's free, of course!

Plug in your LightBox. It should turn blue and you should be able to see a WiFi network called "lightbox" on your phone or tablet. If the box turns red when you first plug it in, you need to reset your ESP8266 module's EEPROM. Do this by connecting pin 4 of the module to GND for a second. The box should restart and now turn blue.

Connect to the "lightbox" WiFi network (password: "lightbox12345") with your phone or tablet. Start the LightBox app. The app automatically connects to the LightBox.

In the settings menu, you can configure the LightBox to connect to your own WiFi network instead of creating its own. This way you don't need to switch to another WiFi network when you want to use your box.

Use the Color Picker to illuminate your room in a color that suits your mood, or use the Audio Analyzer to turn music into beautiful patterns of colors.

Don't hesitate to ask in the comments section if you have any questions.

Have fun!


  • 06/03/17: I added some close-up photos of the wiring of the ESP8266 module.
  • 06/19/17: I am continously improving the app and the firmware. I added a filter that smooths the audio visualization. There is much less flickering and the visualization looks a lot nicer. I also added a possibility to configure the number of LED rows and columns in the firmware. The app automatically adapts to the configured number of LEDs. This way you can build your LightBox with more or less LEDs than I did and it will work with the app.
Untouchable Challenge

Runner Up in the
Untouchable Challenge

Lights Contest 2017

Participated in the
Lights Contest 2017

Be the First to Share


    • Fashion Challenge

      Fashion Challenge
    • 3D Printed Student Design Challenge

      3D Printed Student Design Challenge
    • Halloween Contest

      Halloween Contest



    Question 4 months ago on Step 5

    Hey there you projects is great but i cannot find the app on Play Store ....


    1 year ago

    Hey there not sure if you are still active on this project. I have an issue with the msgpack files. Here is the error message I get.
    exit status 1
    call of overloaded 'write(uint64_t)' is ambiguous

    If I comment out all reference to the uint64_t in msgpack.cpp it will compile and I can upload to the ESP8266. However I cannot see the Lightbox SSID, and no LED's come on.
    Im using the NodeMCU 0.9 (ESP-12) version. Which I have tested with other programs and it works well.


    4 years ago

    Hello! This project looks very cool. Looks easy to make and the result can be quite interesting. So thank you for this!

    Unfortunately, I had a problem after uploading the code. I used the latest official Arduino sw with updated board manager. I tried to upload it onto a Nodemcu v0.9 and a Wemos d1. In both cases, there was no wifi network created. (I tried with the blinker sample before and that worked well even after a restart. So the flashing should be ok). I got the following message during the flashing:


    Build options changed, rebuilding all

    In file included from C:\Users\x\Documents\GitHub\lightbox\esp8266\esp8266.ino:2:0:

    C:\Users\x\Documents\Arduino\libraries\FastLED/FastLED.h:17:21: note: #pragma message: FastLED version 3.001.003

    # pragma message "FastLED version 3.001.003"


    In file included from C:\Users\x\Documents\Arduino\libraries\FastLED/FastLED.h:65:0,

    from C:\Users\x\Documents\GitHub\lightbox\esp8266\esp8266.ino:2:

    C:\Users\x\Documents\Arduino\libraries\FastLED/fastspi.h:110:23: note: #pragma message: No hardware SPI pins defined. All SPI access will default to bitbanged output

    # pragma message "No hardware SPI pins defined. All SPI access will default to bitbanged output"


    Archiving built core (caching) in: C:\Users\x\AppData\Local\Temp\arduino_cache_757447\core\core_esp8266_esp8266_nodemcu_CpuFrequency_80,UploadSpeed_115200,FlashSize_4M3M_6fc88ec5ec670b3eb8ec7244616fee37.a

    Sketch uses 234005 bytes (22%) of program storage space. Maximum is 1044464 bytes.

    Global variables use 32884 bytes (40%) of dynamic memory, leaving 49036 bytes for local variables. Maximum is 81920 bytes.

    Uploading 238160 bytes from C:\Users\x\AppData\Local\Temp\arduino_build_188353/esp8266.ino.bin to flash at 0x00000000

    ................................................................................ [ 34% ]

    ................................................................................ [ 68% ]

    ......................................................................... [ 100% ]


    Do you have any idea what can be wrong?


    Reply 4 years ago


    The build message looks okay. The warnings are produced by the FastLED library, but they shouldn't do any harm (I get the same warnings).

    Maybe you can try this: When the NodeMCU or Wemos is running, use a cable to connect pin D2 to ground for a second. This will trigger a function in the sketch that resets the EEPROM. It might be that there is some garbage in the EEPROM that confuses the sketch.

    If you have a LED strip already connected, the color of the strip after powering the ESP will tell you the WiFi state: If it's blue, it's creating its own WiFi network. If it's red, it's trying to connect to some other network (you can configure the network in the app). If it's green, it has sucessfully connected to the other network. In your case, after resetting the EEPROM, it should light up blue.

    Please let me know if this solved your problem.


    Reply 4 years ago

    Thank you! It works now. At least it creates the network and I was able to connect it from my phone. The LEDs are not yet lighting but I will check it tonight. Maybe just the power is not enough, (but it is working with other FastLED examples). Never mind, I think I can solve it soon. Thank you very much again for the advice. I'll let you know how the finished lightbox works as I'll ready with it. Thanks!


    4 years ago

    Hi just wonder if the lightbox app also for apple ?


    Reply 4 years ago

    Hi, unfortunately I haven't been able to write an app for iOS yet. I might write one in the future.


    4 years ago


    Good tutorial, I have a question about the wiring , could you possible post a close up photo of the ESP8266 in situ ?


    Reply 4 years ago

    Hi chance1234,

    thanks for your comment! I added some close-up photos of the wiring of the ESP8266 module. I hope they are helpful to you. Let me know if there is anything else I can help with.


    Reply 4 years ago

    thank you , I will be giving this a go