The latest articles on DEV Community by Jorge Oviedo (@manichov1972). https://dev.to/manichov1972 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4099638%2F295ff270-a0f4-4605-a0d6-df5871f125f1.jpg https://dev.to/manichov1972 en Jorge Oviedo Sat, 29 Aug 2026 01:38:28 +0000 https://dev.to/manichov1972/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api-dod https://dev.to/manichov1972/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api-dod <p>Hey dev community! I want to share a project I just launched: <strong>MasterDJ AI</strong> — a professional DJ platform that runs entirely in the browser.</p> <h2> What is it? </h2> <p>A single HTML file (~400KB) that gives you a full DJ console. No frameworks, no dependencies, no server required for the core app.</p> <h2> Tech Stack </h2> <ul> <li> <strong>Web Audio API</strong> — real-time audio processing (BufferSource, BiquadFilter, Convolver, Analyser nodes)</li> <li> <strong>Canvas API</strong> — rainbow waveform visualization colored by frequency</li> <li> <strong>ID3v2 parser</strong> — extracts album cover art from MP3 metadata in pure JavaScript</li> <li> <strong>Center channel cancellation</strong> — karaoke mode that removes vocals by subtracting R from L channel</li> <li> <strong>CSS custom properties</strong> — 8 theme skins switchable in real-time</li> <li> <strong>i18n</strong> — 13 languages with RTL support for Arabic and Hebrew</li> <li> <strong>PHP/MySQL</strong> — backend for license keys, song requests, and visitor tracking</li> </ul> <h2> Key Features </h2> <ul> <li>Dual deck mixing with independent volume, speed, pitch</li> <li>3-band EQ with kill switches per deck</li> <li>4 real-time effects: Filter, Delay, Reverb, Phaser</li> <li>Smart automix with 3-second ease-in-out crossfade</li> <li>BPM detection using energy-based onset analysis</li> <li>8 hot cue pads and beat loops per deck</li> <li>Session recording via MediaRecorder API</li> <li>Live Song Requests — audience scans QR code to request songs in real-time</li> </ul> <h2> The Song Request System </h2> <p>This is the feature I'm most proud of. The DJ opens a "room," gets a QR code. People at the party scan it with their phone — no app needed — type a song name, and it appears on the DJ's console in real-time via PHP polling.</p> <h2> Try it </h2> <p>🔗 <a href="https://masterdjai.com" rel="noopener noreferrer">https://masterdjai.com</a></p> <p>Free version available. Pro ($14.99 one-time) unlocks effects, karaoke, hot cues, and premium skins.</p> <p>Would love to hear your feedback, especially on the Web Audio API implementation!</p> frontend javascript showdev webdev