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!

Updates:

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.