# Display Now Playing Media

Use `useMediaMetadata()` to get the title, artist, and artwork of the track currently playing in any system media player (Spotify, Apple Music, etc.).

## Basic usage

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

## Show album artwork

`artwork` is returned as a base64-encoded data URL, so you can pass it directly to `<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 ?? "Nothing playing"}</div>
        <div>{artist}</div>
      </div>
    </div>
  );
}
```

## Playback progress bar

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

## Notes

- All fields return `null` or `false` when nothing is playing.
- Tune the polling interval with `intervalMs` (default 1000ms). Lower values increase battery drain.
- On macOS, the first run prompts for "Media & Activity" access.
- Only data exposed by the player to the OS media-control API is available.

See the [useMediaMetadata Reference](/en/studio/developer/reference/sdk/use-media-metadata.md) for full API details.