Skip to content
FrameworkStyle

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

API Reference

Host Properties

Property Type Default Details
engine Composition<SimpleHlsAudioOnlyEngineState, SimpleHlsAudioOnlyEngineContext> —
preload '' | 'none' | 'metadata' | 'auto' ''
src string ''

Attributes

Renders a native <audio> element and accepts these media attributes as React props. The standard ones behave as described in the MDN media attributes reference: autopictureinpictureautoPlaycontrolscontrolslistcrossOrigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysInlineposterpreloadsrcstream-type

Events

Handle these media events with React event props (e.g. onPlay, onTimeUpdate). See media events: abortcanplaycanplaythroughdurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeseekedseekingstalledsuspendtimeupdatevolumechangewaiting

These media events have no React prop — attach a listener through a ref with addEventListener: addtrackchangeremovetrack

This element dispatches no events beyond the media events above.

Methods

Supports these methods from the native media API. See HTMLMediaElement for the core methods: addTextTrackcanPlayTypeloadpauseplay

In React, call these through a ref to the element.