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

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

# LocalAudioOutputProvider

The `LocalAudioOutputProvider` provides the audio status of the local user, and functionality to toggle the local audio output in on/off state.

This local audio output is the audio speaker output and **not** the microphone (audio input).

## State

```javascript
{
  // Whether or not the user's speakers are playing output audio
  isAudioOn: boolean;

  // A function to turn on or off the audio output
  toggleAudio: () => void;
}
```

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

## Importing

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

## Usage

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

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

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

const MyChild = () => {
  const { isAudioOn, toggleAudio } = useLocalAudioOutput();

  return (
    <div>
      <div>
        {isAudioOn
          ? 'Meeting audio output is on'
          : 'Meeting audio output is off'}
      </div>
      <button onClick={toggleAudio}>Toggle Local Audio Output</button>
    </div>
  );
};
```

### Dependencies

- `MeetingProvider`