What is this project about?

Build an animated LED matrix jukebox that plays music with synchronized GIF animations. Watch colorful pixel art dance along with your favorite tunes—a perfect mood lamp for your desk or room.

Why did we decide to make it?

Building a music-synchronized LED display traditionally requires handling audio playback, GIF decoding, LED matrix protocols, and timing synchronization. Using Grablo’s visual blocks, all of this complexity disappears—no coding needed.

What You’ll Build

A complete animated LED matrix jukebox featuring:

• 32x32 NeoPixel LED matrix display
• Synchronized music and animated GIFs
• Dashboard control with Play/Skip buttons
• Automatic track looping
• Multiple track support with matching animations

Demo

Quick Start

• Install software: Download and install Grablo on your Raspberry Pi
• Set up hardware: Wire components according to wiring diagram
• Get this project: Project Link
• Upload files: Download music and GIF files and upload to your controller
• Open Grablo app: On your desktop or mobile browser
• Hit RUN: Connect to your Raspberry Pi and enjoy!

💡 Want to build it yourself? Continue to Build Process

Build Process

Dashboard Create Project & Dashboard

• Go to https://app.grablo.co
• Click "Create Project"
• Name your project
• Create a new dashboard

Add Widgets

• Switch Widget: Create a "Play" variable to control playback
• Push Button Widget: Create a "Next" variable to skip tracks

Logic

Control 1-3: Music Playback

Play three music tracks sequentially when the switch is on.

• Condition (Compare): Play = True
• Action (Play Media): Create media player, set command to Play, upload music file

Repeat for each track. When multiple controls exist in the same logic, they execute sequentially. When the third track finishes, it loops back to the first.

Control 4: Stop Music

Stop playback when switch is off or Next button is pressed.

• Condition 1 (Compare): Play = False
• Condition 2 (Compare): Next = True
• Condition Operator: OR
• Option: Rising Edge
• Action (Play Media): Set command to Stop

Control 5-7: LED Animations

Display matching GIF animation while each track plays.

• Condition (Watch Action): Watch music playback action, Status = Running
• Action (I/O Device Control): Create WS2812B matrix device, command = Show Image, upload 32x32 GIF

Control 8: Clear LED Matrix

Turn off LEDs when switch is off.

• Condition (Compare): Play = False
• Action (I/O Device Control): Set command to Clear

That’s It!

Congratulations! You’ve built a complete animated LED matrix jukebox using visual blocks and zero lines of code.

Expected Results

When you run your project:

• Turn on Play switch: First track plays with matching animation
• Press Next button: Skips to next track and animation
• Automatic looping: After third track, loops back to first
• Turn off Play switch: Music stops and LED matrix clears

Wiring Diagram

⚠️ Important Notes:

• Use thick wires (18 AWG or thicker) for power lines
• 5V 10A power supply supports up to ~30% brightness. Use higher amperage for brighter output
• Raspberry Pi GND must be connected to power supply GND (common ground)

GPIO Pin Options:

You can use either GPIO 10 or GPIO 12 to control the LED matrix.

• GPIO 10 (SPI) - Recommended: Allows use of 3.5mm audio jack. Add spidev.bufsiz=32768 to /boot/cmdline.txt
• GPIO 12 (PWM): No configuration needed, but 3.5mm audio jack will not work. Use USB audio adapter or Bluetooth speaker instead

Video Tutorial

Watch the complete build process in action:

What’s Next?

Expand your project:

• Add more tracks and animations
• Time-based mood lighting (morning/evening themes)
• Voice control to switch tracks

Troubleshooting

No sound:

• Check speaker connection
• If using GPIO 12, use USB audio adapter or Bluetooth speaker
• Verify audio file format (MP3, WAV)

LEDs not lighting up:

• Check power supply capacity and connections
• Verify GPIO pin configuration matches your setup
• For GPIO 10, ensure spidev.bufsiz is set in cmdline.txt

Animation not displaying correctly:

• Verify matrix layout settings match your physical arrangement
• Check GIF size (should be 32x32 pixels)
• Try reducing brightness if colors look wrong

Resources & Support