useMediaMetadata

Fluxlay デスクトップアプリからストリーミングされる、システムで再生中のメディア情報をサブスクライブします。Spotify や Apple Music などのメディアプレーヤーの曲名、アーティスト、アルバムアートワーク、再生状態を取得できます。

インポート

import { useMediaMetadata } from "@fluxlay/react";

シグネチャ

function useMediaMetadata(options?: MediaMetadataOptions): MediaMetadataInfo;

引数

MediaMetadataOptions

プロパティ	型	デフォルト	説明
`intervalMs`	`number`	`1000`	ポーリング間隔（ミリ秒）。

戻り値

プロパティ	型	説明
`title`	`string \| null`	曲名。
`artist`	`string \| null`	アーティスト名。
`album`	`string \| null`	アルバム名。
`artwork`	`string \| null`	アートワーク画像の data URL（`data:image/...;base64,...`）。
`duration`	`number \| null`	曲の長さ（秒）。
`elapsedTime`	`number \| null`	経過再生時間（秒）。
`playbackRate`	`number \| null`	再生速度（0.0 = 一時停止、1.0 = 再生中）。
`isPlaying`	`boolean`	メディアが再生中かどうか。

最初のイベントを受信するまで全フィールドが null（isPlaying は false）を返します。

使用例

function Wallpaper() {
  const { title, artist, artwork, isPlaying } = useMediaMetadata({ intervalMs: 1000 });
 
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      {artwork && <img src={artwork} alt="Album art" width={120} />}
      <div>
        <h2>{title ?? "再生中の曲はありません"}</h2>
        <p>{artist}</p>
        <p>{isPlaying ? "▶ 再生中" : "⏸ 一時停止"}</p>
      </div>
    </div>
  );
}

useProperties と組み合わせる

useProperties と組み合わせることで、エンドユーザーがポーリング間隔を変更できるようになります。

function Wallpaper() {
  const props = useProperties();
  const meta = useMediaMetadata({ intervalMs: props.updateInterval as number });
  // ...
}

備考

macOS 15.4 以降では、システムの Now Playing 情報取得に JavaScript for Automation（JXA）ベースのアダプターを使用します。
メディア情報はイベント駆動で更新されます（曲変更・再生/停止時）。経過時間はバックエンド側で補間されます。
アートワークは data URL 形式（Base64 エンコード済み）で提供されるため、<img> タグの src にそのまま設定できます。
このフックは Fluxlay デスクトップアプリ内でのみ動作します。通常のブラウザでは初期値を返します。
options の値が変更されると、ストリームが自動的に再接続されます。