{"slug": "i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api", "title": "I built a complete DJ console in a single HTML file using Web Audio API", "summary": "A developer has launched MasterDJ AI, a professional DJ platform that runs entirely in a single HTML file using the Web Audio API. The browser-based console includes dual-deck mixing, real-time effects, BPM detection, and a live song request system via QR codes, with a PHP/MySQL backend for licensing and tracking.", "body_md": "Hey dev community! I want to share a project I just launched: **MasterDJ AI** — a professional DJ platform that runs entirely in the browser.\n\n##\nWhat is it?\n\nA single HTML file (~400KB) that gives you a full DJ console. No frameworks, no dependencies, no server required for the core app.\n\n##\nTech Stack\n\n-\n**Web Audio API** — real-time audio processing (BufferSource, BiquadFilter, Convolver, Analyser nodes)\n-\n**Canvas API** — rainbow waveform visualization colored by frequency\n-\n**ID3v2 parser** — extracts album cover art from MP3 metadata in pure JavaScript\n-\n**Center channel cancellation** — karaoke mode that removes vocals by subtracting R from L channel\n-\n**CSS custom properties** — 8 theme skins switchable in real-time\n-\n**i18n** — 13 languages with RTL support for Arabic and Hebrew\n-\n**PHP/MySQL** — backend for license keys, song requests, and visitor tracking\n\n##\nKey Features\n\n- Dual deck mixing with independent volume, speed, pitch\n- 3-band EQ with kill switches per deck\n- 4 real-time effects: Filter, Delay, Reverb, Phaser\n- Smart automix with 3-second ease-in-out crossfade\n- BPM detection using energy-based onset analysis\n- 8 hot cue pads and beat loops per deck\n- Session recording via MediaRecorder API\n- Live Song Requests — audience scans QR code to request songs in real-time\n\n##\nThe Song Request System\n\nThis 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.\n\n##\nTry it\n\n🔗 [https://masterdjai.com](https://masterdjai.com)\n\nFree version available. Pro ($14.99 one-time) unlocks effects, karaoke, hot cues, and premium skins.\n\nWould love to hear your feedback, especially on the Web Audio API implementation!", "url": "https://wpnews.pro/news/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api", "canonical_source": "https://dev.to/manichov1972/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api-dod", "published_at": "2026-08-29 01:38:28+00:00", "updated_at": "2026-08-29 02:18:40.161903+00:00", "lang": "en", "topics": ["developer-tools", "ai-products", "ai-tools"], "entities": ["MasterDJ AI", "Web Audio API", "Canvas API", "ID3v2", "MediaRecorder API", "PHP", "MySQL"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api", "markdown": "https://wpnews.pro/news/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api.md", "text": "https://wpnews.pro/news/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api.txt", "jsonld": "https://wpnews.pro/news/i-built-a-complete-dj-console-in-a-single-html-file-using-web-audio-api.jsonld"}}