# Live audio preset

The live audio preset — a player, feature bundle, skins, and media for live audio streams

`@videojs/html/live-audio` is the preset for live audio streams. It bundles the `<live-audio-player>` element, the `liveAudioFeatures` bundle it is configured with, and two skins that swap the time slider and time displays for a Live button, and plays through the browser’s native `<audio>`. See [Presets](https://videojs.org/docs/framework/html/guides/presets) for how presets fit together and [Live streams](https://videojs.org/docs/framework/html/guides/live-streams) for playing a live source.

## Import

```ts
import '@videojs/html/live-audio/player';
import '@videojs/html/live-audio/skin';
```

Import `@videojs/html/live-audio/neutral-skin` instead for the neutral skin. Or load one [CDN](https://videojs.org/docs/framework/html/guides/cdn) bundle that registers the player and a skin together:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/live-audio.js"></script>
```

`live-audio-neutral.js` registers the neutral skin instead, and `live-audio-player.js` registers `<live-audio-player>` alone.

## Usage

Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native audio.

**index.html**

```html
<script type="module">
  import '@videojs/html/live-audio/player';
  import '@videojs/html/live-audio/skin';
  import '@videojs/html/media/hls-audio';
</script>

<live-audio-player>
  <live-audio-skin>
    <hls-audio src="https://example.com/live.m3u8"></hls-audio>
  </live-audio-skin>
</live-audio-player>
```

## Player

`@videojs/html/live-audio/player` registers `<live-audio-player>`, whose class is `LiveAudioPlayerElement`. It is a [player](https://videojs.org/docs/framework/html/reference/components/player) element created by [`createPlayer`](https://videojs.org/docs/framework/html/reference/api/html-create-player) with `liveAudioFeatures`. It owns the player store but no layout. Put a skin or a [`<media-container>`](https://videojs.org/docs/framework/html/reference/components/player-container) inside it.

| Attribute | Property | Description |
| --- | --- | --- |
| `content-title` | `contentTitle` | The title to display. Takes precedence over the title the media reports. |
| `poster` | `poster` | The poster to display. Takes precedence over the poster the media reports. |
| `keep-alive` | — | Keeps the player and its store alive when the element leaves the DOM. Call `destroy()` when you’re done with it. |

`content-title` and `poster` come from the [metadata feature](https://videojs.org/docs/framework/html/reference/api/feature-metadata#player-inputs). The element’s read-only `store` property returns its player store.

The preset root also exports a `PlayerController` bound to the live audio player’s store. Use it from any custom element inside `<live-audio-player>`; see [`PlayerController`](https://videojs.org/docs/framework/html/reference/api/player-controller).

## Feature bundle

`liveAudioFeatures` is the array of [features](https://videojs.org/docs/framework/html/guides/features) the player is configured with. It is the [audio preset’s](https://videojs.org/docs/framework/html/reference/api/preset-audio#feature-bundle) `audioFeatures` without playback rate, plus the [live feature](https://videojs.org/docs/framework/html/reference/api/feature-live):

| Feature | Description |
| --- | --- |
| [`playbackFeature`](https://videojs.org/docs/framework/html/reference/api/feature-playback) | Play/pause state and actions for the player store |
| [`volumeFeature`](https://videojs.org/docs/framework/html/reference/api/feature-volume) | Volume level and mute state for the player store |
| [`timeFeature`](https://videojs.org/docs/framework/html/reference/api/feature-time) | Playback position and duration state for the player store |
| [`sourceFeature`](https://videojs.org/docs/framework/html/reference/api/feature-source) | Media source state and actions for the player store |
| [`bufferFeature`](https://videojs.org/docs/framework/html/reference/api/feature-buffer) | Buffered and seekable time range state for the player store |
| [`errorFeature`](https://videojs.org/docs/framework/html/reference/api/feature-error) | Media error state and actions for the player store |
| [`liveFeature`](https://videojs.org/docs/framework/html/reference/api/feature-live) | Live edge state for the player store |
| [`metadataFeature`](https://videojs.org/docs/framework/html/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:

```ts
import type { LiveAudioFeatures } from '@videojs/html';
```

To add or remove a feature, pass your own array to `createPlayer`. The skins expect the features they render controls for.

```ts
import { createPlayer, streamTypeFeature } from '@videojs/html';
import { liveAudioFeatures } from '@videojs/html/live-audio';

const { PlayerElement } = createPlayer({
  features: [...liveAudioFeatures, streamTypeFeature],
});

customElements.define('my-live-audio-player', PlayerElement);
```

## Skins

- [LiveAudioSkin](https://videojs.org/docs/framework/html/reference/components/live-audio-skin) — the default skin, which swaps the time controls for a Live button.
- [NeutralLiveAudioSkin](https://videojs.org/docs/framework/html/reference/components/live-audio-neutral-skin) — the visually lighter variant, closer to a classic control bar.

## Media

The preset plays through a native [`<audio>`](https://videojs.org/docs/framework/html/reference/components/audio), so it registers no media component of its own. Most browsers need a streaming [media component](https://videojs.org/docs/framework/html/guides/media-sources) to play a live source, such as [`<hls-audio>`](https://videojs.org/docs/framework/html/reference/components/hls-audio) for HLS.

## Exports

The preset root, `@videojs/html/live-audio`, has no side effects. Importing it never registers an element:

| Export | Description |
| --- | --- |
| `LiveAudioPlayerElement` | The [player](#player) element class. |
| `PlayerController` | The player controller, bound to the live audio player’s store. |
| `liveAudioFeatures` | The [feature bundle](#feature-bundle). |
| `LiveAudioSkinElement` | The default [skin](#skins) element class. |
| `NeutralLiveAudioSkinElement` | The neutral [skin](#skins) element class. |

Registration entry points are side-effect-only:

| Entry point | Registers |
| --- | --- |
| `@videojs/html/live-audio/player` | `<live-audio-player>` |
| `@videojs/html/live-audio/skin` | `<live-audio-skin>`, `<media-container>`, and the UI elements the skin composes |
| `@videojs/html/live-audio/neutral-skin` | `<live-audio-neutral-skin>`, `<media-container>`, and the UI elements the neutral skin composes |
| `@videojs/html/live-audio/ui` | `<media-container>` and the UI elements of the default skin, without the skin, for a layout you write yourself |
| `@videojs/html/live-audio/neutral-ui` | `<media-container>` and the UI elements of the neutral skin, without the skin |

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt