Skip to content

ReferencePresets

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 for how presets fit together and how to customize one.

Import

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

import { Audio, AudioPlayer, AudioSkin } from '@videojs/react/audio';
import '@videojs/react/audio/skin.css';

export function App() {
  return (
    <AudioPlayer>
      <AudioSkin>
        <Audio src="audio.m4a" />
      </AudioSkin>
    </AudioPlayer>
  );
}

Player

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

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

Feature bundle

audioFeatures is the array of features the player is configured with, a subset of the video preset’s videoFeatures:

FeatureDescription
playbackFeaturePlay/pause state and actions for the player store
playbackRateFeaturePlayback speed 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
metadataFeatureResolved 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:

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.

import { createPlayer, remotePlaybackFeature } from '@videojs/react';
import { audioFeatures } from '@videojs/react/audio';

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

Skins

  • AudioSkin — the default skin, with the modern, frosted look.
  • NeutralAudioSkin — the visually lighter variant, closer to a classic control bar.

Media

The preset exports Audio, which renders a native <audio>. Swap it for any compatible media component, such as HlsAudio for HLS.

Exports

@videojs/react/audio exports:

Export Description
AudioPlayer, AudioPlayerProps The preconfigured player.
usePlayer The player-store hook, typed to audioFeatures.
audioFeatures The feature bundle.
AudioSkin, AudioSkinProps The default skin.
NeutralAudioSkin, NeutralAudioSkinProps The neutral skin.
Audio, AudioProps The media component.

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