FLUXLAY

再生中のメディア情報の表示

useMediaMetadata() を使って、システム上のメディアプレイヤー（Spotify、Apple Music など）で現在再生されている曲のタイトル、アーティスト、アートワークを取得します。

基本的な使い方

import { useMediaMetadata } from "@fluxlay/react";
 
function NowPlaying() {
  const { title, artist, isPlaying } = useMediaMetadata();
 
  if (!isPlaying || !title) {
    return null;
  }
 
  return (
    <div style={{ position: "absolute", bottom: 40, left: 40, color: "white" }}>
      <div style={{ fontSize: 24, fontWeight: 600 }}>{title}</div>
      <div style={{ opacity: 0.7 }}>{artist}</div>
    </div>
  );
}

アートワーク付きで表示する

artwork は base64 エンコードされたデータ URL で返されるため、<img> の src にそのまま指定できます。

function NowPlayingCard() {
  const { title, artist, artwork } = useMediaMetadata();
 
  return (
    <div style={{ display: "flex", gap: 16, padding: 16 }}>
      {artwork && <img src={artwork} alt="" style={{ width: 80, height: 80, borderRadius: 8 }} />}
      <div>
        <div>{title ?? "再生中の曲はありません"}</div>
        <div>{artist}</div>
      </div>
    </div>
  );
}

再生位置のプログレスバー

function Progress() {
  const { duration, elapsedTime } = useMediaMetadata();
  const progress = duration && elapsedTime ? (elapsedTime / duration) * 100 : 0;
 
  return (
    <div style={{ height: 4, background: "rgba(255,255,255,0.2)" }}>
      <div style={{ height: "100%", width: `${progress}%`, background: "white" }} />
    </div>
  );
}

注意事項

  • 何も再生されていない場合、すべてのフィールドが null または false を返します。
  • ポーリング間隔は intervalMs で調整可能です（デフォルト 1000ms）。短すぎるとバッテリ消費が増えます。
  • macOS では初回に「メディアとアクティビティ」アクセスを許可する必要があります。
  • 取得できる情報はプレイヤーが OS のメディアコントロール API に公開しているデータに限られます。

詳細は useMediaMetadata リファレンスを参照してください。