How Do I Control Music Visualizers with MIDI in Chrome?
To control music visualizers with MIDI in Chrome, open BeamTracer Audio Visualizers in PERFORMER, open Performer Settings → MIDI, and allow MIDI access when prompted. Use START MIDI LEARN for knobs and pads, or PROGRAM CHANGE and NOTE MAP for preset selection. Choose an audio input separately to make the visuals react to music.
Hi, I'm Trina with BeamTracer.com. A controller is useful when you want to change the picture while listening to the music. Start with one control you can recognize, such as the next preset or the output level, and test that mapping before adding the rest of your layout.
An actual Performer demonstration using a computer key learned to NEXT PRESET. The preview is silent; a physical MIDI controller needs its own connection test.
Does MIDI supply the music that the visualizer hears?
MIDI supplies control messages, such as a note, a knob value, or a tempo pulse. The visualizer's audio input supplies the music signal. In Performer, choose your music source separately, then use MIDI to select presets or change their controls. The Web MIDI specification describes the browser's MIDI device and message interface.
A keyboard can send a note without sending your synthesizer's sound to the browser. If the visuals move when you play a recorded track but ignore your live instrument, check the audio input route before changing the MIDI mapping. You may need the instrument's audio output, an audio interface, or the supported tab-audio route for your setup.
For oscilloscope music, OSC-1's hardware controls are a separate workflow: MIDI can play the synth or change its parameters, while the scope displays the generated audio. A successful Performer mapping does not automatically configure OSC-1.
How do I connect a controller in Chrome?
Connect the controller to your computer, open Performer in Chrome, and open Performer Settings → MIDI. Once browser access is allowed, CONNECTED DEVICES lists the MIDI inputs and outputs it can see. Device detection and a working musical audio input are separate checks. Use the browser support guide if you are choosing another browser.
The device list answers whether the browser can see the controller. It does not establish which channel the controller sends on or whether a particular pad uses notes, Control Change, or Program Change. Keep the controller's own manual handy for those details.
- Connect your MIDI controller using the manufacturer's supported connection.
- Open Audio Visualizers in Chrome and select PERFORMER.
- Click the control-bar settings button and select MIDI in PERFORMER SETTINGS.
- Allow the browser's MIDI request when it appears, then check CONNECTED DEVICES.
- Load a recorded rehearsal track through the audio controls and confirm that it plays.
- Test one learned control or preset selection using the sections below.
- For a video of the chosen look, open RENDER → RENDER VIDEO and export MP4 or WebM with the recorded track.
That render produces the selected visualizer's video. Arranging presets or pressing a controller during rehearsal does not, by itself, author a timed sequence for an offline render. Use the Scene Sequencer guide when you need arranged scenes and transitions.
How do I assign a knob or pad to a visual control?
Use START MIDI LEARN, click the control you want, then move a knob or press a pad. Performer shows the captured mapping in the learn bar. Click DONE to finish, then test the same physical control while watching the picture. The MIDI integration guide explains the mapping behavior.
A knob or fader can sweep a slider. A pad can trigger an action, such as NEXT PRESET, or flip a toggle. Choose a control whose result is easy to see before mapping a subtle effect.
- Open Performer Settings → MIDI and press START MIDI LEARN.
- Choose a Performer action in the learn bar, such as NEXT PRESET or OUTPUT LEVEL.
- To learn a visualizer parameter instead, open that visualizer's settings and click its outlined control.
- Move one knob or press one pad on your controller.
- Read the mapping shown in the learn bar, then press DONE.
- Repeat the physical input and check the visible result before learning another control.
- To export the selected look with your rehearsal track, use RENDER → RENDER VIDEO and choose MP4 or WebM.
Click the target first. The learn bar then asks for the input that will control it.
You can practice the workflow with your computer keyboard. Learn a spare key to NEXT PRESET, finish with DONE, then press that key again. Some keys already belong to the app, so read the message if a key cannot be learned. A keyboard test helps you understand the interface; it does not test your controller's USB connection or MIDI messages.
How do notes and Program Change choose presets?
PROGRAM CHANGE uses the preset panel's current order: program 0 selects its first tile. NOTE MAP assigns consecutive notes from a chosen First note to that same order. Set the relevant Channel to match your sender. NOTE MAP begins OFF, so notes will not select presets until you enable a channel.
Use the displayed assignments when testing a sequencer or keyboard. If the wrong preset appears, check the channel, first note, and current preset filters. The preset-order walkthrough shows how to prepare a custom arrangement without duplicating this connection setup.
| Route | Use it when | Check first |
|---|---|---|
| MIDI LEARN | A knob changes a parameter or a pad calls one action | The captured input and target |
| PROGRAM CHANGE | A controller or DAW sends preset program numbers | Channel and the preset panel's order |
| NOTE MAP | Notes in a keyboard or sequencer choose consecutive presets | Channel, First note, and displayed assignments |
A note already learned to a control keeps that mapped job instead of also selecting a preset through Note Map. For separate pad assignments without a run of notes, MIDI Learn offers PRESET 1 through PRESET 16.
Does the APC mini MK2 need a custom mapping?
BeamTracer has built-in APC mini MK2 preset selection. Its pad selections follow the preset panel's current sort and filters. You can still use START MIDI LEARN to assign a fader to a visual control or OUTPUT LEVEL. The controller sends MIDI over its USB connection, as documented in Akai's user guide.
A pad learned to another control takes that mapped job. Test the resulting layout rather than assuming it will both launch a preset and perform the new action. Pressing a pad for the currently active visualizer type can cycle its preset variants; rehearse that behavior if you expect an exact look on every press.
The MIDI settings also contain LED DISPLAY MODE choices for the APC. Check your physical controller while choosing a mode. The screen captures here show software setup and keyboard learning, rather than a photographed controller or a hardware-light demonstration.
What does MIDI clock change?
MIDI CLOCK → EXTERNAL lets Performer follow a sender's MIDI tempo. INTERNAL uses its existing tempo sources. With external clock selected, MIDI Start and Stop also control Scene Sequencer playback. Clock carries timing messages; it does not deliver the song's audio or turn a list of preset changes into an exported performance recording.
If the tempo seems wrong, check that the sender is actually transmitting MIDI clock and review the current tempo source. The MIDI guide explains source priority and the behavior when external clock stops.
What should I check when a mapping does nothing?
Check device detection, message type, channel, and the active visualizer. A mapping for a Neon Orb parameter waits while a different visualizer is showing; the mapping list marks that control INACTIVE. A knob can also wait until it reaches the value you previously set on screen before taking over, which prevents a sudden jump.
Return to one simple test: a detected device, one target, and one input. Confirm the result in the browser you will use at the show, then rebuild the rest of your layout around that working connection. Open Performer and start with a single action you can see.