> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Audio

> The `AudioEnabledTrigger` and `AudioEnabledIndicator` components provide controls and visual cues for audio input state during media broadcast.

<iframe
  src={`https://ui-kit-docs-embed.vercel.app/broadcast/audio`}
  height="600px"
  width="100%"
  frameBorder="0"
  allowFullScreen
  allow="autoplay; encrypted-media; fullscreen; picture-in-picture; display-capture; camera; microphone"
  style={{
borderRadius: 10,
backgroundColor: "black",
}}
/>

<Info>
  `AudioEnabledTrigger` and `AudioEnabledIndicator` integrate together to form
  the typical microphone on/off interaction for broadcasts. They do not have to
  be used together and can combine with other components.
</Info>

## Features

* Controls the audio input state and conditionally renders based on audio input
  on/off status, customizable with the `matcher` pattern
* Keyboard hotkeys and adheres to [WAI-ARIA](https://w3c.github.io/aria/) design
  patterns
* Handles all common browser APIs, and old WebKit/Firefox APIs (see
  [caniuse](https://caniuse.com/mdn-api_mediadevices_getusermedia))

<Warning>
  The `getUserMedia` browser API used to get the audio is only available in
  secure contexts (HTTPS).
</Warning>

## Anatomy

Import the components and piece the parts together.

```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import * as Broadcast from "@livepeer/react/broadcast";

export default () => (
  <Broadcast.Root>
    <Broadcast.Container>
      <Broadcast.AudioEnabledTrigger />
      <Broadcast.AudioEnabledIndicator />
    </Broadcast.Container>
    <Broadcast.Container>
      <Broadcast.Controls>
        <Broadcast.AudioEnabledTrigger />
        <Broadcast.AudioEnabledIndicator />
      </Broadcast.Controls>
    </Broadcast.Container>
  </Broadcast.Root>
);
```

## Props

### `AudioEnabledTrigger`

Accepts all props for a typical button element.

### `AudioEnabledIndicator`

##### `forceMount`

A boolean that, when true, ensures the component is always mounted. This is
particularly useful for managing animations with external animation libraries.

##### `matcher`

A prop intended to define the circumstances under which the
`AudioEnabledIndicator` should be visible. It can be a boolean that corresponds
directly to the audio state or a function that provides custom logic for
visibility determination based on the audio state.

## Data Attributes

### `AudioEnabledTrigger`

#### `data-livepeer-controls-audio-enabled-trigger`

Serves to identify the component's role within the broadcast interface.

#### `data-enabled`

Indicates the current audio state, `"true"` when audio is enabled and `"false"`
when it is disabled.

### `AudioEnabledIndicator`

#### `data-livepeer-controls-audio-enabled-indicator`

Identifies the component's role as a visual indicator of the audio state within
the broadcast interface.

#### `data-enabled`

Shows the current audio state, `"true"` when audio is enabled and `"false"` when
it is disabled.

#### `data-visible`

Reflects the visibility status of the indicator, with `"true"` meaning it's
currently visible based on the `matcher` or audio state and `"false"` denoting
it's not visible.

This is often used for dynamically applying enter/exit CSS animations.