NEON DJ gives you two fully independent decks — Deck A (magenta) and Deck B (cyan) — each containing a spinning vinyl simulation, a waveform canvas, transport buttons, hot cue memory, and a pitch fader. Every feature on each deck is driven by real Web Audio API nodes and runs entirely inside a single browser tab with no plugins or installs required.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/kepabilbao67-bot/musicplayer2/llms.txt
Use this file to discover all available pages before exploring further.
Loading a Track
Each deck exposes two ways to get audio into it:Built-in Genres
Use the dropdown selector at the top of each deck. NEON DJ ships with 18 synthesised, copyright-free tracks spanning House (124 BPM), Hip-Hop (88 BPM), Techno (130 BPM), Synthwave (110 BPM), Reggaeton (96 BPM), Drum & Bass (174 BPM), Trap (140 BPM), Funk (108 BPM), Rock Español 80/90 (132 BPM), Heavy Metal 80/90 (160 BPM), Pop Español 80/90 (118 BPM), Punk 80/90 (172 BPM), Ska 80/90 (150 BPM), Grunge 90 (115 BPM), Salsa (95 BPM), Cumbia (92 BPM), Jungle/DnB (165 BPM), and Dubstep (140 BPM). Every loop is 8 bars, synthesised at app load with
OfflineAudioContext.Custom File
Click the 📁 button next to the dropdown to open a file picker. NEON DJ accepts any format the browser can decode (MP3, WAV, OGG, FLAC, etc.). The BPM is auto-detected from the audio waveform using an autocorrelation algorithm that scans 70–180 BPM.
NEON DJ pre-loads House on Deck A and Techno on Deck B on first launch. Your track selections, pitch values, and EQ settings are saved to
localStorage and restored automatically on reload.The Spinning Vinyl
The vinyl disc is a 132 × 132 px CSS circle rendered with arepeating-radial-gradient to simulate vinyl grooves. During playback the disc rotates continuously at 4° per animation frame scaled by the current playback rate.
Glow color signals which deck is active:
| Deck | Color | CSS Variable | Hex |
|---|---|---|---|
| Deck A | Magenta | --a | #ff3d7f |
| Deck B | Cyan | --b | #21d4fd |
playing-glow alongside either a or b, which applies the corresponding neon box-shadow. When stopped, the glow is removed and the disc freezes.
Waveform Canvas
The waveform canvas sits below the vinyl and is 70 px tall. It renders a per-pixel min/max of the decoded audio buffer in the deck’s accent color — magenta for A, cyan for B.- Clicking anywhere on the canvas seeks to that position. The click X coordinate is divided by the canvas width and multiplied by the buffer’s total duration.
- The white playhead is a 2 px wide vertical bar drawn at the current position, updated every animation frame.
- The loop region (when LOOP 4 is active) is highlighted as a semi-transparent purple (
rgba(176,107,255,0.22)) overlay. - Time display: Below the canvas, the elapsed time (left) and total duration (right) are updated every frame in
m:ssformat.
BPM Display and Beat LED
The BPM box in the top-right corner of each deck shows the current effective BPM — that is, the track’s defined BPM multiplied by the current playback rate. It updates in real time as you move the pitch fader. Next to the BPM readout sits a small beat LED (a 10 × 10 px circle). During playback it pulses on every quarter note:- It lights up in the deck’s accent color (
#ff3d7for#21d4fd) for the first 12 % of each beat period - It goes dark (
#2a3142) for the remaining 88 %
Pitch Fader
The pitch column sits to the right of the vinyl disc and contains a vertical range input (writing-mode: vertical-lr; direction: rtl).
| Property | Value |
|---|---|
| Range | −50 % to +50 % |
| Step | 0.1 % |
| Default | 0.0 % |
+ sign when positive (e.g., +12.5%). Internally, the playbackRate of the AudioBufferSourceNode is set to 1 + (percent / 100), which scales both pitch and tempo simultaneously.
Transport Buttons
The transport row contains four equal-width buttons rendered in a 4-column grid.| Button | Normal State | Active State | Keyboard |
|---|---|---|---|
| CUE | Dark panel (--panel-2) | — | A (Deck A) / L (Deck B) |
| PLAY | Dark panel | Green glow (--good = #2fe6a0) with dark text | Q (Deck A) / P (Deck B) |
| LOOP 4 | Dark panel | Purple glow (--accent = #b06bff) | Z (Deck A) / M (Deck B) |
| SYNC | Dark panel | Amber flash (#ffb02e) for 600 ms | S (Deck A) / K (Deck B) |
PLAY
Toggles playback. When playing, the button text changes to PAUSA and it receives the.on class which applies the green background. Internally this calls toggle() on the Deck instance, which calls play() or pause() depending on isPlaying.
CUE
In the current implementation the CUE button callsseek(0), which jumps the playhead to the very beginning of the track (position 0). If the deck was playing, playback resumes from the start; if it was paused, the position is updated and the waveform redraws.
LOOP 4
Activates or deactivates a 4-beat loop anchored at the current playhead position. The loop length is calculated as(60 / baseBPM) * 4 seconds. Once active:
- The
AudioBufferSourceNodeis restarted withloop = true,loopStart, andloopEndset accordingly - The purple region appears on the waveform canvas
- Pressing LOOP 4 again disables the loop and restarts playback from the current position
SYNC
Matches this deck’s playback rate to the other deck’s current BPM (accounting for the other deck’s pitch offset). It then realigns the beat phase so both decks are in step within the current bar. The SYNC button flashes amber for 600 ms as visual confirmation. Keyboard shortcut:S for Deck A, K for Deck B.
Hot Cues
Each deck has three HOT 1 / HOT 2 / HOT 3 buttons for storing and jumping to time positions.Load a track and start playing
Make sure a track is loaded and playing (or at least seeked to a meaningful position).
Navigate to the cue point
Drag on the waveform canvas, use the pitch fader, or let the track play to the moment you want to mark.
Press HOT 1, 2, or 3 for the first time
On the first press, the current playhead position is stored in
hotCues[i]. The button gains the .set class (blue border #3b82f6, blue-tinted background #16324f), and the label changes to ● m:ss showing the saved timestamp.Jump to the hot cue
On any subsequent press, the deck calls
seek(hotCues[i]), instantly moving the playhead to the saved position. If the deck was playing, it continues playing from there.There is no dedicated “delete hot cue” button. To reassign a hot cue, load a new track or reload the page.
Scratch / Jog Mode
You can scratch or jog-wheel seek by clicking and dragging on the vinyl disc with the mouse (or a touch gesture on mobile).| Event | Behavior |
|---|---|
mousedown on .vinyl-wrap | Captures the starting X position; if the deck was playing, it pauses playback |
mousemove (global) | Moves offset by dx * 0.004 seconds per pixel dragged, clamped to [0, duration − 0.05] |
| Scratch grain | Every 40 ms (while dragging > 0.5 px), a 140 ms AudioBufferSourceNode grain plays at the current offset to simulate the scratch sound |
mouseup (global) | Ends scrubbing; if the deck was playing before, playback resumes from the new position |
Button State Reference
| Element | Default Appearance | Active / On Appearance |
|---|---|---|
| PLAY button | Dark (--panel-2), white text | Green (--good / #2fe6a0), dark text |
| LOOP 4 button | Dark, white text | Purple (--accent / #b06bff), dark text |
| SYNC button | Dark, white text | Amber (#ffb02e), dark text (600 ms flash) |
| HOT 1/2/3 | Dark (#20283a), muted text | Blue-tinted (#16324f), blue border (#3b82f6) |
| Beat LED | Dark dot (#2a3142) | Deck color glow (#ff3d7f or #21d4fd) |
| Vinyl disc | No outer glow | Deck color box-shadow |