MuxAudio

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

Host Properties

Attributes

Renders a native <audio> element and accepts these media attributes as React props. The standard ones behave as described in the MDN media attributes reference: autopictureinpictureautoPlaycontrolscontrolslistcrossOrigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysInlineposterpreloadsrcstream-type

Events

Handle these media events with React event props (e.g. onPlay, onTimeUpdate). See media events: abortcanplaycanplaythroughdurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeseekedseekingstalledsuspendtimeupdatevolumechangewaiting

These media events have no React prop — attach a listener through a ref with addEventListener: addtrackchangeremovetrack

Beyond the media events above, this element emits:

These events have no built-in React prop. Attach a listener to the element through a ref with addEventListener.

Methods

Supports these methods from the native media API. See HTMLMediaElement for the core methods: addTextTrackcanPlayTypeloadpauseplay

In React, call these through a ref to the element.