# AudioPlayerProvider

Keep an audio session across page changes.

## How to use it

Mount it in a persistent layout. useAudioPlayer returns play and close to control the session from descendants.

To start audio, call play({ id: "track", src: "/audio.mp3", type: "audio", title: "My track" }) with an existing file. The provider must sit above pages that share playback.

## Import


```tsx
import { AudioPlayerProvider } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
function Example() {
 function Controls() {
 const { close } = useAudioPlayer();
 return <Button variant="outline" onClick={close}>Close audio session</Button>;
 }
 return <AudioPlayerProvider><Controls /></AudioPlayerProvider>;
}
```


## API: AudioPlayerProvider


```typescript
declare function AudioPlayerProvider({ children, ...props }: React.PropsWithChildren<Omit<PlayerProps, 'source' | 'controller' | 'autoPlay'>>): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| activeQueueId | string | No | See the published type. |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| controlsVariant | "standard" \| "compact" \| "cinema" \| "series" | No | Presentation of player controls. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| locale | string | No | Localization in the format expected by the component. |
| messages | Partial<{ play: string; pause: string; seek: string; volume: string; mute: string; unmute: string; fullscreen: string; exitFullscreen: string; pip: string; settings: string; quality: string; audio: string; subtitles: string; speed: string; auto: string; off: string; live: string; goLive: string; loading: string; splash: string; ad: string; containsAds: string; skipAd: string; error: string; retry: string; download: string; cancelDownload: string; downloads: string; remove: string; playOffline: string; downloading: string; close: string; expand: string; collapse: string; exportFile: string; emptyDownloads: string; expired: string; back: string; forward: string; downloadError: string; actionError: string; upNext: string; nowPlaying: string; episodes: string; previous: string; next: string; }> | No | Localized messages replacing the defaults. |
| muted | boolean | No | Start or keep playback muted. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onQueueSelect | ((item: PlayerQueueItem) => void) | No | See the published type. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| options | PlayerControllerOptions | No | Component options or configuration. See the type structure. |
| overlays | PlayerOverlay[] | No | See the published type. |
| presentation | "footer" \| "inline" \| "sheet" | No | Audio players can live in the footer and expand into a bottom sheet. |
| program | PlayerProgram | No | See the published type. |
| queue | PlayerQueueItem[] | No | See the published type. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| settingsLayout | "list" \| "tabs" | No | Mobile settings presentation; list preserves the previous layout. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/audio-player-provider