> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# setActiveSpeakerMode()

> Enables or disables Active Speaker mode in Daily Prebuilt.

`setActiveSpeakerMode(enabled)`

<Badge color="green">{"✓"} Prebuilt</Badge> <Badge color="red">{"✗"} Custom</Badge>

In Active Speaker mode, the currently speaking participant is displayed prominently while others appear smaller. This is a local-only change — it does not affect other participants' views.

Has no effect if called before `join()`.

To specify the initial mode when joining, set the `activeSpeakerMode` [call property](/reference/daily-js/types/daily-call-options#param-active-speaker-mode).

<Note>
  Active Speaker mode only exists in Daily Prebuilt. In custom call object builds, listen to [`active-speaker-change`](/reference/daily-js/events/participant-events#active-speaker-change) events to drive your own active speaker UI.
</Note>

## Parameters

<ParamField body="enabled" type="boolean" required>
  `true` to enable Active Speaker mode, `false` to disable it.
</ParamField>

## Return value

Returns `this` for chaining.

## Example

```javascript theme={null}
document.getElementById('active-speaker-toggle').addEventListener('change', (e) => {
  call.setActiveSpeakerMode(e.target.checked);
});
```

## See also

<CardGroup>
  <Card title="Types" icon="t" iconType="solid">
    * [DailyCallOptions: activeSpeakerMode](/reference/daily-js/types/daily-call-options#param-active-speaker-mode)
  </Card>

  <Card title="Methods" icon="code" iconType="solid">
    * [activeSpeakerMode()](/reference/daily-js/instance-methods/active-speaker-mode)
  </Card>

  <Card title="Events" icon="bolt" iconType="solid">
    * [active-speaker-change](/reference/daily-js/events/participant-events#active-speaker-change)
    * [active-speaker-mode-change](/reference/daily-js/events/iframe-ui-events#active-speaker-mode-change)
  </Card>
</CardGroup>