Skip to main content

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.

NEON DJ is not limited to its built-in synthesized loops. Every deck has a file-loading button — the 📁 icon sitting next to the track selector — that opens the operating system’s native file picker and lets you drop any audio file straight into the mixer. Once loaded, the file is decoded by the browser’s Web Audio API into an AudioBuffer in memory, the waveform is drawn on the deck’s canvas, and you can play, cue, loop, and mix it exactly like the built-in tracks. Everything happens locally inside the browser tab: no file is ever uploaded to a server.

​
How to Load a File

1

Locate the file button on the deck

Find the 📁 button on the deck you want to load into (Deck A on the left, Deck B on the right). It sits immediately to the right of the track-selector dropdown, inside the .track-row area above the turntable.
2

Open the file picker

Click the 📁 button. Your operating system’s standard file-open dialog appears, filtered to audio/* MIME types so only audio files are shown by default.
<label class="btn-file">
  📁<input type="file" accept="audio/*" data-role="file" hidden />
</label>
3

Select your audio file

Navigate to and select any supported audio file. The dialog closes and the deck’s track-name label immediately changes to "Cargando…" while the file is being read.
4

Wait for decoding

The browser reads the file into an ArrayBuffer using the File API (file.arrayBuffer()), then passes it to AudioContext.decodeAudioData(). For most files this completes in well under a second; very large or high-bitrate files may take a moment longer.
async loadFile(file) {
  if (!file) return;
  this.el.trackname.textContent = "Cargando…";
  try {
    const ab  = await file.arrayBuffer();
    const buf = await AC().decodeAudioData(ab);
    this.el.select.value = "";           // deselects built-in track
    this.loadBuffer(buf, file.name, detectBPM(buf));
  } catch (err) {
    this.el.trackname.textContent = "No se pudo leer el archivo";
    console.error(err);
  }
}
5

Mix your track

Once decoded, the file name appears in the .track-name label above the waveform, the waveform is drawn from the decoded AudioBuffer, and the BPM display is updated with the detected tempo. The PLAY, CUE, LOOP, SYNC, pitch fader, EQ knobs, and all other deck controls are now active for your file.

​
BPM Detection for Custom Files

When a custom file is loaded, NEON DJ runs a lightweight autocorrelation algorithm called detectBPM() against the decoded audio data. It analyses the amplitude envelope in 20 ms windows and finds the inter-onset period that scores highest across a candidate range of 70–180 BPM: 
function detectBPM(buffer) {
  const data  = buffer.getChannelData(0);
  const sr    = buffer.sampleRate;
  const win   = Math.floor(sr * 0.02);     // 20 ms windows
  // ... build envelope, then autocorrelate for each candidate BPM ...
  return best;   // integer BPM in [70, 180]
}
The detected BPM is displayed in the BPM box and is used to set the echo/delay time (3/4 of a beat). If the track is outside the 70–180 BPM detection range or has an unusual rhythmic structure, the estimate may be inaccurate — you can compensate with the pitch fader or the SYNC button.

​
Waveform Display

After loading, loadBuffer() calls draw() on the deck, which reads the raw PCM samples from the AudioBuffer and draws a scrolling amplitude waveform onto the deck’s <canvas> element. The canvas updates in real time during playback to show the current playhead position.

​
Supported Formats

NEON DJ accepts any format that the browser’s AudioContext.decodeAudioData() method can handle. Browser support varies:
FormatChromeFirefoxSafariEdge
MP3 (.mp3)✅✅✅✅
WAV (.wav)✅✅✅✅
OGG Vorbis (.ogg)✅✅⚠️ Limited✅
AAC / M4A (.m4a, .aac)✅⚠️ Limited✅✅
FLAC (.flac)✅✅✅✅
Opus (.opus)✅✅✅ (v16+)✅
WebM Audio (.webm)✅✅⚠️ Limited✅
Use MP3 for the smallest file size. A typical 5-minute track at 192 kbps MP3 is around 7 MB and decodes almost instantly in all browsers. WAV and FLAC are lossless and sound identical to MP3 in a live DJ context, but can be 10–50× larger and take noticeably longer to decode.

​
Using Custom Files Alongside Built-in Tracks

Custom files coexist naturally with the synthesized library. You can have a built-in loop on one deck and your own file on the other at the same time — there is no conflict. Loading a custom file on a deck simply clears that deck’s select dropdown value (this.el.select.value = ""), leaving the other deck’s selection untouched. All deck features work the same way with custom files as with built-in tracks:
  • Pitch fader — adjusts playback rate ±50 % in 0.1 % steps
  • SYNC — matches this deck’s playback rate to the other deck’s BPM
  • LOOP — sets loop points around the current playhead
  • Hot Cues (HOT 1/2/3) — saves and recalls jump points
  • EQ knobs (High / Mid / Low) — shelving and peaking filters on the audio chain
  • Echo and Reverb — send-return effects shared with built-in tracks
  • Scratch — drag the vinyl graphic to scrub through the AudioBuffer

​
Privacy and Local File Access

File access is entirely local and private. NEON DJ uses the browser’s File API (file.arrayBuffer()) to read the selected file directly into memory. No data is sent to any server, no temporary files are written to disk, and no third-party service ever sees your audio. The file is held in RAM as a decoded AudioBuffer for the duration of the page session and discarded when you close the tab.
Keep memory usage in mind when working with long or uncompressed files.
Large audio files consume significant RAM. AudioContext.decodeAudioData() expands compressed formats (MP3, AAC, OGG) to raw 32-bit floating-point PCM. A 10-minute stereo MP3 that is ~14 MB on disk becomes roughly 200 MB in memory as a decoded AudioBuffer. Loading multiple large files across both decks can approach the memory limits of lower-end devices. For best results, keep individual tracks under 10 minutes when mixing on mobile or older hardware.
See the related pages below for the built-in track library and the technical details of how track generation works.

Built-in Track Library

Browse all 18 synthesized tracks included with NEON DJ, with BPM values and style descriptions.

Track Generation Reference

Learn how generateTrack and the synthesis helper functions work under the hood.

Build docs developers (and LLMs) love

Get started for freeTalk to us