SimpleHlsAudioOnly

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

Examples

Basic Usage

import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only';

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

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

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

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

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

API Reference

Props

Accepts the standard React props for a native <audio>.

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.