Français

English
Español
日本語

Français

English
Español
日本語

Appearance

Intégrer votre tracklist sur le web ​

Le widget dlp-player permet d'intégrer une tracklist synchronisée sur n'importe quel site web. Les visiteurs voient le morceau en cours surligné pendant la lecture de l'enregistrement.

Essayer la démo en ligne →

Prérequis ​

  • Un fichier JSON de playlist exporté depuis DJ Live Playlist (avec une session enregistrée)
  • Une page web contenant un <video>, <audio> ou <iframe> YouTube/SoundCloud

Installation ​

Via npm ​

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

Via 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>

Démarrage rapide ​

Ajoutez la classe dlp et un attribut data-dlp-src pointant vers votre JSON de playlist sur n'importe quel élément média :

html
<!-- Avec un fichier vidéo -->
<video class="dlp" data-dlp-src="/playlist.json" src="mon-mix.mp4" controls></video>

<!-- Avec un fichier audio -->
<audio class="dlp" data-dlp-src="/playlist.json" src="mon-mix.mp3" controls></audio>

<!-- Avec une vidéo YouTube -->
<iframe class="dlp" data-dlp-src="/playlist.json"
        src="https://www.youtube.com/embed/VIDEO_ID"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>

Le widget s'initialise automatiquement au chargement de la page — aucun JavaScript nécessaire.

Modes d'affichage ​

Mode liste (par défaut) ​

La tracklist apparaît à côté du lecteur. Le morceau en cours est surligné et défilé automatiquement.

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

Mode overlay ​

La tracklist est superposée en bas du lecteur avec des animations de fondu.

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

Comment ça marche ​

  1. Le widget lit le JSON de playlist exporté depuis DLP
  2. Il utilise le recordingStartTime et le playHistory de chaque track pour calculer les offsets
  3. Pendant la lecture, le SyncEngine associe le currentTime aux tracks actifs
  4. L'affichage se met à jour en temps réel

Lecteurs supportés ​

ÉlémentDétection automatique
<video>Événement natif timeupdate
<audio>Événement natif timeupdate
YouTube <iframe>YouTube IFrame API (chargée automatiquement)
SoundCloud <iframe>SoundCloud Widget API

Personnalisation CSS ​

Redéfinissez les variables CSS pour correspondre au design de votre site :

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
// L'auto-init se fait au DOMContentLoaded
// Accéder aux instances :
DLP.instances // Tableau de DlpInstance
DLP.init()    // Re-scanner la page pour de nouveaux éléments

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)