User Audio Output Control

The UserAudioOutputControl component provides a user interface for selecting and managing audio output devices in your voice application. When using the connected variant, it integrates with the Pipecat Client SDK to automatically detect available speakers and allow users to switch between them.

import { UserAudioOutputControl } from "@pipecat-ai/voice-ui-kit";

<UserAudioOutputControl />

UserAudioOutputControlComponent

The UserAudioOutputControlComponent is the headless variant that accepts all device data and callbacks as props. This allows you to use it with any framework or state management solution.

import { UserAudioOutputControlComponent } from "@pipecat-ai/voice-ui-kit";

const mockDevices = [
  { deviceId: "speaker1", label: "Built-in Speakers" },
  { deviceId: "speaker2", label: "External Headphones" },
];

function Demo() {
  const [selectedDevice, setSelectedDevice] = React.useState(null);
  
  return(
    <UserAudioOutputControlComponent
      availableDevices={mockDevices}
    />
  );
}

render(<Demo />);

Integration

The connected UserAudioOutputControl component uses the usePipecatClientMediaDevices hook from the Pipecat Client React SDK. This means it must be used within a PipecatClientProvider context to function properly.

The component will automatically:

• Fetch available audio output devices
• Display the currently selected speaker
• Handle device selection changes
• Update the Pipecat Client's audio output configuration