Turn any projector into a live VJ setup. BeatDrop listens to the music in your room, analyzes beat, frequency and energy, then drives full-screen reactive visuals in real time. No cables, no DJ software, no setup — just music and light.
BeatDrop runs entirely in your browser. It uses the Web Audio API to capture audio from your microphone, then runs a real-time FFT (Fast Fourier Transform) to break the sound into four frequency bands — sub-bass, bass, mids, and highs. Each band drives different aspects of the visuals: bass hits trigger shape expansions, hi-hats create sparkle bursts, sustained synths generate flowing effects.
On top of the frequency analysis, a BPM detector auto-locks the visuals to the tempo of whatever is playing. Beat phase tracking means animations snap to the rhythm, not just react to volume. The result: visuals that feel like they were programmed for the specific track.
Captures room audio via your device microphone. Works with any audio source — speakers, Bluetooth, vinyl.
4096-point FFT splits audio into sub (<60Hz), bass (60–250Hz), mids (250Hz–4kHz), and highs (4–16kHz).
Auto-detects tempo from kick drum intervals (60–200 BPM range) with tap-tempo manual override.
Scene switcher, strobe hold, blackout, auto-advance, sensitivity dial — everything you need mid-set.
Six rave-themed palettes from acid green to UV purple. Switch on the fly or let auto-advance pick.
Full-screen 16:9 output. Mirror or extend your display to a projector for room-filling visuals.
You can be up and running in under a minute.
Navigate to the app in your browser, or open index.html locally. Chrome, Firefox, or Safari all work.
Click Start Listening. Your browser will ask for mic permission — allow it. BeatDrop disables echo cancellation, noise suppression, and auto gain to get a clean, unfiltered signal.
Start playing music through your speakers. BeatDrop picks it up through the mic and the visuals begin reacting immediately. The louder and cleaner the audio source, the better the response.
Press F or click the fullscreen button in the control bar. If you're outputting to a projector, extend your display and drag the browser window to the projector screen before going fullscreen.
Use the control bar at the bottom to switch scenes, adjust sensitivity, change palettes. The controls auto-hide — move your mouse to the bottom edge to reveal them.
BeatDrop ships with six visual scenes. Each reacts differently to the audio — some are driven primarily by bass, others by mids or highs. Switch between them with the scene buttons or keys 1–6.
A retro-futuristic perspective grid receding to a vanishing point, with a scanning laser line. The horizontal lines scroll toward camera while vertical lines converge. Bass makes the grid lines thicker and the horizon glow brighter. The scanning laser pulses with beat phase.
bass-driven retro outrunConcentric hexagonal rings zoom outward from the center, creating an infinite tunnel effect. Bass accelerates the tunnel speed and thickens the rings. Mids add lateral wobble. Each ring is colored from the active palette in a cycling pattern.
bass-driven hypnotic depth500 particles swarm toward a gravitational attractor, connected by proximity lines. Bass increases the attraction force and particle glow. Hi-hats trigger sparkle bursts — random bright points scattered across the screen. The most organic, flowing scene.
mid-driven organic sparkleSix layered waveforms flowing horizontally. Each wave layer is mapped to a different frequency band — sub, bass, mid, hi — so you can literally see the music decomposed into its component frequencies. Amplitude, line thickness, and glow all respond to their mapped band.
all-band analytical flowingConcentric rings expand from center on each beat, with rotating diagonal slashes. The most aggressive scene — beat pulse drives ring expansion and center flash. Designed for peak-time moments when you want maximum visual impact.
beat-locked aggressive peak-timeFlowing bands of light across the upper portion of the screen, like a neon northern lights display. Each band maps to a frequency range, with width, brightness, and undulation driven by audio. The most ambient scene — good for warm-up sets or downtempo.
all-band ambient atmosphericEnable Auto mode to have BeatDrop automatically switch scenes every 8 bars. The switch happens bar-locked — it waits for a bar boundary, then picks a random scene and palette. This keeps the room evolving without you touching anything.
The control bar lives at the bottom of the screen. It auto-hides during performance — move your mouse to the bottom edge to reveal it. On mobile, tap the bottom area.
Six buttons across the top of the control bar, one per scene. Click to switch immediately. The active scene is highlighted in cyan. You can also press keys 1 through 6.
Controls how aggressively the visuals react to audio. Range: 0.2 (barely reacting) to 4.0 (very reactive). Default is 1.0. If you're in a quiet room and the visuals aren't responding enough, push this up. If you're next to a speaker and everything is going haywire, pull it down.
Base animation speed independent of audio. Range: 0.2 (slow motion) to 3.0 (fast). This controls the underlying animation tempo — tunnels scroll faster, particles move quicker, waves oscillate more rapidly. Audio modulation is added on top.
Hold the ⚡ Strobe button (or hold Space) for a BPM-synced white/black strobe flash. The flash rate is 2× the detected BPM. Release to stop. Use sparingly for maximum impact.
Click ■ Blackout or press B to instantly cut all visuals to pure black. Press again to restore. Use for dramatic pauses, drops, or transitions.
The BPM display shows the auto-detected tempo. If the auto-detection is wrong (it can struggle with complex rhythms), tap the TAP button (or press T) in time with the beat — 3+ taps locks in your manual BPM, shown with an asterisk (e.g., "128*"). The manual override persists until you reload.
BeatDrop requests mic access with all browser audio processing disabled:
echoCancellation: false noiseSuppression: false autoGainControl: false
This gives the rawest possible signal. Browser defaults for echo cancellation and noise suppression are designed for voice calls — they actively filter out music, especially bass frequencies. Disabling them is essential for proper audio reactivity.
A 4096-point FFT runs every frame (~60Hz), producing 2048 frequency bins. These are grouped into four bands:
SUB < 60 Hz Kick drums, sub-bass rumble BASS 60–250 Hz Bass lines, low toms MID 250–4000 Hz Vocals, synths, snares HI 4–16 kHz Hi-hats, cymbals, presence
Each band value is normalized (0.0–1.0+, after sensitivity scaling), then smoothed with a low-pass filter (factor k=0.15) to prevent jittery visuals. The raw signal is still used for transient detection (kicks).
Kicks are detected when the sub-bass band exceeds a threshold (0.6) AND the delta from the previous frame exceeds 0.08. Each kick timestamp is stored, and BPM is calculated by clustering the intervals between kicks and taking the median. The algorithm filters for the 60–200 BPM range and requires consistent intervals to lock on.
Once BPM is locked, a beat phase counter (0.0→1.0 per beat) runs continuously. This drives BPM-locked animation — patterns can snap to beat boundaries rather than just reacting to volume. A bar counter increments every 4 beats, used for auto-advance timing.
Six palettes, each with three accent colors and a background tint. Visuals use the palette colors as accents over the black background. Switch palettes from the control bar or let auto-advance randomize them.
| Key | Action |
|---|---|
| 1 – 6 | Switch to scene 1–6 |
| F | Toggle fullscreen |
| R | Randomize scene and palette |
| Space (hold) | Strobe flash (BPM-synced) |
| B | Toggle blackout |
| T | Tap tempo |
BeatDrop is a single HTML file with no build step and no external dependencies (aside from Google Fonts). You can deploy it anywhere that serves static files.
Create a repo with index.html (the app) and docs.html (this manual) at the root, or inside a public/ directory.
Cloudflare dashboard → Pages → Create → Connect to Git → pick your repo. Set build output directory to / (root) or public depending on your structure. No build command needed.
Every push to main triggers a new deployment. Changes go live in under 30 seconds.
Vercel, Netlify, GitHub Pages, or any static host. No config needed — just point it at the directory containing index.html.
For local testing, open index.html directly as a file:// URL. Mic access requires HTTPS in production, but most browsers allow it for localhost and file://.
Position your device's mic close to a speaker for the strongest signal. A laptop next to a speaker works perfectly. Bluetooth speakers have slight latency — wired is better for tight sync.
Start at 1.0 and adjust. Quiet room with a phone speaker? Push to 2.5–3.0. Standing next to a PA system? Drop to 0.5. The sweet spot is where visuals clearly react to beats without constantly maxing out.
Auto-detect works best with four-on-the-floor kicks (house, techno). For breakbeat, DnB, or irregular rhythms, use tap tempo instead — press T four times in rhythm.
Match scenes to energy. Aurora for warm-up, Wave River for building, Particles for the groove, Laser Grid for driving sections, Strobe Patterns for the peak. Use Blackout for drops.
Set your projector to its highest contrast mode. Turn off any eco/lamp-saver modes — you want maximum brightness for the strobes to hit. A white wall works better than a screen for side-angle viewing.
Extend your display (not mirror). Put BeatDrop fullscreen on the projector. Open a second browser tab on your laptop for DJ controls — both tabs share the same mic input if you reload.