Case study · Browser DJ studio (web app)

Shadow DJ a two-deck DJ studio that runs in the browser.

Shadow DJ website — home screen

A two-deck DJ studio in the browser — mixer, hot cues, loops, beat grid, 8-pad sampler, stem separation and WAV mix recording.

Visit the live site Hire us for one like this
shadowban.co.uk/websites/Mixer/Full screen

This is the real website. Scroll it, tap it, try it. On a phone it’s best full screen.

Type
Browser DJ studio (web app)
Sector
Music & software
Sections
7
Built with
Hand-coded · no templates

About the site

Shadow DJ is an independent browser-based DJ studio. Load two tracks, beat-match them with pitch and jog wheels, throw in hot cues and loops, sample the last four beats onto a pad, and record the whole mix to WAV — all without installing anything.

The idea

The challenge was fitting a genuine performance tool into a web page that also works on a touchscreen. The interface is split into tabs (Decks, Mixer, Beat Grid, Samples, Cues & Stems, Tracks) so a phone gets one job at a time, while a laptop gets keyboard shortcuts for everything.

What we built, section by section

  1. 01

    Decks A & B

    Load, play, pitch, jog wheel and waveform seeking.

  2. 02

    Mixer

    Crossfader, EQ and channel volume.

  3. 03

    Beat grid

    A 16-step grid and snap-to-bar.

  4. 04

    Live sampler

    Eight pads, sampling from master or either deck, with “last 4 beats” capture.

  5. 05

    Music library

    Import your own files, with BPM and duration saved in the browser.

  6. 06

    Guide

    An eleven-step “Get into the mix” walkthrough.

  7. 07

    Stems and sample editor

    Optional real stem separation, plus trim, pitch, reverse and WAV export for pads.

Features

  • Two decks with pitch, jog and waveform seek
  • Hot cues and loops from ¼ to 8 bars
  • 8-pad live sampler
  • Stem mixer with solo (optional Demucs service)
  • Keyboard shortcuts for decks, cues and pads
  • Records the mix to stereo WAV
  • Full-screen mode and screen wake while recording

Look and feel

A low-glare dark-charcoal studio look with tracked-out uppercase labels and simple glyph icons. Copy is short and instructional — it reads like good product documentation.

Under the bonnet

  • Web Audio API for mixing, effects and recording
  • Browser storage for the library and settings
  • Optional stem separation via a self-hosted Demucs service
  • Touch-first controls, plus keyboard mapping
  • Downloadable, commented source package

Like everything I build, it’s made from scratch. No page builder, no theme. So it’s quick, it works on phones first, and it’s easy to change later.