Skip to content

ReferencePresets

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

Import

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.

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 (
    <LiveAudioPlayer>
      <LiveAudioSkin>
        <HlsAudio src="https://example.com/live.m3u8" />
      </LiveAudioSkin>
    </LiveAudioPlayer>
  );
}

Player

LiveAudioPlayer is a Player created by createPlayer 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.

The preset also exports a usePlayer hook typed to liveAudioFeatures. Use it from any component inside LiveAudioPlayer; see usePlayer.

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:

FeatureDescription
playbackFeaturePlay/pause state and actions for the player store
volumeFeatureVolume level and mute state for the player store
timeFeaturePlayback position and duration state for the player store
sourceFeatureMedia source state and actions for the player store
bufferFeatureBuffered and seekable time range state for the player store
errorFeatureMedia error state and actions for the player store
liveFeatureLive edge state for the player store
metadataFeatureResolved 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/react';

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/react';
import { liveAudioFeatures } from '@videojs/react/live-audio';

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

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 exports Audio, the same component as the audio preset, which renders a native <audio>. Most browsers need a streaming media component to play a live source, such as HlsAudio for HLS.

Exports

@videojs/react/live-audio exports:

Export Description
LiveAudioPlayer, LiveAudioPlayerProps The preconfigured player.
usePlayer The player-store hook, typed to liveAudioFeatures.
liveAudioFeatures The feature bundle.
LiveAudioSkin, LiveAudioSkinProps The default skin.
NeutralLiveAudioSkin, NeutralLiveAudioSkinProps The neutral skin.
Audio, AudioProps The media component.

Stylesheets: @videojs/react/live-audio/skin.css and @videojs/react/live-audio/neutral-skin.css.