Installation
npx sse-hooks add use-media-session
yarn dlx sse-hooks add use-media-session
pnpm dlx sse-hooks add use-media-session
deno run -A npm:sse-hooks add use-media-session
bunx sse-hooks add use-media-session
Usage
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>;
};
API
Parameters
| Prop | Default | Type |
|---|---|---|
options | - |
Initial configuration for the media session.
|
Returns
| Return Value | Default | Type |
|---|---|---|
clearActionHandlers | - |
Function to clear all registered action handlers. |
isSupported | - |
Whether the Media Session API is supported in the current environment. |
setActionHandler | - |
Function to set a specific action handler. |
setMetadata | - |
Function to update the media metadata. |
setPlaybackState | - |
Function to update the playback state. |