Español

English
Français
日本語

Español

English
Français
日本語

Appearance

Integra tu tracklist en la web ​

El widget dlp-player permite integrar una tracklist sincronizada en cualquier sitio web. Los visitantes ven el tema actual resaltado mientras se reproduce la grabación.

Probar la demo en vivo →

Requisitos previos ​

  • Un archivo JSON de playlist exportado desde DJ Live Playlist (con una sesión grabada)
  • Una página web con un <video>, <audio> o <iframe> de YouTube/SoundCloud

Instalación ​

Vía npm ​

bash
npm install dlp-player
js
import 'dlp-player/style.css'
import 'dlp-player'

Vía CDN ​

html
<link rel="stylesheet" href="https://unpkg.com/dlp-player/dist/dlp-player.css">
<script src="https://unpkg.com/dlp-player/dist/dlp-player.umd.js"></script>

Inicio rápido ​

Añade la clase dlp y un atributo data-dlp-src apuntando a tu JSON de playlist en cualquier elemento multimedia:

html
<!-- Con un archivo de vídeo -->
<video class="dlp" data-dlp-src="/playlist.json" src="mi-mix.mp4" controls></video>

<!-- Con un archivo de audio -->
<audio class="dlp" data-dlp-src="/playlist.json" src="mi-mix.mp3" controls></audio>

<!-- Con un vídeo de YouTube -->
<iframe class="dlp" data-dlp-src="/playlist.json"
        src="https://www.youtube.com/embed/VIDEO_ID"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>

El widget se inicializa automáticamente al cargar la página — no se necesita JavaScript.

Modos de visualización ​

Modo lista (por defecto) ​

La tracklist aparece junto al reproductor. El tema actual se resalta y se desplaza automáticamente.

html
<video class="dlp" data-dlp-src="/playlist.json" data-dlp-mode="list"
       src="mix.mp4" controls></video>

Modo overlay ​

La tracklist se superpone en la parte inferior del reproductor con animaciones de desvanecimiento.

html
<video class="dlp" data-dlp-src="/playlist.json" data-dlp-mode="overlay"
       src="mix.mp4" controls></video>

Cómo funciona ​

  1. El widget lee el JSON de playlist exportado desde DLP
  2. Usa el recordingStartTime y el playHistory de cada tema para calcular los offsets
  3. Durante la reproducción, el SyncEngine asocia el currentTime con los temas activos
  4. La visualización se actualiza en tiempo real

Reproductores soportados ​

ElementoDetección automática
<video>Evento nativo timeupdate
<audio>Evento nativo timeupdate
YouTube <iframe>YouTube IFrame API (cargada automáticamente)
SoundCloud <iframe>SoundCloud Widget API

Personalización CSS ​

Redefine las variables CSS para adaptarte al diseño de tu sitio:

css
.dlp-wrapper {
  --dlp-bg: #1a1a2e;
  --dlp-text-color: #eee;
  --dlp-highlight-bg: rgba(14, 165, 233, 0.2);
  --dlp-title-size: 1rem;
  --dlp-artist-size: 0.85rem;
}

API JavaScript ​

UMD (global) ​

js
// La auto-inicialización ocurre en DOMContentLoaded
// Acceder a las instancias:
DLP.instances // Array de DlpInstance
DLP.init()    // Re-escanear la página para nuevos elementos

ESM (import) ​

js
import { DlpInstance, SyncEngine, loadPlaylist } from 'dlp-player'

const playlist = await loadPlaylist('/path/playlist.json')
const sync = new SyncEngine(playlist)
const activeIds = sync.getActiveTrackIds(currentTimeInSeconds)