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

# Play Pause Button

> Toggles playback and emits user interaction events.

export const PlayPauseButtonDemo = () => {
  const MOCK_CONTENT = [{
    id: "demo-1",
    title: "How AI voices are changing publishing",
    imageUrl: "/images/player-ui/demo-cover.svg",
    sourceUrl: "https://beyondwords.io",
    sourceId: "demo",
    adsEnabled: false,
    duration: 124,
    audio: [{
      id: "audio-1",
      url: "/images/player-ui/demo-silent.mp3",
      contentType: "audio/mpeg",
      duration: 124
    }],
    video: [],
    summarization: {
      audio: [],
      video: []
    },
    segments: []
  }];
  const newEvent = props => ({
    id: crypto.randomUUID(),
    createdAt: new Date().toISOString(),
    status: "pending",
    initiatedBy: "user",
    ...props
  });
  const [target, setTarget] = useState(null);
  const [player, setPlayer] = useState(null);
  const [playbackState, setPlaybackState] = useState("stopped");
  useEffect(() => {
    if (!target) return;
    let instance;
    const init = () => {
      instance = new window.BeyondWords.Player({
        target,
        content: MOCK_CONTENT,
        widgetStyle: "none",
        showUserInterface: false,
        analyticsConsent: "none"
      });
      const sync = () => setPlaybackState(instance.playbackState);
      instance.addEventListener("<any>", sync);
      sync();
      setPlayer(instance);
    };
    if (window.BeyondWords) init(); else window.addEventListener("BeyondWordsReady", init);
    return () => {
      window.removeEventListener("BeyondWordsReady", init);
      if (instance) instance.destroy();
    };
  }, [target]);
  const isPlaying = playbackState === "playing";
  return <div className="not-prose flex w-full items-center justify-center rounded-lg border p-10" style={{
    minHeight: "16rem",
    fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
  }}>
      <div ref={setTarget} style={{
    display: "none"
  }} />
      {player && <button type="button" aria-label={isPlaying ? "Pause audio" : "Play audio"} onClick={() => {
    const name = isPlaying ? "Pause" : "Play";
    player.onEvent(newEvent({
      type: `Pressed${name}`,
      description: `The ${name.toLowerCase()} button was pressed.`
    }));
  }}>
          {isPlaying ? <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20ZM8.7 8.95a1.05 1.05 0 0 1 2.1 0v6.1a1.05 1.05 0 0 1 -2.1 0ZM13.2 8.95a1.05 1.05 0 0 1 2.1 0v6.1a1.05 1.05 0 0 1 -2.1 0Z" />
            </svg> : <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20ZM10.45 8.48 Q9.4 7.9 9.4 9.1 L9.4 14.9 Q9.4 16.1 10.45 15.52 L15.4 12.78 Q16.8 12 15.4 11.22Z" />
            </svg>}
        </button>}
    </div>;
};

<Tabs>
  <Tab title="Preview">
    <PlayPauseButtonDemo />
  </Tab>

  <Tab title="Code">
    ```jsx PlayPauseButton.jsx theme={null}
    "use client";

    import { newEvent } from "@/lib/newEvent";
    import { PauseCircleIcon, PlayCircleIcon } from "@/registry/react/Icons";
    import { usePlayer, usePlayerSelector } from "@/registry/react/PlayerProvider";

    export function PlayPauseButton() {
      const player = usePlayer();
      const playbackState = usePlayerSelector((p) => p.playbackState);
      const isPlaying = playbackState === "playing";
      return (
        <button
          type="button"
          aria-label={isPlaying ? "Pause audio" : "Play audio"}
          onClick={() => {
            const name = isPlaying ? "Pause" : "Play";
            player.onEvent(
              newEvent({
                type: `Pressed${name}`,
                description: `The ${name.toLowerCase()} button was pressed.`,
              }),
            );
          }}
        >
          {isPlaying ? <PauseCircleIcon size={40} /> : <PlayCircleIcon size={40} />}
        </button>
      );
    }
    ```
  </Tab>
</Tabs>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npx @beyondwords/cli components add play-pause-button
  ```

  ```bash pnpm theme={null}
  pnpm dlx @beyondwords/cli components add play-pause-button
  ```

  ```bash yarn theme={null}
  yarn dlx @beyondwords/cli components add play-pause-button
  ```

  ```bash bun theme={null}
  bunx --bun @beyondwords/cli components add play-pause-button
  ```
</CodeGroup>

## Usage

```tsx theme={null}
import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { PlayPauseButton } from '@/registry/react/PlayPauseButton';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <PlayPauseButton />
    </PlayerProvider>
  );
}
```

The button reads `playbackState` from the surrounding
[`PlayerProvider`](/player-ui/react/player-provider). On click, it emits a
`PressedPlay` / `PressedPause` event built with
[`newEvent`](/player-ui/react/new-event).

## Reference

|                       |                                                                 |
| --------------------- | --------------------------------------------------------------- |
| **Props**             | None                                                            |
| **Player state read** | `playbackState`                                                 |
| **Events emitted**    | `PressedPlay`, `PressedPause`                                   |
| **Requires**          | a [`PlayerProvider`](/player-ui/react/player-provider) ancestor |