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

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 />;
}

.hls-audio {
  width: 100%;
  height: 54px;
}

<hls-audio class="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls></hls-audio>

.hls-audio {
  width: 100%;
  height: 54px;
}

import '@videojs/html/media/hls-audio';

API Reference

Props

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

Prop	Type	Default
`disableRemotePlayback`	`boolean`	`false`
`preload`	`'' \| 'none' \| 'metadata' \| 'auto'`	`''`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`src`	`string`	`''`

Ref

Forwards its ref to the rendered <audio>. The ref is an HTMLAudioElement and exposes its complete native property and method API.

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.