Embed your tracklist on the web

The dlp-player widget lets you embed a synchronised tracklist on any website. Viewers see the current track highlighted as the recording plays back.

Try the live demo →

Prerequisites

• A playlist JSON exported from DJ Live Playlist (with a recorded session)
• A web page with a <video>, <audio> or YouTube/SoundCloud <iframe>

Installation

Via npm

npm install dlp-player

import 'dlp-player/style.css'
import 'dlp-player'

Via CDN

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

Quick start

Add the dlp class and a data-dlp-src attribute pointing to your playlist JSON on any media element:

<!-- With a video file -->
<video class="dlp" data-dlp-src="/playlist.json" src="my-mix.mp4" controls></video>

<!-- With an audio file -->
<audio class="dlp" data-dlp-src="/playlist.json" src="my-mix.mp3" controls></audio>

<!-- With a YouTube video -->
<iframe class="dlp" data-dlp-src="/playlist.json"
        src="https://www.youtube.com/embed/VIDEO_ID"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>

The widget auto-initialises on page load — no JavaScript needed.

Display modes

List mode (default)

The tracklist appears beside the player. The current track is highlighted and auto-scrolled into view.

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

Overlay mode

The tracklist is superimposed at the bottom of the player with fade-in/fade-out animations.

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

How it works

1. The widget reads the playlist JSON exported from DLP
2. It uses the recordingStartTime and each track's playHistory to compute offsets
3. As the media plays, the SyncEngine matches currentTime to the active track(s)
4. The display updates in real time

Supported players

Element	Auto-detection
<video>	Native timeupdate event
<audio>	Native timeupdate event
YouTube <iframe>	YouTube IFrame API (auto-loaded)
SoundCloud <iframe>	SoundCloud Widget API

CSS customisation

Override CSS variables to match your site's design:

.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;
}

JavaScript API

UMD (global)

// Auto-init happens on DOMContentLoaded
// Access instances:
DLP.instances // Array of DlpInstance
DLP.init()    // Re-scan the page for new elements

ESM (import)

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

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