import { Meta } from '@storybook/blocks';

<Meta title="SDK Providers/AudioOutputProvider" />

# AudioOutputProvider

The `AudioOutputProvider` provides a list of the user's available audio output devices and the currently selected audio output device identified by its `deviceId`.

> Please note that, in Firefox and Safari, the browser does not list the 'audiooutput' media devices yet. We have an [FAQ](https://aws.github.io/amazon-chime-sdk-js/modules/faqs.html#i-am-unable-to-select-an-audio-output-device-in-some-browsers-is-this-a-known-issue) in
> `amazon-chime-sdk-js` with more information on respective bugs for Firefox and Safari browser.

## State

```ts
{
  devices: [{
    deviceId: string;
    label: string;
  }],

  // The current selected audio output device identified by its `deviceId`
  selectedDevice: string | null,
}

```

You can access the state by using the [useAudioOutputs](/docs/sdk-hooks-useaudiooutputs--page) hook.

## Importing

```javascript
import { AudioOutputProvider } from 'amazon-chime-sdk-component-library-react';
```

## Usage

If you are using `MeetingProvider`, `AudioOutputProvider` is rendered by default.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useAudioOutputs,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { devices, selectedDevice } = useAudioOutputs();
  const items = devices.map((device) => (
    <li key={device.deviceId}>{device.label}</li>
  ));

  return (
    <div>
      <p>Current Selected Audio Output Device: {selectedDevice}</p>
      <p>Devices</p>
      <ul>{items}</ul>
    </div>
  );
};
```

### Dependencies

- `MeetingProvider`