Audio
The AudioEnabledTrigger and AudioEnabledIndicator components provide controls and visual cues for audio input state during media broadcast.
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
matcherpattern - 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.