> ABOUT THE PROJECT
Enjoy the experience of mixing music right in your browser. Simple DJ combines clean aesthetics with modern web technologies to deliver a seamless music mixing experience.
> GET STARTED
Version 1.0.1 - Now live! Mix your tracks directly in the browser.
> FEATURES
Control two independent decks with automatic BPM detection and synchronization. Mix tracks seamlessly with tempo matching.
Separate audio tracks into individual stems using AI-powered separation. Toggle drums, bass, vocals, and other elements independently for creative mixing.
Adjust High, Mid, and Low frequencies with 3-band EQ controls. Apply low-pass and high-pass filters for smooth transitions.
Set loop points with LOOP IN and LOOP OUT controls. Visualize track progress with interactive waveform display.
Smoothly transition between Deck A and Deck B using the crossfader. Control the mix balance with arrow keys or mouse.
Apply real-time reverb and distortion effects using the interactive XY pad. Control effect intensity by moving the cursor on the pad.
Visualize audio frequencies in real-time with a retro-style spectrum analyzer. See the frequency response of each deck as you mix.
Trigger sound effects like airhorn and siren during your mix. Add excitement and energy to your DJ sets.
> MOTIVATION
I wanted to create a project that uses cutting-edge technology to work with music. Real DJ consoles are expensive and difficult to use, so I thought it would be interesting to implement a simple version on the web. My goal was to create a console that is visually simple yet matches my personal taste. I researched how real DJs work and used that as a reference when designing the features.
> TECHNICAL BACKGROUND
This project combines real-time audio processing using the Web Audio API with deep learning-based source separation.
Source Separation
The HDemucs model from PyTorch is used to separate audio files into four stems (drums, bass, vocals, other). The backend is built with FastAPI, and uploaded audio files are separated on the server, allowing individual control of each stem. Separation runs asynchronously.
Frontend Architecture
The frontend is built with React and Vite, and audio processing is handled entirely through the Web Audio API. Each stem is played through independent AudioBufferSourceNode instances, with volume and mute control via GainNode. BPM synchronization is implemented by adjusting playbackRate, ensuring both tracks play in sync with a master BPM.
Audio Processing Pipeline
Each track includes a 3-band parametric EQ (Low: below 300Hz, Mid: 300Hz-3kHz, High: above 3kHz) and Low-pass/High-pass filters. The crossfader adjusts the volume of both tracks, and the master bus includes reverb and distortion effects controlled via an XY pad. Real-time spectrum analysis uses FFT through AnalyserNode.
Additional Features
BPM analysis uses librosa's beat tracking, and key detection uses chroma features with the Krumhansl-Schmuckler algorithm. Loops are quantized to beats and implemented using the Web Audio API's loop property.
> FUTURE PLANS
Performance & Infrastructure
Source Separation Optimization
Reduce server load by adopting lighter separation models or moving source separation to the client side.
Stability & Deployment
Refactor the codebase and system architecture to ensure stable operation in a web server environment, followed by reliable deployment.
Core DJ Features
Extended DJ Console Controls
Add advanced DJ interactions such as turntable-style scratching and reverse playback.
User Experience
Library Management
Implement a track library and search system that allows users to pre-upload tracks and instantly load them for playback. This will require a robust backend pipeline for stem separation, storage, and retrieval.
