# Live audio preset
The live audio preset — a player, feature bundle, skins, and media for live audio streams
`@videojs/react/live-audio` is the preset for live audio streams. It bundles `LiveAudioPlayer`, the `liveAudioFeatures` bundle it is configured with, two skins that swap the time slider and time displays for a Live button, and the `Audio` media component. See [Presets](https://videojs.org/docs/framework/react/guides/presets) for how presets fit together and [Live streams](https://videojs.org/docs/framework/react/guides/live-streams) for playing a live source.
## Import
```tsx
import { Audio, LiveAudioPlayer, LiveAudioSkin } from '@videojs/react/live-audio';
import '@videojs/react/live-audio/skin.css';
```
Each skin has its own stylesheet. Import `@videojs/react/live-audio/neutral-skin.css` instead when you use `NeutralLiveAudioSkin`.
## Usage
Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native audio.
**App.tsx**
```tsx
import { HlsAudio } from '@videojs/react/media/hls-audio';
import { LiveAudioPlayer, LiveAudioSkin } from '@videojs/react/live-audio';
import '@videojs/react/live-audio/skin.css';
export function App() {
return (
);
}
```
## Player
`LiveAudioPlayer` 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 `liveAudioFeatures`. It provides the player store to its descendants and renders no DOM element of its own.
`LiveAudioPlayerProps` 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 `liveAudioFeatures`. Use it from any component inside `LiveAudioPlayer`; see [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player).
## Feature bundle
`liveAudioFeatures` is the array of [features](https://videojs.org/docs/framework/react/guides/features) the player is configured with. It is the [audio preset’s](https://videojs.org/docs/framework/react/reference/api/preset-audio#feature-bundle) `audioFeatures` without playback rate, plus the [live feature](https://videojs.org/docs/framework/react/reference/api/feature-live):
| Feature | Description |
| --- | --- |
| [`playbackFeature`](https://videojs.org/docs/framework/react/reference/api/feature-playback) | Play/pause 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 |
| [`liveFeature`](https://videojs.org/docs/framework/react/reference/api/feature-live) | Live edge state 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, `LiveAudioFeatures`, is the tuple of those features in order. Import it from the package root:
```tsx
import type { LiveAudioFeatures } 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, streamTypeFeature } from '@videojs/react';
import { liveAudioFeatures } from '@videojs/react/live-audio';
const { Player, usePlayer } = createPlayer({
features: [...liveAudioFeatures, streamTypeFeature],
});
```
## Skins
- [LiveAudioSkin](https://videojs.org/docs/framework/react/reference/components/live-audio-skin) — the default skin, which swaps the time controls for a Live button.
- [NeutralLiveAudioSkin](https://videojs.org/docs/framework/react/reference/components/live-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), the same component as the audio preset, which renders a native `