AIDA

• 

  DJ Box

• 

  DJ Box with VR hands

Inspiration:

DJing has a steep learning curve with beat matching, EQ blending, timing, and frequency control must work together. AIDA makes professional DJing accessible by combining AI with XR to guide users in real time.

What it does:

AIDA is a browser-based DJ platform with dual decks, waveforms, hot cues, looping, beat sync, 3-band EQ, filters, effects, and real-time stem isolation. AI coaching provides floating visual cues, ghost-hand demos, live feedback (“You’re drifting—nudge Deck B”), automix suggestions, clash detection, and optimal transition planning. Voice commands and mashup automation handle timestamped playback, alignment, and beat-matched transitions.

How we built it:

React Three Fiber powers 3D/XR UI, Zustand manages state, Tone.js + HTML5 Audio handle processing and playback, and Next.js provides the full stack. AI uses Gemini 2.0 Flash Lite, a DigitalOcean Agent, and a custom remix engine. Voice commands use hybrid parsing. Audio routing and XR UI were heavily optimized for low latency.

Challenges:

Achieving real-time audio with no latency, dynamic BPM sync, and phase alignment. Simulating stem separation without ML. Ensuring VR/AR UI compatibility. Managing heavy DJ state efficiently. Browser autoplay constraints.

Accomplishments:

AIDA delivers a fully in-browser, professional-grade DJ system with real-time AI coaching, frequency ownership, mashup automation, natural language voice control, and XR support.

What we learned:

Audio engineering techniques (bass swapping, clash prevention), XR UI design, multi-model AI integration, and performance optimization across audio and rendering.

What’s next:

True ML stem separation (Spleeter/Demucs), collaborative mixing, cloud stem libraries, personalized coaching, export features, and streaming service integration.

Built With

• digitalocean-agent-api
• google-gemini-api
• html5
• next.js
• react
• react-three-fiber
• tone.js
• typescript
• web-audio-api
• webgl
• webxr
• zustand