MuxAudio

Audio element for Mux-hosted HLS streams

Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations.

Import

pnpm add @videojs/react @videojs/mux-audio

import { MuxAudio } from '@videojs/react/media/mux-audio';

Analytics and casting

MuxAudio plays Mux streams. It doesn’t monitor them or cast them — Mux Data and Google Cast are separate extensions you add to the player alongside it. Mux Data needs no environment key here, since Mux attributes the views to the environment that owns the playback ID:

Add @videojs/mux-data to the installation before using the telemetry component below:

pnpm add @videojs/mux-data

import { GoogleCast } from '@videojs/react/extensions/google-cast';
import { MuxAudio } from '@videojs/react/media/mux-audio';
import { MuxData } from '@videojs/react/extensions/mux-data';

<MuxAudio source={{ playbackId: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM' }} />
<MuxData playerSoftwareName="mux-audio" />
<GoogleCast />

<mux-audio src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"></mux-audio>
<mux-data player-software-name="mux-audio"></mux-data>
<google-cast></google-cast>

Mux Data — metadata, options, and configuration

Cast to AirPlay and Chromecast

Examples

Basic Usage

import { MuxAudio } from '@videojs/react/media/mux-audio';

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

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

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

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

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

API Reference

Props

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

Prop	Type	Default
`disableRemotePlayback`	`unknown`	`false`
Description Whether remote playback (AirPlay, Google Cast) is disabled for this media.
`preload`	`MediaPreloadType`	`'metadata'`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`source`	`{ drm?: MuxDrmParams } \| null`	`null`
Description Structured Mux source. Setting it derives `src` from the playback ID, custom domain, and `playback` params (appended as `snake_case` query params). A `playback.token` replaces all other params — signed URLs bake them into the token. Engine options live under `engine`. A `drm.token` fills in `drm` itself: Mux's FairPlay, Widevine, and PlayReady license servers for this playback ID, so protected media plays whichever path the browser takes. License servers named alongside the token win, key by key, for content Mux does not license. `playback.maxResolution` and `playback.minResolution` are server-side: they decide which renditions Mux puts in the manifest at all. The inherited `maxAutoResolution` and `minAutoResolution` only look like their pair — those are client-side and bound which of the renditions that do arrive adaptive selection reaches for. The two halves are independent.
`src`	`string`	`''`
Description Media source URL. Setting a Mux stream URL (`https://stream.mux.com/<playback-id>.m3u8?...`) extracts the playback ID and query params into `source`; other URLs are kept as a plain `source.src`. Only playback options carry over. Mux identity comes from the URL, and the signed `poster`, `storyboard`, and `drm` tokens are scoped to a playback ID, so carrying them onto a different source would build rejected URLs.
`streamType`	`MediaStreamType`	`"unknown"`
Description Current stream type (`'on-demand'` / `'live'` / `'unknown'`).

Engine options

`source.engine.hlsJs`

Options passed under source.engine.hlsJs.

Option	Type	Details
`abrBandWidthFactor`	`number \| undefined`
`abrBandWidthUpFactor`	`number \| undefined`
`abrController`	`typeof AbrController \| undefined`
`abrEwmaDefaultEstimate`	`number \| undefined`
Description Default bandwidth estimate in bits/s prior to collecting fragment bandwidth samples
`abrEwmaDefaultEstimateMax`	`number \| undefined`
`abrEwmaFastLive`	`number \| undefined`
`abrEwmaFastVoD`	`number \| undefined`
`abrEwmaSlowLive`	`number \| undefined`
`abrEwmaSlowVoD`	`number \| undefined`
`abrMaxWithRealBitrate`	`boolean \| undefined`
`appendErrorMaxRetry`	`number \| undefined`
`assetPlayerId`	`string \| undefined`
`audioPreference`	`AudioSelectionOption \| undefined`
`audioStreamController`	`typeof AudioStreamController \| undefined`
`audioTrackController`	`typeof AudioTrackController \| undefined`
`autoStartLoad`	`boolean \| undefined`
`backBufferLength`	`number \| undefined`
`bufferController`	`typeof BufferController \| undefined`
`capLevelController`	`typeof CapLevelController \| undefined`
`capLevelOnFPSDrop`	`boolean \| undefined`
`capLevelToPlayerSize`	`boolean \| undefined`
`captionsTextTrack1Label`	`string \| undefined`
`captionsTextTrack1LanguageCode`	`string \| undefined`
`captionsTextTrack2Label`	`string \| undefined`
`captionsTextTrack2LanguageCode`	`string \| undefined`
`captionsTextTrack3Label`	`string \| undefined`
`captionsTextTrack3LanguageCode`	`string \| undefined`
`captionsTextTrack4Label`	`string \| undefined`
`captionsTextTrack4LanguageCode`	`string \| undefined`
`certLoadPolicy`	`LoadPolicy \| undefined`
`cmcd`	`CMCDControllerConfig \| undefined`
`cmcdController`	`typeof CMCDController \| undefined`
`contentSteeringController`	`typeof ContentSteeringController \| un...`
Type `typeof ContentSteeringController \| undefined`
`cueHandler`	`CuesInterface \| undefined`
`debug`	`boolean \| ILogger \| undefined`
`defaultAudioCodec`	`string \| undefined`
`detectStallWithCurrentTimeMs`	`number \| undefined`
`drmSystemOptions`	`DRMSystemOptions \| undefined`
`drmSystems`	`DRMSystemsConfiguration \| undefined`
`emeController`	`typeof EMEController \| undefined`
`emeEnabled`	`boolean \| undefined`
`enableCEA708Captions`	`boolean \| undefined`
`enableDateRangeMetadataCues`	`boolean \| undefined`
`enableEmsgKLVMetadata`	`boolean \| undefined`
`enableEmsgMetadataCues`	`boolean \| undefined`
`enableID3MetadataCues`	`boolean \| undefined`
`enableIMSC1`	`boolean \| undefined`
`enableInterstitialPlayback`	`boolean \| undefined`
`enableSoftwareAES`	`boolean \| undefined`
`enableWebVTT`	`boolean \| undefined`
`enableWorker`	`boolean \| undefined`
`errorController`	`typeof ErrorController \| undefined`
`fetchSetup`	`Request) \| undefined \| function`
Type `((context: LoaderContext, initParams: any) => Promise<Request> \| Request) \| undefined`
`fLoader`	`FragmentLoaderConstructor \| undefined`
`forceKeyFrameOnDiscontinuity`	`boolean \| undefined`
`fpsController`	`typeof FPSController \| undefined`
`fpsDroppedMonitoringPeriod`	`number \| undefined`
`fpsDroppedMonitoringThreshold`	`number \| undefined`
`fragLoadingMaxRetry`	`number \| undefined`
`fragLoadingMaxRetryTimeout`	`number \| undefined`
`fragLoadingRetryDelay`	`number \| undefined`
`fragLoadingTimeOut`	`number \| undefined`
`fragLoadPolicy`	`LoadPolicy \| undefined`
`frontBufferFlushThreshold`	`number \| undefined`
`highBufferWatchdogPeriod`	`number \| undefined`
`ignoreDevicePixelRatio`	`boolean \| undefined`
`ignorePlaylistParsingErrors`	`boolean \| undefined`
`initialLiveManifestSize`	`number \| undefined`
`interstitialAppendInPlace`	`boolean \| undefined`
`interstitialAssetListLoadPolicy`	`LoadPolicy \| undefined`
`interstitialLiveLookAhead`	`number \| undefined`
`interstitialsController`	`typeof InterstitialsController \| unde...`
Type `typeof InterstitialsController \| undefined`
`keyLoadPolicy`	`LoadPolicy \| undefined`
`levelLoadingMaxRetry`	`number \| undefined`
`levelLoadingMaxRetryTimeout`	`number \| undefined`
`levelLoadingRetryDelay`	`number \| undefined`
`levelLoadingTimeOut`	`number \| undefined`
`licenseResponseCallback`	`undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext) => ArrayBuffer) \| undefined`
`licenseXhrSetup`	`Uint8Array \| Promise<Uint8Array \| void>) \| undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext, licenseChallenge: Uint8Array) => void \| Uint8Array \| Promise<Uint8Array \| void>) \| undefined`
`liveBackBufferLength`	`number \| null \| undefined`
`liveDurationInfinity`	`boolean \| undefined`
`liveMaxLatencyDuration`	`number \| undefined`
`liveMaxLatencyDurationCount`	`number \| undefined`
`liveSyncDuration`	`number \| undefined`
`liveSyncDurationCount`	`number \| undefined`
`liveSyncMode`	`'edge' \| 'buffered' \| undefined`
`liveSyncOnStallIncrease`	`number \| undefined`
`loader`	`object`
Type `{ new (confg: HlsConfig): Loader<LoaderContext>; } \| undefined`
`lowLatencyMode`	`boolean \| undefined`
`manifestLoadingMaxRetry`	`number \| undefined`
`manifestLoadingMaxRetryTimeout`	`number \| undefined`
`manifestLoadingRetryDelay`	`number \| undefined`
`manifestLoadingTimeOut`	`number \| undefined`
`manifestLoadPolicy`	`LoadPolicy \| undefined`
`maxAudioFramesDrift`	`number \| undefined`
`maxBufferHole`	`number \| undefined`
`maxBufferLength`	`number \| undefined`
`maxBufferSize`	`number \| undefined`
`maxDevicePixelRatio`	`number \| undefined`
`maxFragLookUpTolerance`	`number \| undefined`
`maxLiveSyncPlaybackRate`	`number \| undefined`
`maxLoadingDelay`	`number \| undefined`
`maxMaxBufferLength`	`number \| undefined`
`maxStarvationDelay`	`number \| undefined`
`minAutoBitrate`	`number \| undefined`
`nudgeMaxRetry`	`number \| undefined`
`nudgeOffset`	`number \| undefined`
`nudgeOnVideoHole`	`boolean \| undefined`
`playlistLoadPolicy`	`LoadPolicy \| undefined`
`pLoader`	`PlaylistLoaderConstructor \| undefined`
`preferManagedMediaSource`	`boolean \| undefined`
`preserveManualLevelOnError`	`boolean \| undefined`
`primarySessionId`	`string \| undefined`
`progressive`	`boolean \| undefined`
`renderTextTracksNatively`	`boolean \| undefined`
`requestMediaKeySystemAccessFunc`	`MediaKeyFunc \| null \| undefined`
`requireKeySystemAccessOnStart`	`boolean \| undefined`
`startFragPrefetch`	`boolean \| undefined`
`startLevel`	`number \| undefined`
`startOnSegmentBoundary`	`boolean \| undefined`
`startPosition`	`number \| undefined`
`steeringManifestLoadPolicy`	`LoadPolicy \| undefined`
`stretchShortVideoTrack`	`boolean \| undefined`
`subtitlePreference`	`SubtitleSelectionOption \| undefined`
`subtitleStreamController`	`typeof SubtitleStreamController \| und...`
Type `typeof SubtitleStreamController \| undefined`
`subtitleTrackController`	`typeof SubtitleTrackController \| unde...`
Type `typeof SubtitleTrackController \| undefined`
`testBandwidth`	`boolean \| undefined`
`timelineController`	`typeof TimelineController \| undefined`
`timelineOffset`	`number \| undefined`
`useMediaCapabilities`	`boolean \| undefined`
`videoPreference`	`VideoSelectionOption \| undefined`
`widevineLicenseUrl`	`string \| undefined`
`workerPath`	`string \| null \| undefined`
`xhrSetup`	`void) \| undefined \| function`
Type `((xhr: XMLHttpRequest, url: string) => Promise<void> \| void) \| undefined`

`source.engine.nativeHls`

Options passed under source.engine.nativeHls.

Option	Type	Details
`drmSystems`	`DrmSystemsConfig \| undefined`
Description License servers for protected content, keyed by EME key system id. An escape hatch for licensing native playback differently from every other path: naming it replaces `source.drm` here, and nowhere else.

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.

Option	Type	Details
`abrBandWidthFactor`	`number \| undefined`
`abrBandWidthUpFactor`	`number \| undefined`
`abrController`	`typeof AbrController \| undefined`
`abrEwmaDefaultEstimate`	`number \| undefined`
Description Default bandwidth estimate in bits/s prior to collecting fragment bandwidth samples
`abrEwmaDefaultEstimateMax`	`number \| undefined`
`abrEwmaFastLive`	`number \| undefined`
`abrEwmaFastVoD`	`number \| undefined`
`abrEwmaSlowLive`	`number \| undefined`
`abrEwmaSlowVoD`	`number \| undefined`
`abrMaxWithRealBitrate`	`boolean \| undefined`
`appendErrorMaxRetry`	`number \| undefined`
`assetPlayerId`	`string \| undefined`
`audioPreference`	`AudioSelectionOption \| undefined`
`audioStreamController`	`typeof AudioStreamController \| undefined`
`audioTrackController`	`typeof AudioTrackController \| undefined`
`autoStartLoad`	`boolean \| undefined`
`backBufferLength`	`number \| undefined`
`bufferController`	`typeof BufferController \| undefined`
`capLevelController`	`typeof CapLevelController \| undefined`
`capLevelOnFPSDrop`	`boolean \| undefined`
`capLevelToPlayerSize`	`boolean \| undefined`
`captionsTextTrack1Label`	`string \| undefined`
`captionsTextTrack1LanguageCode`	`string \| undefined`
`captionsTextTrack2Label`	`string \| undefined`
`captionsTextTrack2LanguageCode`	`string \| undefined`
`captionsTextTrack3Label`	`string \| undefined`
`captionsTextTrack3LanguageCode`	`string \| undefined`
`captionsTextTrack4Label`	`string \| undefined`
`captionsTextTrack4LanguageCode`	`string \| undefined`
`certLoadPolicy`	`LoadPolicy \| undefined`
`cmcd`	`CMCDControllerConfig \| undefined`
`cmcdController`	`typeof CMCDController \| undefined`
`contentSteeringController`	`typeof ContentSteeringController \| un...`
Type `typeof ContentSteeringController \| undefined`
`cueHandler`	`CuesInterface \| undefined`
`debug`	`boolean \| ILogger \| undefined`
`defaultAudioCodec`	`string \| undefined`
`detectStallWithCurrentTimeMs`	`number \| undefined`
`drmSystemOptions`	`DRMSystemOptions \| undefined`
`drmSystems`	`DRMSystemsConfiguration \| undefined`
`emeController`	`typeof EMEController \| undefined`
`emeEnabled`	`boolean \| undefined`
`enableCEA708Captions`	`boolean \| undefined`
`enableDateRangeMetadataCues`	`boolean \| undefined`
`enableEmsgKLVMetadata`	`boolean \| undefined`
`enableEmsgMetadataCues`	`boolean \| undefined`
`enableID3MetadataCues`	`boolean \| undefined`
`enableIMSC1`	`boolean \| undefined`
`enableInterstitialPlayback`	`boolean \| undefined`
`enableSoftwareAES`	`boolean \| undefined`
`enableWebVTT`	`boolean \| undefined`
`enableWorker`	`boolean \| undefined`
`errorController`	`typeof ErrorController \| undefined`
`fetchSetup`	`Request) \| undefined \| function`
Type `((context: LoaderContext, initParams: any) => Promise<Request> \| Request) \| undefined`
`fLoader`	`FragmentLoaderConstructor \| undefined`
`forceKeyFrameOnDiscontinuity`	`boolean \| undefined`
`fpsController`	`typeof FPSController \| undefined`
`fpsDroppedMonitoringPeriod`	`number \| undefined`
`fpsDroppedMonitoringThreshold`	`number \| undefined`
`fragLoadingMaxRetry`	`number \| undefined`
`fragLoadingMaxRetryTimeout`	`number \| undefined`
`fragLoadingRetryDelay`	`number \| undefined`
`fragLoadingTimeOut`	`number \| undefined`
`fragLoadPolicy`	`LoadPolicy \| undefined`
`frontBufferFlushThreshold`	`number \| undefined`
`highBufferWatchdogPeriod`	`number \| undefined`
`ignoreDevicePixelRatio`	`boolean \| undefined`
`ignorePlaylistParsingErrors`	`boolean \| undefined`
`initialLiveManifestSize`	`number \| undefined`
`interstitialAppendInPlace`	`boolean \| undefined`
`interstitialAssetListLoadPolicy`	`LoadPolicy \| undefined`
`interstitialLiveLookAhead`	`number \| undefined`
`interstitialsController`	`typeof InterstitialsController \| unde...`
Type `typeof InterstitialsController \| undefined`
`keyLoadPolicy`	`LoadPolicy \| undefined`
`levelLoadingMaxRetry`	`number \| undefined`
`levelLoadingMaxRetryTimeout`	`number \| undefined`
`levelLoadingRetryDelay`	`number \| undefined`
`levelLoadingTimeOut`	`number \| undefined`
`licenseResponseCallback`	`undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext) => ArrayBuffer) \| undefined`
`licenseXhrSetup`	`Uint8Array \| Promise<Uint8Array \| void>) \| undefined \| function`
Type `((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext, licenseChallenge: Uint8Array) => void \| Uint8Array \| Promise<Uint8Array \| void>) \| undefined`
`liveBackBufferLength`	`number \| null \| undefined`
`liveDurationInfinity`	`boolean \| undefined`
`liveMaxLatencyDuration`	`number \| undefined`
`liveMaxLatencyDurationCount`	`number \| undefined`
`liveSyncDuration`	`number \| undefined`
`liveSyncDurationCount`	`number \| undefined`
`liveSyncMode`	`'edge' \| 'buffered' \| undefined`
`liveSyncOnStallIncrease`	`number \| undefined`
`loader`	`object`
Type `{ new (confg: HlsConfig): Loader<LoaderContext>; } \| undefined`
`lowLatencyMode`	`boolean \| undefined`
`manifestLoadingMaxRetry`	`number \| undefined`
`manifestLoadingMaxRetryTimeout`	`number \| undefined`
`manifestLoadingRetryDelay`	`number \| undefined`
`manifestLoadingTimeOut`	`number \| undefined`
`manifestLoadPolicy`	`LoadPolicy \| undefined`
`maxAudioFramesDrift`	`number \| undefined`
`maxBufferHole`	`number \| undefined`
`maxBufferLength`	`number \| undefined`
`maxBufferSize`	`number \| undefined`
`maxDevicePixelRatio`	`number \| undefined`
`maxFragLookUpTolerance`	`number \| undefined`
`maxLiveSyncPlaybackRate`	`number \| undefined`
`maxLoadingDelay`	`number \| undefined`
`maxMaxBufferLength`	`number \| undefined`
`maxStarvationDelay`	`number \| undefined`
`minAutoBitrate`	`number \| undefined`
`nudgeMaxRetry`	`number \| undefined`
`nudgeOffset`	`number \| undefined`
`nudgeOnVideoHole`	`boolean \| undefined`
`playlistLoadPolicy`	`LoadPolicy \| undefined`
`pLoader`	`PlaylistLoaderConstructor \| undefined`
`preferManagedMediaSource`	`boolean \| undefined`
`preserveManualLevelOnError`	`boolean \| undefined`
`primarySessionId`	`string \| undefined`
`progressive`	`boolean \| undefined`
`renderTextTracksNatively`	`boolean \| undefined`
`requestMediaKeySystemAccessFunc`	`MediaKeyFunc \| null \| undefined`
`requireKeySystemAccessOnStart`	`boolean \| undefined`
`startFragPrefetch`	`boolean \| undefined`
`startLevel`	`number \| undefined`
`startOnSegmentBoundary`	`boolean \| undefined`
`startPosition`	`number \| undefined`
`steeringManifestLoadPolicy`	`LoadPolicy \| undefined`
`stretchShortVideoTrack`	`boolean \| undefined`
`subtitlePreference`	`SubtitleSelectionOption \| undefined`
`subtitleStreamController`	`typeof SubtitleStreamController \| und...`
Type `typeof SubtitleStreamController \| undefined`
`subtitleTrackController`	`typeof SubtitleTrackController \| unde...`
Type `typeof SubtitleTrackController \| undefined`
`testBandwidth`	`boolean \| undefined`
`timelineController`	`typeof TimelineController \| undefined`
`timelineOffset`	`number \| undefined`
`useMediaCapabilities`	`boolean \| undefined`
`videoPreference`	`VideoSelectionOption \| undefined`
`widevineLicenseUrl`	`string \| undefined`
`workerPath`	`string \| null \| undefined`
`xhrSetup`	`void) \| undefined \| function`
Type `((xhr: XMLHttpRequest, url: string) => Promise<void> \| void) \| undefined`