Introduction

<mux-audio></mux-audio> is a Mux-flavored HTML5 audio element.

If you are familiar with using <audio /> + Hls.js in your application, then you'll feel right at home with this web component.

Installation

If you're using npm or yarn, install that way:

Package manager

yarn add @mux/mux-audio

or

npm i @mux/mux-audio

Then, import the library into your application with either import or require:

import '@mux/mux-audio';

or

require('@mux/mux-audio');

CDN option

Alternatively, use the CDN hosted version of this package:

<script src="https://cdn.jsdelivr.net/npm/@mux/mux-audio@0"></script>

If you are using ecmascript modules, you can also load the mux-audio.mjs file with type=module:

<script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-audio@0/dist/mux-audio.mjs"></script>

Usage

<mux-audio> has all the same features, benefits and options as <mux-video>. View the documentation for <mux-video> for details.

Advanced: Use with React+TypeScript

Even though we don't (yet!) have our own React version of <mux-audio>, you can still use it in your React app. However, if you're also using TypeScript, make sure you add the following TypeScript definitions, since custom elements (like as <mux-audio>) will not be recognized as Intrinsic Elements:

interface MuxAudioHTMLAttributes<T> extends React.AudioHTMLAttributes<T> {
  debug?: boolean;
  autoplay?: boolean;
}

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'mux-audio': React.DetailedHTMLProps<MuxAudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>;
    }
  }
}