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

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

## 基本的な使い方

```tsx
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` にそのまま指定できます。

```tsx
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>
  );
}
```

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

```tsx
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 リファレンス](/ja/studio/developer/reference/sdk/use-media-metadata.md)を参照してください。