# Blocked Audio

Browsers block audio autoplay until the user interacts with the page. When this happens for a remote participant, the SDK exposes the blocked state so you can prompt the user to resume playback with `call.resumeAudio()` (which must be called from a user gesture such as a click, tap, or keypress).

## Blocked audio overlay

The default `ParticipantViewUI` shows a blocked-audio overlay when the browser prevents audio autoplay for a remote participant. Clicking the overlay calls `call.resumeAudio()` from a user gesture. A custom `AudioBlockedNotification` is rendered only when this blocked-audio state is active for the participant tile.

![Default blocked-audio overlay shown over a participant tile](@video/react/_assets/ui-cookbook/blocked-audio/blocked-audio-overlay.png)

You can customize only this overlay while keeping the rest of the default participant UI:

```tsx
import { DefaultParticipantViewUI, useCall } from "@stream-io/video-react-sdk";

const CustomAudioBlockedNotification = () => {
  const call = useCall();

  return (
    <button type="button" onClick={() => call?.resumeAudio()}>
      Play audio
    </button>
  );
};

const CustomParticipantViewUI = () => (
  <DefaultParticipantViewUI
    AudioBlockedNotification={CustomAudioBlockedNotification}
  />
);
```

You can also disable the default overlay:

```tsx
const CustomParticipantViewUI = () => (
  <DefaultParticipantViewUI AudioBlockedNotification={null} />
);
```

If you replace `ParticipantViewUI` completely, add your own affordance for this state when your app can join calls without a user gesture. Use `useAutoplayBlockedSessionIds()` to identify participants with blocked audio and call `call.resumeAudio()` from a click or tap handler.


---

This page was last updated at 2026-07-27T12:22:09.592Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-cookbook/blocked-audio/](https://getstream.io/video/docs/react/ui-cookbook/blocked-audio/).