---
title: MuxAudio
frameworkTitle:
  html: mux-audio
description: Audio element for Mux-hosted HLS streams
---

import MediaReference from "@/components/docs/api-reference/MediaReference.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import Demo from "@/components/docs/demos/Demo.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import DocsLinkCard from "@/components/docs/DocsLinkCard.astro";

{/* React demos */}
import BasicUsageDemoReact from "@/components/docs/demos/mux-audio/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/mux-audio/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/mux-audio/react/css/BasicUsage.css?raw";

{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/mux-audio/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/mux-audio/html/css/BasicUsage.ts?raw";

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 — <DocsLink slug="concepts/mux-data">Mux Data</DocsLink> and <DocsLink slug="concepts/cast">Google Cast</DocsLink> 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:

<FrameworkCase frameworks={["react"]}>
```tsx
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 />
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```html
<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/media/mux-data` and `@videojs/html/media/google-cast`.
</FrameworkCase>

<DocsLinkCard slug="concepts/mux-data">Mux Data — metadata, options, and configuration</DocsLinkCard>
<DocsLinkCard slug="concepts/cast">Google Cast — receivers, load requests, and session state</DocsLinkCard>

## Examples

### Basic Usage

<FrameworkCase frameworks={["react"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
      { title: "App.css", code: basicUsageReactCss, lang: "css" },
    ]}>
      <BasicUsageDemoReact client:idle />
    </Demo>
  </StyleCase>
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
  <StyleCase styles={["css"]}>
    <Demo files={[
      { title: "index.html", code: basicUsageHtml, lang: "html" },
      { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
      { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
    ]}>
      <BasicUsageDemoHtml />
    </Demo>
  </StyleCase>
</FrameworkCase>

<MediaReference media="MuxAudio" />
