メディアプレーヤー

Xingluo は APlayer（オーディオ）と DPlayer（ビデオ）を統合し、Markdown と MDX でプレーヤーを作成する2つの方法をサポート、すべて遅延読み込みされます。

有効化

xingluo.config.ts の features.players で必要に応じて各プレーヤーを切り替えます：

ts
features: {
  players: {
    aplayer: true,  // APlayer オーディオプレーヤーを有効化
    dplayer: true,  // DPlayer ビデオプレーヤーを有効化
  },
}

両者は独立しています。無効化すると：

• remarkPlayers プラグインが注入されない（MD フェンスが解析されない）
• プレーヤークライアントスクリプトが読み込まれない
• ビルド出力に aplayer / dplayer チャンクが含まれない

2つの使用モード

どちらのモードも最終的に同じプレースホルダー div 構造（<div class="xng-aplayer|xng-dplayer" data-config>）を出力し、src/scripts/players.ts によって遅延読み込みおよびインスタンス化されます。

APlayer オーディオプレーヤー

MD フェンス

markdown
```aplayer
{
  "audio": [
    {
      "name": "曲名",
      "artist": "アーティスト",
      "url": "/audio/song.mp3",
      "cover": "/images/cover.jpg",
      "lrc": "[00:00.00] 歌詞の最初の行"
    }
  ],
  "theme": "#b7daff",
  "loop": "all",
  "autoplay": false
}
```

MDX コンポーネント

mdx
import { APlayer } from "@/components/mdx";

<APlayer
  audio={[
    {
      name: "曲名",
      artist: "アーティスト",
      url: "/audio/song.mp3",
      cover: "/images/cover.jpg",
    },
  ]}
  theme="#b7daff"
  loop="all"
/>

オプション

audio オブジェクト

DPlayer ビデオプレーヤー

MD フェンス

markdown
```dplayer
{
  "video": {
    "url": "/videos/demo.mp4",
    "pic": "/images/video-cover.jpg",
    "type": "auto"
  },
  "theme": "#b7daff",
  "autoplay": false,
  "loop": false
}
```

MDX コンポーネント

mdx
import { DPlayer } from "@/components/mdx";

<DPlayer
  video={{ url: "/videos/demo.mp4", pic: "/images/video-cover.jpg" }}
  theme="#b7daff"
  subtitle={{ url: "/subtitles.vtt", type: "webvtt" }}
/>

オプション

video オブジェクト

subtitle オブジェクト

danmaku オブジェクト

遅延読み込みメカニズム

プレーヤーは IntersectionObserver を介して遅延読み込みされます：プレースホルダー div がビューポートの200px以内に入ったときにのみ、プレーヤーモジュールとスタイルを動的 import してインスタンス化します。

• APlayer：動的 import("aplayer") + import("aplayer/dist/APlayer.min.css")
• DPlayer：動的 import("dplayer")（スタイルは JS にインライン化。個別の CSS は不要）

モジュール読み込みは共有 Promise キャッシュを使用して、繰り返しの動的インポートを回避します。再インスタンス化は dataset マーカー（xng-init、xng-observed）によって防止されます。

View Transitions 適応

プレーヤースクリプトは astro:page-load をリッスンし、各ページ読み込み後にプレースホルダー div を再スキャンします。View Transitions によるページ切り替え後、新しいページのプレーヤープレースホルダーが再観察されて遅延読み込みされます。

パフォーマンス

• プレーヤー無効時はバンドルゼロ（remark プラグインが注入されず、クライアントスクリプトも読み込まれない）
• 有効でもページにプレーヤーがない場合はランタイムゼロ（スクリプトは読み込まれるがインスタンス化しない）
• プレーヤーモジュールはスタンドアロンチャンクで、使用するページでのみオンデマンド読み込み
• CSS と JS は別々にインポートされ、インスタンス化前にスタイルが準備されることを保証

タイプ宣言

APlayerとDPlayerには公式のTypeScript型がありません。Xingluoは src/types/aplayer.d.ts と src/types/dplayer.d.ts に緩やかなモジュール宣言を提供し、スプレッド互換性のためにオプションフィールドはオプショナルに設定されています。MDXコンポーネントのPropsは完全な型制約を持ちます。