# Audio preset
The audio-only preset — a player, feature bundle, skins, and media for on-demand audio
`@videojs/react/audio` is the preset for on-demand audio. It bundles `AudioPlayer`, the `audioFeatures` bundle it is configured with, two skins, and the `Audio` media component. See [Presets](https://videojs.org/docs/framework/react/guides/presets) for how presets fit together and how to customize one.
## Import
```tsx
import { Audio, AudioPlayer, AudioSkin } from '@videojs/react/audio';
import '@videojs/react/audio/skin.css';
```
Each skin has its own stylesheet. Import `@videojs/react/audio/neutral-skin.css` instead when you use `NeutralAudioSkin`.
## Usage
**App.tsx**
```tsx
import { Audio, AudioPlayer, AudioSkin } from '@videojs/react/audio';
import '@videojs/react/audio/skin.css';
export function App() {
return (
);
}
```
## Player
`AudioPlayer` is a [`Player`](https://videojs.org/docs/framework/react/reference/components/player) created by [`createPlayer`](https://videojs.org/docs/framework/react/reference/api/create-player) with `audioFeatures`. It provides the player store to its descendants and renders no DOM element of its own.
`AudioPlayerProps` types its props:
| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` | Content placed inside the player context: a skin, the media, and your own components. |
| `title` | `string \| null` | The title to display. Takes precedence over the title the media reports; `null` clears your value, so the title falls back to the one the media reports. |
| `poster` | `string \| null` | The poster to display. Takes precedence over the poster the media reports; `null` clears your value, so the poster falls back to the one the media reports. |
`title` and `poster` come from the [metadata feature](https://videojs.org/docs/framework/react/reference/api/feature-metadata#player-inputs).
The preset also exports a `usePlayer` hook typed to `audioFeatures`. Use it from any component inside `AudioPlayer`; see [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player).
## Feature bundle
`audioFeatures` is the array of [features](https://videojs.org/docs/framework/react/guides/features) the player is configured with, a subset of the [video preset’s](https://videojs.org/docs/framework/react/reference/api/preset-video#feature-bundle) `videoFeatures`:
| Feature | Description |
| --- | --- |
| [`playbackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-playback) | Play/pause state and actions for the player store |
| [`playbackRateFeature`](https://videojs.org/docs/framework/react/reference/api/feature-playback-rate) | Playback speed state and actions for the player store |
| [`volumeFeature`](https://videojs.org/docs/framework/react/reference/api/feature-volume) | Volume level and mute state for the player store |
| [`timeFeature`](https://videojs.org/docs/framework/react/reference/api/feature-time) | Playback position and duration state for the player store |
| [`sourceFeature`](https://videojs.org/docs/framework/react/reference/api/feature-source) | Media source state and actions for the player store |
| [`bufferFeature`](https://videojs.org/docs/framework/react/reference/api/feature-buffer) | Buffered and seekable time range state for the player store |
| [`errorFeature`](https://videojs.org/docs/framework/react/reference/api/feature-error) | Media error state and actions for the player store |
| [`metadataFeature`](https://videojs.org/docs/framework/react/reference/api/feature-metadata) | Resolved title and poster values for the player store |
Its type, `AudioFeatures`, is the tuple of those features in order. Import it from the package root:
```tsx
import type { AudioFeatures } from '@videojs/react';
```
To add or remove a feature, pass your own array to `createPlayer`. The skins expect the features they render controls for.
```tsx
import { createPlayer, remotePlaybackFeature } from '@videojs/react';
import { audioFeatures } from '@videojs/react/audio';
const { Player, usePlayer } = createPlayer({
features: [...audioFeatures, remotePlaybackFeature],
});
```
## Skins
- [AudioSkin](https://videojs.org/docs/framework/react/reference/components/audio-skin) — the default skin, with the modern, frosted look.
- [NeutralAudioSkin](https://videojs.org/docs/framework/react/reference/components/audio-neutral-skin) — the visually lighter variant, closer to a classic control bar.
## Media
The preset exports [`Audio`](https://videojs.org/docs/framework/react/reference/components/audio), which renders a native `