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.
Import
pnpm add @videojs/react @videojs/mux-audiopnpm add @videojs/html @videojs/mux-audioimport { MuxAudio } from '@videojs/react/media/mux-audio';import '@videojs/html/media/mux-audio';Or load it from the CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-beta.32/media/mux-audio.js"></script>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-dataimport { 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>Register the elements by importing @videojs/html/extensions/mux-data and @videojs/html/extensions/google-cast.
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 | MediaStreamType | "unknown" | |
| |||
Properties
| Property | Type | Default | Details |
|---|---|---|---|
audioRenditions | AudioRenditionListLike | undefined | — | |
| |||
audioTracks | AudioTrackListLike | undefined | — | |
| |||
contentData | { poster?: string; storyboard?: string } | — | |
| |||
disableRemotePlayback | unknown | false | |
| |||
engine | Hls | null | — | |
| |||
error | MediaError | null | — | |
| |||
liveEdgeStart | number | — | |
| |||
preload | MediaPreloadType | 'metadata' | |
| |||
source | { drm?: MuxDrmParams } | null | null | |
| |||
src | string | '' | |
| |||
streamType | MediaStreamType | "unknown" | |
| |||
targetLiveWindow | number | — | |
| |||
videoRenditions | VideoRenditionListLike | undefined | — | |
| |||
videoTracks | VideoTrackListLike | undefined | — | |
| |||
Also exposes these properties from the native media API. See HTMLAudioElement for details: autoplaybufferedcontrolscrossOrigincurrentSrccurrentTimedefaultMuteddefaultPlaybackRatedurationendedloopmutedpausedplaybackRateplayedreadyStateremoteseekableseekingtextTrackstitlevolume
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 | |
| ||
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... | |
| ||
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 | |
| ||
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... | |
| ||
keyLoadPolicy | LoadPolicy | undefined | |
levelLoadingMaxRetry | number | undefined | |
levelLoadingMaxRetryTimeout | number | undefined | |
levelLoadingRetryDelay | number | undefined | |
levelLoadingTimeOut | number | undefined | |
licenseResponseCallback | undefined | function | |
| ||
licenseXhrSetup | Uint8Array | Promise<Uint8Array | void>) | undefined | function | |
| ||
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 | |
| ||
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... | |
| ||
subtitleTrackController | typeof SubtitleTrackController | unde... | |
| ||
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 | |
| ||
source.engine.nativeHls
Options passed under source.engine.nativeHls.
| Option | Type | Details |
|---|---|---|
drmSystems | DrmSystemsConfig | undefined | |
| ||
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 |
|---|---|
contentdatachange | Fired when the derived `contentData` changes. Read `contentData` for the new value. |
sourcechange | Fired when `source` changes, either directly or by resolving 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. |