ReferencePresets

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 for how presets fit together and Live streams for playing a live source.

Import

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 bundle that registers the player and a skin together:

<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.

<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 element created by createPlayer with liveAudioFeatures. It owns the player store but no layout. Put a skin or a <media-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. 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.

Feature bundle

liveAudioFeatures is the array of features the player is configured with. It is the audio preset’s audioFeatures without playback rate, plus the live feature:

Feature	Description
`playbackFeature`	Play/pause state and actions for the player store
`volumeFeature`	Volume level and mute state for the player store
`timeFeature`	Playback position and duration state for the player store
`sourceFeature`	Media source state and actions for the player store
`bufferFeature`	Buffered and seekable time range state for the player store
`errorFeature`	Media error state and actions for the player store
`liveFeature`	Live edge state for the player store
`metadataFeature`	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:

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.

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 — the default skin, which swaps the time controls for a Live button.
NeutralLiveAudioSkin — the visually lighter variant, closer to a classic control bar.

Media

The preset plays through a native <audio>, so it registers no media component of its own. Most browsers need a streaming media component to play a live source, such as <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 element class.
`PlayerController`	The player controller, bound to the live audio player’s store.
`liveAudioFeatures`	The feature bundle.
`LiveAudioSkinElement`	The default skin element class.
`NeutralLiveAudioSkinElement`	The neutral skin 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