useMediaSession

npx sse-tool add use-media-session

npm install sse-hooks

import { useMediaSession } from "./{hooks file}";

const MyPlayer = () => {
  const { setMetadata, setPlaybackState } = useMediaSession({
    playbackState: "playing",
    metadata: {
      title: "Awesome Song",
      artist: "Cool Artist",
      album: "Best Hits",
      artwork: [
        { src: "/album-art.jpg", sizes: "512x512", type: "image/jpeg" },
      ],
    },
    actionHandlers: {
      play: () => console.log("Play clicked"),
      pause: () => console.log("Pause clicked"),
      nexttrack: () => console.log("Next track clicked"),
    },
  });

  return <div>Now Playing...</div>;
};

import { useMediaSession } from "sse-hooks";

const MyPlayer = () => {
  const { setMetadata, setPlaybackState } = useMediaSession({
    playbackState: "playing",
    metadata: {
      title: "Awesome Song",
      artist: "Cool Artist",
      album: "Best Hits",
      artwork: [
        { src: "/album-art.jpg", sizes: "512x512", type: "image/jpeg" },
      ],
    },
    actionHandlers: {
      play: () => console.log("Play clicked"),
      pause: () => console.log("Pause clicked"),
      nexttrack: () => console.log("Next track clicked"),
    },
  });

  return <div>Now Playing...</div>;
};