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.

​
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 design patterns
  • Handles all common browser APIs, and old WebKit/Firefox APIs (see caniuse)
The getUserMedia browser API used to get the audio is only available in secure contexts (HTTPS).

​
Anatomy

Import the components and piece the parts together. 
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.