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
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 same HTMLAudioElement as ref. Embed components hand their playback adapter to mediaRef instead, so code that works with several media components can read the playback object from one prop. 

const mediaRef = useRef<HTMLAudioElement>(null);

<HlsAudio mediaRef={mediaRef} />

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.