日本語

English
Français
Español

日本語

English
Français
Español

Appearance

Webサイトにトラックリストを埋め込む ​

dlp-playerウィジェットを使えば、同期されたトラックリストを任意のWebサイトに埋め込めます。録音の再生中に、現在のトラックがハイライト表示されます。

ライブデモを試す →

前提条件 ​

  • DJ Live PlaylistからエクスポートしたプレイリストJSON（録音セッション付き）
  • <video>、<audio>、またはYouTube/SoundCloudの<iframe>を含むWebページ

インストール ​

npm経由 ​

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

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>

クイックスタート ​

任意のメディア要素にdlpクラスとプレイリストJSONを指すdata-dlp-src属性を追加します：

html
<!-- 動画ファイルの場合 -->
<video class="dlp" data-dlp-src="/playlist.json" src="my-mix.mp4" controls></video>

<!-- 音声ファイルの場合 -->
<audio class="dlp" data-dlp-src="/playlist.json" src="my-mix.mp3" controls></audio>

<!-- YouTube動画の場合 -->
<iframe class="dlp" data-dlp-src="/playlist.json"
        src="https://www.youtube.com/embed/VIDEO_ID"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>

ウィジェットはページ読み込み時に自動初期化されます — JavaScriptは不要です。

表示モード ​

リストモード（デフォルト） ​

トラックリストがプレーヤーの横に表示されます。現在のトラックがハイライトされ、自動スクロールされます。

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

オーバーレイモード ​

トラックリストがプレーヤーの下部にフェードイン/フェードアウトアニメーション付きで重ねて表示されます。

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

仕組み ​

  1. ウィジェットがDLPからエクスポートしたプレイリストJSONを読み込みます
  2. recordingStartTimeと各トラックのplayHistoryを使用してオフセットを計算します
  3. 再生中、SyncEngineがcurrentTimeをアクティブなトラックに照合します
  4. 表示がリアルタイムで更新されます

対応プレーヤー ​

要素自動検出
<video>ネイティブtimeupdateイベント
<audio>ネイティブtimeupdateイベント
YouTube <iframe>YouTube IFrame API（自動読み込み）
SoundCloud <iframe>SoundCloud Widget API

CSSカスタマイズ ​

CSS変数を上書きしてサイトのデザインに合わせます：

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

JavaScript API ​

UMD（グローバル） ​

js
// DOMContentLoadedで自動初期化
// インスタンスにアクセス：
DLP.instances // DlpInstanceの配列
DLP.init()    // ページを再スキャンして新しい要素を検出

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)