mux-audio

Audio element for Mux-hosted HLS streams

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

Analytics and casting

MuxAudio plays Mux streams. It doesn’t monitor them or cast them — Mux Data and Google Cast are separate components 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:

import { GoogleCast } from '@videojs/react/media/google-cast';
import { MuxAudio } from '@videojs/react/media/mux-audio';
import { MuxData } from '@videojs/react/media/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

Google Cast — receivers, load requests, and session state

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

Attributes

Forwards these standard media attributes to the internal <audio>. See the MDN media element reference: autopictureinpictureautoplaycontrolscontrolslistcrossorigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysinlineposterpreloadsrc

These Video.js-specific attributes configure media behavior:

Attribute	Type	Default	Details
`stream-type`	`StreamType`	`'unknown'`
Description Current stream type (`'on-demand'` / `'live'` / `'unknown'`).

Properties

Property	Type	Default
`audioRenditions`	`AudioRenditionListLike \| undefined`	`—`
Description Read-only. Selectable audio variants, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`audioTracks`	`AudioTrackListLike \| undefined`	`—`
Description Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`config`	`HlsMediaConfig`	`{}`
Description Playback configuration: a preferred playback path, an explicit content type, and options forwarded to hls.js. Reassigning reloads the engine when an engine-relevant option changes.
`engine`	`Hls \| null`	`—`
Description Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
`error`	`(ErrorLike & MediaError) \| null`	`—`
Description Read-only.
`liveEdgeStart`	`number`	`—`
Description Read-only. Presentation time marking the start of the Live Edge Window. Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live.
`preload`	`PreloadType`	`'metadata'`
Description Preload type (`'none'` / `'metadata'` / `'auto'`).
`source`	`MuxSource \| 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.
`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 pass through unchanged.
`storyboard`	`string`	`''`
Description Storyboard (thumbnail sprite) VTT URL. Falls back to one derived from `source`.
`streamType`	`StreamType`	`'unknown'`
Description Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
`targetLiveWindow`	`number`	`—`
Description Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate).
`thumbnail`	`string`	`''`
Description Thumbnail image URL. Falls back to one derived from `source`.
`videoRenditions`	`VideoRenditionListLike \| undefined`	`—`
Description Read-only. Selectable quality levels, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
`videoTracks`	`VideoTrackListLike \| undefined`	`—`
Description Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.

Also exposes these properties from the native media API. See HTMLAudioElement for details: autoplaybufferedcontrolscrossOrigincurrentSrccurrentTimedefaultMuteddefaultPlaybackRatedisableRemotePlaybackdurationendedloopmutedpausedplaybackRateplayedreadyStateremoteseekableseekingtextTrackstitlevolume

Methods

Supports these media methods. See HTMLAudioElement for details: addTextTrackcanPlayTypeloadpauseplay

Events

Re-dispatches these standard media events from the internal media element: abortaddtrackcanplaycanplaythroughchangedurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeremovetrackseekedseekingstalledsuspendtimeupdatevolumechangewaiting

Also emits these Video.js-specific events:

Event	Description
`sourcechange`	Fired when `source` changes, either directly or by parsing a new `src`. Read `source` for the new value.
`streamtypechange`	Fired when the detected stream type changes. Read `streamType` for the new value.
`targetlivewindowchange`	Fired when the target live window changes. Read `targetLiveWindow` for the new value.