How to make a live visual for a DJ set

A live visual listens to your set and draws what it hears. The drawing is the fun part. The parts that decide whether it works on the night are the audio input, the screen and the backup.

1. Decide what it reacts to

Pick two or three things the picture will respond to: the kick, the overall loudness, the brightness of the high end. A visual that reacts to everything looks like noise. A visual that reacts to the kick and the bass, and does little else, looks intentional.

2. Get the audio in

This is where most problems come from. In order of quality:

A USB audio interface fed from the booth record out or a spare mixer output. Clean and level.
The 3.5 mm line input on the laptop with a cable from the mixer. Works, with a little noise.
The laptop microphone. A last resort. The picture is looser because the room is in the signal.

Turn off any audio enhancements in the operating system for that input. They change the signal your visual sees. If you use a browser, it must ask permission to use the input, and microphone style access only works from a secure address, so run your page from localhost or an https address.

3. Analyse the sound

In a browser, the Web Audio analyser node gives you a frequency spectrum many times a second. A size of 2048 is a good start. Then:

Split the spectrum into a few bands: low for kicks and bass, middle, high.
Smooth each band with a fast rise and a slower fall, so the picture does not flicker.
Detect a hit by comparing the current low band energy with a short running average. When it jumps well above the average, a kick has landed.
Add a threshold so a quiet room does not make the picture twitch.

4. Draw it

Use a canvas or WebGL. Drive a small number of parameters from the bands: size, position, brightness, texture. Keep a slow background motion so the screen is never dead between hits. Test the visual at the resolution of the projector, which is often lower than your laptop screen.

5. Get it to the screen

Set the display to extend, not mirror, so your laptop screen stays yours.
Run it full screen on the second display.
Ask the venue early whether your laptop can feed their screen, what connector they use, and who is in charge of it.
Bring your own cable and an adapter. Test the cable before the night.
Plug the laptop into mains, turn off sleep, and turn off notifications.

6. Keep it flash safe

Rapid flashing can be harmful to some viewers. The accessibility guideline for the web, WCAG success criterion 2.3.1, says that content should not flash more than three times in any one second, and the same is a sensible limit for a room. Keep brightness steps small, avoid large areas of rapid change and avoid saturated red. Give yourself a key that blacks the screen out at once.

7. Rehearse and have a plan B

The day before, play a real track through the real cable and write down the input name, the sensitivity and the thresholds that worked. An hour before doors, repeat the short version. Record three to five minutes of the visual running and keep it on the laptop and on a stick. If the browser or the laptop fails, play the recording on any screen and nobody in the room knows.

Build it or have it built

If you would rather play than program, I build custom live visuals around one performer's name. See the visuals page.

Keep going

Join the Discord What members get

Stuck on something this guide did not cover? Ask in the Discord.