How to Build a Wireless Visual Metronome that Synchronizes with your DAW

When recording or performing music, staying in time is essential. In the studio musicians will almost always use an audible click track metronome through headphones to help them keep in time with the rest of the music, and this technique is sometimes used on the stage too. However this may not be feasible or desirable for everyone, so what are the alternative options? Well, one option would be to use light instead of sound, and in this tutorial I’m going to show you how to build a simple wireless, light-based visual metronome that flashes in time with your DAW, as well as being colour-configurable using MIDI CCs.

This is what you'll be building:

The main pieces of technology that we will be using here is the Spark Core—a hardware/software development platform that allows you to create wireless internet-connected devices with ease. It comes in the form of a Wi-Fi hardware board, a software development environment for programming the board, and a cloud service for connecting the board to the Internet. There are a few reasons why we are using the Spark Core for this project over alternative options:

• It is a cheap, if not the cheapest, Wi-Fi development board available.
• It is programmed using the same code as that of Arduino, which is easy to use.
• It has a bright RGB LED onboard that we can use, averting us from needing to buy and connect any further electronic components

The Spark Core development board.

What You Will Need 

 A Spark Core board: These can be purchased from the Particle Store, though they are also available from a few hobbyist electronic stores. Make sure you get the ‘chip antenna’ model. 

Something to power the board: If you want your visual metronome to be completely wireless you’ll need a Spark Core battery shield with a Polymer Lithium Ion Battery, or a micro USB battery. Else, simply plug the board into a USB port or plug using a micro USB cable.

A translucent enclosure: This will be a hollow object that the Spark Core is placed inside, in order for the LED to be more noticeable by illuminating something bigger. This could be one of a variety of things—some kind of translucent plastic box found around the house, an origami cube made out of tracing paper, or a custom-made box made from sheets of frosted acrylic.

Processing: As discussed in a previous article of mine, Processing is a programming language and environment for creating multimedia applications with ease, and we will use Processing to create an application that allows the MIDI messages from our DAW to control the LED on the Spark Core board. You can download Processing for free from here. You will also need to download and install the Processing MidiBus library and the Processing UDP library for this project.

Virtual MIDI port software: You will need to use a virtual MIDI port to connect the output of your DAW to the Processing application. For this I recommend loopMIDI on Windows, or on OS X you can use its built-in IAC Driver. 

Step 1 – Set up your Spark Core 

Setting up the Spark Core is really easy, and there is a dedicated smartphone app for doing this. The Particle website does a very good job of explaining the setup process, which you can view here. I recommend reading this whole guide, as it is a great introduction to how to use both the Spark Core hardware and software. 

The Spark Core ‘Getting Started’ documentation.

Step 2 – Program your Spark Core

Next we need to upload some code onto the Spark Core board. In a nutshell, the Spark Core code for this project (shown below) sets the board to listen for certain messages being sent to it over Wi-Fi, and when it receives these messages to adjust the colour of its RGB LED accordingly. If you want to know more about what the code is doing, see the comments (lines beginning with ‘//’) in the code itself. 

Uploading code is done using Particle’s online IDE (integrated development environment), which provides you with a text editor for writing code as well as controls for uploading this code into your Spark Core board, among other things. 

The Particle online IDE.

 Follow the instructions below to program your board:

1. Power on your Spark Core board, and wait for it to connect to the Particle cloud (the RGB LED will be a breathing cyan colour when it has connected).
2. Go to the Particle IDE at https://build.particle.io/build.
3. Log in to your Particle account (you will already have one if you’ve setup your Spark Core board).
4. From the ‘Particle Apps’ section (which you can show/hide by clicking on the ‘<>’ icon in the toolbar on the left) select ‘Create new app’.
5. Replace the code in the text editor with the code here: Spark Core code.rtf
6. Click on the ‘Devices’ item (2nd from bottom) from the toolbar on the left.
7. Click on the star next to your Spark Core board to select it.
8. Click on the ‘Flash’ item at the top of the toolbar to upload the code onto the board.

If no errors are shown below the text editor, and the RGB LED on the Spark Core board eventually turns to a static white, the board has now been programmed with the code. Please note that the LED will not be a breathing cyan colour once connected and running, like the documentation states, for this particular project. 

Step 3 – Set up a Virtual MIDI Port 

We will now set up the virtual MIDI port. Complete the following:

If you are on Windows:

1. Open up loopMIDI
2. Click on the ‘+’ button on the bottom-left side to create a new virtual port
3. Leave the application running

If you are on OS X:

1. Launch the ‘Audio MIDI Setup’ utility application
2. Go to ‘Window -> Show MIDI Studio’ if the window isn’t currently being displayed
3. Double-click on the ‘IAC Driver’ object in the MIDI window
4. Make sure that the ‘Device is online’ option is ticked
5. Close the application

Setting up your virtual MIDI port on OS X.

Step 4 – Create the Processing Application

Next we will create the MIDI-to-Spark-Core application using Processing. The code we will use here (shown below) listens for MIDI messages coming from your DAW, and uses them to send relevant messages to the Spark Core to control the LED. Again, see the comments (lines beginning with ‘//’) in the code itself if you want to know more about what the code is doing.

The Processing and MIDI-to-Spark-Core applications.

Once you have downloaded and installed Processing as well as the Processing MidiBus and UDP libraries, complete the following steps:

Step 5 – Configure your DAW

We will be using MIDI Clock messages to make the RGB LED on the Spark Core flash in time with the transport playback of your DAW. Configuring a DAW to send MIDI Clock messages various from DAW to DAW, so consult your DAW's documentation to find out how to do this. Once that has been done, allow MIDI Clock and CC messages to be sent to the virtual MIDI port.

Step 6 – Connect it all Together

Finally we’re ready to make your DAW control the LED. With your DAW configured to send MIDI clock messages and connected to the virtual MIDI port, the MIDI_to_Spark_Core application running and your Spark Core board on, connected and housed in its enclosure, press play within your DAW and the LED should begin pulsating in synchronization. Try changing the tempo in your DAW—you’ll notice the flashing LED changes speed too. You can also send MIDI CCs 20, 21, and 22 to the MIDI_to_Spark_Core app to adjust the red, green, and blue values of the LED—automate these CC values to create synchronized colour animations.

The completed visual metronome project.

If the LED isn’t flashing at all, try adjusting the ‘udpPort’ value/number at the top of both the Spark Core code and the Processing code to a different number between 1024 and 65535, as your computer may already be using this port for something else. The same number must be used in both pieces of code, and remember to re-flash the Spark Core board and re-run the Processing app after doing this! You may also want to check that the Spark Core board still has the same IP address, and adjust the value in the Processing code if it has changed.

If you find that the RGB LED on the Spark Core board isn’t bright enough, you could extend the project by connecting an external RGB LED as well. This tutorial shows you how this can be done using an Arduino board, however just replace the Arduino with a Spark Core board and everything will work in the exact same way. The Spark Core code above also includes some code examples for controlling an external LED.

Here is a short video demonstrating my Spark Core visual metronome, using a tracing paper origami cube as the enclosure, connected to Ableton Live.

Conclusion

So that’s how you can build a DAW-syncable visual metronome as an alternative to an audible click-track. Whether you use your DAW for recording; as a backing track within your live setup; or the main part of your live performances, this could not only be a handy tool for staying in time, but also an interesting visual element for your gear setup.