MuxAudio

Audio element for Mux-hosted HLS streams

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

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
`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.
`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'`).
`thumbnail`	`string`	`''`
Description Thumbnail image URL. Falls back to one derived from `source`.

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.