simple-hls-audio-only

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

Host Properties

Property	Type	Default
`engine`	`Composition<SimpleHlsAudioOnlyEngineState, SimpleHlsAudioOnlyEngineContext>`	`—`
Description Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
`preload`	`'' \| 'none' \| 'metadata' \| 'auto'`	`''`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`src`	`string`	`''`

Attributes

Forwards these media attributes to the internal <audio> element. The standard ones behave as described in the MDN media attributes reference: autopictureinpictureautoplaycontrolscontrolslistcrossorigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysinlineposterpreloadsrcstream-type

Events

Re-dispatches these media events from the internal <audio> element, so you can listen for them directly. See media events: abortaddtrackcanplaycanplaythroughchangedurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeremovetrackseekedseekingstalledsuspendtimeupdatevolumechangewaiting

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