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

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>.

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

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 for full API details.