Skip to content

ReferenceMedia

HlsAudio

Audio-only HLS element that plays the audio rendition of an HLS stream

Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see the HLS video component.

Import

import { HlsAudio } from '@videojs/react/media/hls-audio';

Examples

Basic Usage

import { HlsAudio } from '@videojs/react/media/hls-audio';

export default function BasicUsage() {
  return <HlsAudio className="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls />;
}

API Reference

Props

Accepts the standard React props for a native <audio>, plus these Video.js-specific props:

PropTypeDefaultDetails
crossOrigin'anonymous' | 'use-credentials' | nullnull
disableRemotePlaybackbooleanfalse
preload'' | 'none' | 'metadata' | 'auto'''
sourceobjectnull
srcstring''

Refs

ref

Forwards to the rendered <audio>, an HTMLAudioElement with its complete native property and method API.

const ref = useRef<HTMLAudioElement>(null);

<HlsAudio ref={ref} />

mediaRef

Receives the HlsAudioAdapter that drives the <audio>, the same object useMedia() returns inside a player. It forwards the native media methods, properties, and events, such as play() and currentTime, and exposes the playback engine through engine. It is set once the adapter has attached to the element and cleared when the element unmounts. For DOM-only APIs, use ref. 

import type { HlsAudioAdapter } from '@videojs/spf/hls-audio';

const mediaRef = useRef<HlsAudioAdapter>(null);

<HlsAudio mediaRef={mediaRef} />

// In an event handler
mediaRef.current?.play();

Events

Handle standard media events with React event props such as onPlay and onTimeUpdate. For native events without a React prop, attach a listener through the ref with addEventListener.