From aa44f01baa0cd15c15cb47cf7bd00b4ddcc5bd95 Mon Sep 17 00:00:00 2001
From: bntvllnt <32437578+bntvllnt@users.noreply.github.com>
Date: Mon, 7 Sep 2026 18:11:54 +0200
Subject: [PATCH 1/2] pi-agent: Build AudioPlayer patch in harness isolation

---
 packages/ui/CHANGELOG.md                      |   4 +-
 .../components/audio-player/audio-player.mdx  |  44 +++++
 .../audio-player/audio-player.stories.tsx     |  17 ++
 .../audio-player/audio-player.test.tsx        | 168 ++++++++++++++++++
 .../components/audio-player/audio-player.tsx  | 156 ++++++++++++++++
 .../audio-player/audio-player.visual.tsx      |  29 +++
 .../ui/src/components/audio-player/index.ts   |   1 +
 .../ui/src/components/audio-player/meta.json  |  16 ++
 .../audio-player/use-audio-player.ts          | 138 ++++++++++++++
 packages/ui/src/components/index.ts           |   2 +
 10 files changed, 574 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/audio-player/audio-player.mdx
 create mode 100644 packages/ui/src/components/audio-player/audio-player.stories.tsx
 create mode 100644 packages/ui/src/components/audio-player/audio-player.test.tsx
 create mode 100644 packages/ui/src/components/audio-player/audio-player.tsx
 create mode 100644 packages/ui/src/components/audio-player/audio-player.visual.tsx
 create mode 100644 packages/ui/src/components/audio-player/index.ts
 create mode 100644 packages/ui/src/components/audio-player/meta.json
 create mode 100644 packages/ui/src/components/audio-player/use-audio-player.ts

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 21f32fdf..a1bef596 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -6,7 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
-_Nothing yet._
+### Added
+
+- `AudioPlayer` — URL-backed audio with keyboard controls, accessible seeking, playback speed, transcript disclosure, and native loading/error state.
 
 ## [0.3.0] - 2026-06-26
 
diff --git a/packages/ui/src/components/audio-player/audio-player.mdx b/packages/ui/src/components/audio-player/audio-player.mdx
new file mode 100644
index 00000000..c09e954c
--- /dev/null
+++ b/packages/ui/src/components/audio-player/audio-player.mdx
@@ -0,0 +1,44 @@
+import { Meta, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks'
+import * as Stories from './audio-player.stories'
+
+<Meta of={Stories} />
+
+# Audio player
+
+URL-backed audio with native media events, accessible seeking and optional transcript and playback speed.
+
+<Primary />
+
+```tsx
+import { AudioPlayer } from '@vllnt/ui'
+
+<AudioPlayer
+  src="/interview.mp3"
+  title="Interview"
+  transcript="The complete spoken transcript…"
+  showPlaybackRate
+/>
+```
+
+<Canvas of={Stories.WithTranscript} />
+
+## Behavior
+
+The browser owns playback, buffering, duration and position. Playback rejection and media errors show actionable messages; play retries the source. Changing `src` stops the old audio and resets position, duration, speed and errors. There is no autoplay. Metadata is preloaded; unknown or infinite duration disables seeking. URLs must point to browser-supported audio, not an embed page.
+
+## Keyboard and accessibility
+
+Tab reaches the native controls. Space or Enter on the playback button plays or pauses. On that button, + / Right and - / Left seek five seconds; Home / End seek to the beginning / end. The native range supports arrows and Home / End, and announces elapsed and total time. Shortcuts never intercept the speed select or transcript. Source changes remount controls and may lose focus; consumers managing source selection should keep focus on their source selector.
+
+Provide `transcript` for spoken audio. It uses native details/summary disclosure. Optional `captionsSrc` accepts a WebVTT URL for the native text track; this custom audio UI does not display timed captions. There is no waveform, recording or download behavior.
+
+## Props
+
+<Controls />
+
+- `src`: required audio URL.
+- `title`: required player accessible name and visible title.
+- `transcript`: optional React content.
+- `captionsSrc`: optional WebVTT URL.
+- `showPlaybackRate`: show 0.5×–2× speed options; default false.
+- Root div props and React 19 `ref` are forwarded.
diff --git a/packages/ui/src/components/audio-player/audio-player.stories.tsx b/packages/ui/src/components/audio-player/audio-player.stories.tsx
new file mode 100644
index 00000000..581f3bf2
--- /dev/null
+++ b/packages/ui/src/components/audio-player/audio-player.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AudioPlayer } from "./audio-player";
+
+const meta = {
+  title: "Components/AudioPlayer",
+  component: AudioPlayer,
+  tags: ["autodocs"],
+  args: { src: "https://upload.wikimedia.org/wikipedia/commons/4/45/En-us-hello.ogg", title: "Hello pronunciation" },
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof AudioPlayer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const WithTranscript: Story = { args: { transcript: "Hello.", showPlaybackRate: true } };
+export const MissingSource: Story = { args: { src: "" } };
+export const UnavailableSource: Story = { args: { src: "/unavailable-audio.wav" } };
diff --git a/packages/ui/src/components/audio-player/audio-player.test.tsx b/packages/ui/src/components/audio-player/audio-player.test.tsx
new file mode 100644
index 00000000..50d162bb
--- /dev/null
+++ b/packages/ui/src/components/audio-player/audio-player.test.tsx
@@ -0,0 +1,168 @@
+import { createRef } from "react";
+
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AudioPlayer } from "./audio-player";
+
+function audioElement(container: HTMLElement) {
+  const audio = container.querySelector("audio");
+  if (!audio) throw new Error("Missing audio");
+  return audio;
+}
+function metadata(audio: HTMLAudioElement, duration = 120) {
+  Object.defineProperty(audio, "duration", {
+    configurable: true,
+    value: duration,
+  });
+  fireEvent.loadedMetadata(audio);
+}
+
+describe("AudioPlayer", () => {
+  beforeEach(() => {
+    vi.spyOn(HTMLMediaElement.prototype, "play").mockResolvedValue();
+    vi.spyOn(HTMLMediaElement.prototype, "pause").mockImplementation(() => {});
+  });
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it("forwards the React 19 ref and labels controls", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<AudioPlayer ref={ref} src="/audio.wav" title="Interview" />);
+    expect(ref.current).toBe(screen.getByRole("group", { name: "Interview" }));
+    expect(screen.getByRole("slider", { name: "Seek audio" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Play audio" })).toBeEnabled();
+  });
+
+  it("follows native playback, buffering, pause and ended events", async () => {
+    const { container } = render(
+      <AudioPlayer src="/audio.wav" title="Interview" />,
+    );
+    const audio = audioElement(container);
+    fireEvent.loadStart(audio);
+    expect(screen.getByRole("status")).toHaveTextContent("Loading audio");
+    fireEvent.canPlay(audio);
+    await act(async () => fireEvent.click(screen.getByRole("button")));
+    expect(audio.play).toHaveBeenCalledOnce();
+    fireEvent.play(audio);
+    expect(screen.getByRole("button", { name: "Pause audio" })).toBeEnabled();
+    fireEvent.waiting(audio);
+    expect(screen.getByRole("status")).toHaveTextContent("Loading audio");
+    fireEvent.playing(audio);
+    expect(screen.getByRole("status")).toBeEmptyDOMElement();
+    Object.defineProperty(audio, "paused", {
+      configurable: true,
+      value: false,
+    });
+    fireEvent.click(screen.getByRole("button"));
+    expect(audio.pause).toHaveBeenCalled();
+    fireEvent.pause(audio);
+    expect(screen.getByRole("button", { name: "Play audio" })).toBeEnabled();
+    fireEvent.play(audio);
+    fireEvent.ended(audio);
+    expect(screen.getByRole("button", { name: "Play audio" })).toBeEnabled();
+  });
+
+  it("reports rejected play and native source errors", async () => {
+    vi.mocked(HTMLMediaElement.prototype.play).mockRejectedValue(
+      new Error("denied"),
+    );
+    const { container } = render(
+      <AudioPlayer src="/audio.wav" title="Interview" />,
+    );
+    await act(async () => fireEvent.click(screen.getByRole("button")));
+    expect(screen.getByRole("alert")).toHaveTextContent("could not play");
+    expect(screen.getByRole("status")).toBeEmptyDOMElement();
+    fireEvent.error(audioElement(container));
+    expect(screen.getByRole("alert")).toHaveTextContent("could not load");
+  });
+
+  it("seeks with accessible time values and clamps keyboard seeks", async () => {
+    const { container } = render(
+      <AudioPlayer src="/audio.wav" title="Interview" />,
+    );
+    const audio = audioElement(container);
+    metadata(audio);
+    const group = screen.getByRole("button");
+    const slider = screen.getByRole("slider");
+    fireEvent.change(slider, { target: { value: "30" } });
+    expect(audio.currentTime).toBe(30);
+    expect(slider).toHaveAttribute("aria-valuetext", "0:30 of 2:00");
+    fireEvent.keyDown(group, { key: "+" });
+    expect(audio.currentTime).toBe(35);
+    fireEvent.keyDown(group, { key: "-" });
+    expect(audio.currentTime).toBe(30);
+    fireEvent.keyDown(group, { key: "End" });
+    fireEvent.keyDown(group, { key: "ArrowRight" });
+    expect(audio.currentTime).toBe(120);
+    fireEvent.keyDown(group, { key: "Home" });
+    fireEvent.keyDown(group, { key: "ArrowLeft" });
+    expect(audio.currentTime).toBe(0);
+    fireEvent.keyDown(slider, { key: "+" });
+    expect(audio.currentTime).toBe(0);
+    await act(async () => fireEvent.click(group));
+    expect(audio.play).toHaveBeenCalledOnce();
+  });
+
+  it("supports transcript and native playback rate changes", () => {
+    const { container } = render(
+      <AudioPlayer
+        showPlaybackRate
+        src="/audio.wav"
+        title="Interview"
+        transcript="Hello world"
+      />,
+    );
+    expect(screen.getByText("Transcript").tagName).toBe("SUMMARY");
+    expect(screen.getByText("Hello world")).toBeInTheDocument();
+    const audio = audioElement(container);
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "1.5" },
+    });
+    expect(audio.playbackRate).toBe(1.5);
+    fireEvent.rateChange(audio);
+    expect(screen.getByRole("combobox")).toHaveValue("1.5");
+  });
+
+  it("resets on source replacement and ignores old play rejection", async () => {
+    let rejectPlay: ((reason: Error) => void) | undefined;
+    vi.mocked(HTMLMediaElement.prototype.play).mockImplementation(
+      () =>
+        new Promise<void>((_resolve, reject) => {
+          rejectPlay = reject;
+        }),
+    );
+    const { container, rerender } = render(
+      <AudioPlayer src="/one.wav" title="Interview" />,
+    );
+    const old = audioElement(container);
+    metadata(old);
+    fireEvent.click(screen.getByRole("button"));
+    rerender(<AudioPlayer src="/two.wav" title="Interview" />);
+    expect(audioElement(container)).not.toBe(old);
+    expect(old.pause).toHaveBeenCalled();
+    await act(async () => rejectPlay?.(new Error("old request")));
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(screen.getByRole("slider")).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Play audio" })).toBeEnabled();
+  });
+
+  it("handles missing source and non-finite duration", () => {
+    const { container } = render(<AudioPlayer src="" title="Interview" />);
+    expect(screen.getByRole("button")).toBeDisabled();
+    metadata(audioElement(container), Infinity);
+    expect(screen.getByRole("slider")).toBeDisabled();
+    expect(screen.getByRole("slider")).toHaveAttribute(
+      "aria-valuetext",
+      "0:00 of 0:00",
+    );
+  });
+});
diff --git a/packages/ui/src/components/audio-player/audio-player.tsx b/packages/ui/src/components/audio-player/audio-player.tsx
new file mode 100644
index 00000000..743b90e6
--- /dev/null
+++ b/packages/ui/src/components/audio-player/audio-player.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { Pause, Play } from "lucide-react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+
+import { useAudioPlayer } from "./use-audio-player";
+
+export type AudioPlayerProps = Omit<
+  ComponentPropsWithRef<"div">,
+  "children" | "title"
+> & {
+  captionsSrc?: string;
+  showPlaybackRate?: boolean;
+  src: string;
+  title: string;
+  transcript?: ReactNode;
+};
+
+function timeLabel(seconds: number) {
+  const whole = Math.floor(Math.max(0, seconds));
+  return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
+}
+
+type Playback = ReturnType<typeof useAudioPlayer>;
+
+function AudioControls({
+  disabled,
+  playback,
+}: {
+  disabled: boolean;
+  playback: Playback;
+}) {
+  return (
+    <div className="flex items-center gap-x-3">
+      <Button
+        aria-label={playback.playing ? "Pause audio" : "Play audio"}
+        disabled={disabled}
+        onClick={() => void playback.togglePlayback()}
+        onKeyDown={playback.onSeekKey}
+        size="icon"
+        type="button"
+        variant="outline"
+      >
+        {playback.playing ? (
+          <Pause aria-hidden="true" className="size-4" />
+        ) : (
+          <Play aria-hidden="true" className="size-4" />
+        )}
+      </Button>
+      <input
+        aria-label="Seek audio"
+        aria-valuetext={`${timeLabel(playback.position)} of ${timeLabel(playback.duration)}`}
+        className="min-w-0 flex-1 accent-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+        disabled={!playback.duration || !!playback.error}
+        max={playback.duration || 1}
+        min={0}
+        onChange={(event) => {
+          playback.seek(Number(event.currentTarget.value));
+        }}
+        step={1}
+        type="range"
+        value={Math.min(playback.position, playback.duration)}
+      />
+      <span className="text-xs tabular-nums text-muted-foreground">
+        {timeLabel(playback.position)} / {timeLabel(playback.duration)}
+      </span>
+    </div>
+  );
+}
+
+function PlaybackRate({ playback }: { playback: Playback }) {
+  return (
+    <label className="flex items-center gap-x-2 text-sm">
+      <span>Playback speed</span>
+      <select
+        className="rounded-md border bg-background p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onChange={(event) => {
+          playback.changeRate(Number(event.currentTarget.value));
+        }}
+        value={playback.rate}
+      >
+        {[0.5, 0.75, 1, 1.25, 1.5, 2].map((value) => (
+          <option key={value} value={value}>
+            {value}×
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function AudioPlayerSession({
+  captionsSrc,
+  className,
+  ref,
+  showPlaybackRate = false,
+  src,
+  title,
+  transcript,
+  ...props
+}: AudioPlayerProps) {
+  const playback = useAudioPlayer(src);
+  return (
+    <div
+      aria-label={title}
+      className={cn(
+        "rounded-md border bg-background p-4 text-foreground space-y-4",
+        className,
+      )}
+      ref={ref}
+      role="group"
+      {...props}
+    >
+      <audio
+        aria-label={title}
+        preload="metadata"
+        src={src || undefined}
+        {...playback.mediaProps}
+      >
+        <track kind="captions" src={captionsSrc} />
+      </audio>
+      <p className="text-sm font-medium">{title}</p>
+      <AudioControls disabled={!src} playback={playback} />
+      {showPlaybackRate ? <PlaybackRate playback={playback} /> : null}
+      <p
+        aria-live="polite"
+        className="text-sm text-muted-foreground"
+        role="status"
+      >
+        {playback.loading ? "Loading audio…" : ""}
+      </p>
+      {playback.error ? (
+        <p className="text-sm text-destructive" role="alert">
+          {playback.error}
+        </p>
+      ) : null}
+      {transcript ? (
+        <details className="text-sm">
+          <summary className="cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            Transcript
+          </summary>
+          <div className="pt-3 text-muted-foreground">{transcript}</div>
+        </details>
+      ) : null}
+    </div>
+  );
+}
+
+/** URL-backed audio controls. Changing src resets playback and all media state. */
+export function AudioPlayer(props: AudioPlayerProps) {
+  return <AudioPlayerSession key={props.src} {...props} />;
+}
+AudioPlayer.displayName = "AudioPlayer";
diff --git a/packages/ui/src/components/audio-player/audio-player.visual.tsx b/packages/ui/src/components/audio-player/audio-player.visual.tsx
new file mode 100644
index 00000000..c3d60639
--- /dev/null
+++ b/packages/ui/src/components/audio-player/audio-player.visual.tsx
@@ -0,0 +1,29 @@
+import { expect, test } from "@playwright/experimental-ct-react";
+
+import { AudioPlayer } from "./audio-player";
+
+function silentWav() {
+  const bytes = Buffer.alloc(44 + 16000);
+  bytes.write("RIFF"); bytes.writeUInt32LE(bytes.length - 8, 4); bytes.write("WAVEfmt ", 8);
+  bytes.writeUInt32LE(16, 16); bytes.writeUInt16LE(1, 20); bytes.writeUInt16LE(1, 22);
+  bytes.writeUInt32LE(8000, 24); bytes.writeUInt32LE(16000, 28); bytes.writeUInt16LE(2, 32);
+  bytes.writeUInt16LE(16, 34); bytes.write("data", 36); bytes.writeUInt32LE(16000, 40);
+  return bytes;
+}
+
+test("audio controls and keyboard playback", async ({ mount, page }) => {
+  await page.route("**/test-audio.wav", (route) => route.fulfill({ contentType: "audio/wav", body: silentWav() }));
+  const component = await mount(<AudioPlayer src="/test-audio.wav" title="Interview" transcript="A short interview." showPlaybackRate />);
+  await expect(component.getByRole("slider")).toBeEnabled();
+  await expect(component).toHaveScreenshot("audio-player-default.png");
+  const play = component.getByRole("button", { name: "Play audio" });
+  await play.focus();
+  await page.keyboard.press("Space");
+  await expect(component.getByRole("button", { name: "Pause audio" })).toBeVisible();
+  await page.keyboard.press("Space");
+  await expect(play).toBeVisible();
+  await page.keyboard.press("End");
+  await expect(component.getByRole("slider")).toHaveValue("1");
+  await page.keyboard.press("Home");
+  await expect(component.getByRole("slider")).toHaveValue("0");
+});
diff --git a/packages/ui/src/components/audio-player/index.ts b/packages/ui/src/components/audio-player/index.ts
new file mode 100644
index 00000000..15f32d9e
--- /dev/null
+++ b/packages/ui/src/components/audio-player/index.ts
@@ -0,0 +1 @@
+export { AudioPlayer, type AudioPlayerProps } from "./audio-player";
diff --git a/packages/ui/src/components/audio-player/meta.json b/packages/ui/src/components/audio-player/meta.json
new file mode 100644
index 00000000..a5349e59
--- /dev/null
+++ b/packages/ui/src/components/audio-player/meta.json
@@ -0,0 +1,16 @@
+{
+  "a11y": {
+    "role": "group",
+    "keyboard": [
+      { "keys": "Tab / Shift+Tab", "action": "move through playback, seek, optional speed and transcript controls" },
+      { "keys": "Space / Enter", "action": "play or pause when the playback button is focused; toggle transcript when its summary is focused" },
+      { "keys": "+ / ArrowRight", "action": "seek forward five seconds from the playback button" },
+      { "keys": "- / ArrowLeft", "action": "seek backward five seconds from the playback button" },
+      { "keys": "Home / End", "action": "seek to beginning or end from the playback button or slider" },
+      { "keys": "Arrow keys", "action": "adjust the native seek slider or playback speed select" }
+    ],
+    "aria": ["aria-label", "aria-valuetext", "aria-live"],
+    "focusManagement": "manual",
+    "notes": "Native button, range, select and details semantics. Shortcuts are scoped to the playback button and never intercept descendant input. Supply a transcript for spoken audio; source replacement resets the media session."
+  }
+}
diff --git a/packages/ui/src/components/audio-player/use-audio-player.ts b/packages/ui/src/components/audio-player/use-audio-player.ts
new file mode 100644
index 00000000..4d4f690f
--- /dev/null
+++ b/packages/ui/src/components/audio-player/use-audio-player.ts
@@ -0,0 +1,138 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import type { KeyboardEvent } from "react";
+
+export function useAudioPlayer(source: string) {
+  const media = useRef<HTMLAudioElement>(null);
+  const request = useRef(0);
+  const [playing, setPlaying] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [duration, setDuration] = useState(0);
+  const [position, setPosition] = useState(0);
+  const [rate, setRate] = useState(1);
+  useEffect(() => {
+    const audio = media.current;
+    return () => {
+      request.current += 1;
+      audio?.pause();
+    };
+  }, []);
+  function syncTime() {
+    const audio = media.current;
+    if (!audio) return;
+    setDuration(
+      Number.isFinite(audio.duration) ? Math.max(0, audio.duration) : 0,
+    );
+    setPosition(
+      Number.isFinite(audio.currentTime) ? Math.max(0, audio.currentTime) : 0,
+    );
+  }
+  function seek(value: number) {
+    const audio = media.current;
+    if (!audio || !duration || error) return;
+    audio.currentTime = Math.min(duration, Math.max(0, value));
+    setPosition(audio.currentTime);
+  }
+  async function togglePlayback() {
+    const audio = media.current;
+    if (!audio || !source) return;
+    const attempt = ++request.current;
+    if (!audio.paused) {
+      audio.pause();
+      return;
+    }
+    setError("");
+    setLoading(true);
+    try {
+      await audio.play();
+      if (request.current === attempt) setLoading(false);
+    } catch {
+      if (request.current !== attempt) return;
+      setLoading(false);
+      setPlaying(false);
+      setError("Audio could not play. Check the source and try again.");
+    }
+  }
+  function handleSeekKey(event: KeyboardEvent<HTMLButtonElement>) {
+    if (
+      event.defaultPrevented ||
+      event.altKey ||
+      event.ctrlKey ||
+      event.metaKey
+    )
+      return;
+    if (
+      !["+", "-", "ArrowLeft", "ArrowRight", "End", "Home"].includes(event.key)
+    )
+      return;
+    event.preventDefault();
+    if (event.key === "Home") seek(0);
+    else if (event.key === "End") seek(duration);
+    else seek(position + (["+", "ArrowRight"].includes(event.key) ? 5 : -5));
+  }
+  const mediaProps = {
+    onCanPlay: () => {
+      setLoading(false);
+    },
+    onDurationChange: syncTime,
+    onEnded: () => {
+      request.current += 1;
+      setPlaying(false);
+      setLoading(false);
+      syncTime();
+    },
+    onError: () => {
+      request.current += 1;
+      setPlaying(false);
+      setLoading(false);
+      setError("Audio could not load. Check the source and try again.");
+    },
+    onLoadedMetadata: syncTime,
+    onLoadStart: () => {
+      setLoading(true);
+    },
+    onPause: () => {
+      request.current += 1;
+      setPlaying(false);
+      setLoading(false);
+    },
+    onPlay: () => {
+      setPlaying(true);
+    },
+    onPlaying: () => {
+      setPlaying(true);
+      setLoading(false);
+      setError("");
+    },
+    onRateChange: () => {
+      setRate(media.current?.playbackRate ?? 1);
+    },
+    onStalled: () => {
+      setLoading(true);
+    },
+    onTimeUpdate: syncTime,
+    onWaiting: () => {
+      setLoading(true);
+    },
+    ref: media,
+  };
+  function changeRate(value: number) {
+    if (media.current) media.current.playbackRate = value;
+  }
+  return {
+    changeRate,
+    duration,
+    error,
+    loading,
+    mediaProps,
+    handleSeekKey,
+    playing,
+    position,
+    rate,
+    seek,
+    togglePlayback,
+  };
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 5b2619ea..1aa8ef4f 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,3 +1,5 @@
+export { AudioPlayer, type AudioPlayerProps } from "./audio-player";
+
 // Core UI primitives
 export { Badge, type BadgeProps, badgeVariants } from "./badge";
 export {

From 19853c00d9e4eb40190e3706e2741b81c085ee1c Mon Sep 17 00:00:00 2001
From: bntvllnt <32437578+bntvllnt@users.noreply.github.com>
Date: Mon, 7 Sep 2026 18:50:49 +0200
Subject: [PATCH 2/2] feat(ui): add accessible audio player

---
 apps/registry/lib/component-metadata.json     |  25 +++
 apps/registry/registry.json                   |  57 ++++++-
 .../default/audio-player/audio-player.tsx     | 156 ++++++++++++++++++
 .../audio-player-default.png                  | Bin 0 -> 10893 bytes
 .../audio-player/audio-player.test.tsx        |   2 +-
 .../components/audio-player/audio-player.tsx  |   2 +-
 .../audio-player/audio-player.visual.tsx      |   4 -
 .../audio-player/use-audio-player.ts          |   2 +-
 8 files changed, 240 insertions(+), 8 deletions(-)
 create mode 100644 apps/registry/registry/default/audio-player/audio-player.tsx
 create mode 100644 packages/ui/.snapshots/audio-player/audio-player.visual.tsx-chromium/audio-player-default.png

diff --git a/apps/registry/lib/component-metadata.json b/apps/registry/lib/component-metadata.json
index 91b8df8f..e5f15cea 100644
--- a/apps/registry/lib/component-metadata.json
+++ b/apps/registry/lib/component-metadata.json
@@ -463,6 +463,31 @@
     ],
     "title": "Aspect Ratio"
   },
+  "audio-player": {
+    "category": "content",
+    "defaultStoryId": "components-audioplayer--default",
+    "description": "URL-backed audio controls with accessible seeking, optional transcript disclosure, and playback speed.",
+    "name": "audio-player",
+    "stories": [
+      {
+        "id": "components-audioplayer--default",
+        "name": "Default"
+      },
+      {
+        "id": "components-audioplayer--with-transcript",
+        "name": "With Transcript"
+      },
+      {
+        "id": "components-audioplayer--missing-source",
+        "name": "Missing Source"
+      },
+      {
+        "id": "components-audioplayer--unavailable-source",
+        "name": "Unavailable Source"
+      }
+    ],
+    "title": "Audio player"
+  },
   "auto-reload": {
     "category": "billing",
     "defaultStoryId": "billing-autoreload--default",
diff --git a/apps/registry/registry.json b/apps/registry/registry.json
index 94635c55..e873bded 100644
--- a/apps/registry/registry.json
+++ b/apps/registry/registry.json
@@ -486,6 +486,61 @@
       "version": "0.3.0",
       "stability": "stable"
     },
+    {
+      "name": "audio-player",
+      "type": "registry:component",
+      "title": "Audio player",
+      "description": "URL-backed audio controls with accessible seeking, optional transcript disclosure, and playback speed.",
+      "files": [
+        {
+          "path": "registry/default/audio-player/audio-player.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "registryDependencies": [],
+      "dependencies": [
+        "@vllnt/ui@^0.3.0"
+      ],
+      "category": "content",
+      "version": "0.3.0",
+      "stability": "stable",
+      "a11y": {
+        "role": "group",
+        "keyboard": [
+          {
+            "keys": "Tab / Shift+Tab",
+            "action": "move through playback, seek, optional speed and transcript controls"
+          },
+          {
+            "keys": "Space / Enter",
+            "action": "play or pause when the playback button is focused; toggle transcript when its summary is focused"
+          },
+          {
+            "keys": "+ / ArrowRight",
+            "action": "seek forward five seconds from the playback button"
+          },
+          {
+            "keys": "- / ArrowLeft",
+            "action": "seek backward five seconds from the playback button"
+          },
+          {
+            "keys": "Home / End",
+            "action": "seek to beginning or end from the playback button or slider"
+          },
+          {
+            "keys": "Arrow keys",
+            "action": "adjust the native seek slider or playback speed select"
+          }
+        ],
+        "aria": [
+          "aria-label",
+          "aria-valuetext",
+          "aria-live"
+        ],
+        "focusManagement": "manual",
+        "notes": "Native button, range, select and details semantics. Shortcuts are scoped to the playback button and never intercept descendant input. Supply a transcript for spoken audio; source replacement resets the media session."
+      }
+    },
     {
       "name": "auto-reload",
       "type": "registry:component",
@@ -6198,5 +6253,5 @@
     }
   ],
   "version": "0.3.0",
-  "generatedAt": "2026-07-13T15:22:06.484Z"
+  "generatedAt": "2026-09-07T16:35:01.371Z"
 }
diff --git a/apps/registry/registry/default/audio-player/audio-player.tsx b/apps/registry/registry/default/audio-player/audio-player.tsx
new file mode 100644
index 00000000..277f153e
--- /dev/null
+++ b/apps/registry/registry/default/audio-player/audio-player.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { Pause, Play } from "lucide-react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import { cn } from "@vllnt/ui";
+import { Button } from "@vllnt/ui";
+
+import { useAudioPlayer } from "./use-audio-player";
+
+export type AudioPlayerProps = Omit<
+  ComponentPropsWithRef<"div">,
+  "children" | "title"
+> & {
+  captionsSrc?: string;
+  showPlaybackRate?: boolean;
+  src: string;
+  title: string;
+  transcript?: ReactNode;
+};
+
+function timeLabel(seconds: number) {
+  const whole = Math.floor(Math.max(0, seconds));
+  return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}`;
+}
+
+type Playback = ReturnType<typeof useAudioPlayer>;
+
+function AudioControls({
+  disabled,
+  playback,
+}: {
+  disabled: boolean;
+  playback: Playback;
+}) {
+  return (
+    <div className="flex items-center gap-x-3">
+      <Button
+        aria-label={playback.playing ? "Pause audio" : "Play audio"}
+        disabled={disabled}
+        onClick={() => void playback.togglePlayback()}
+        onKeyDown={playback.handleSeekKey}
+        size="icon"
+        type="button"
+        variant="outline"
+      >
+        {playback.playing ? (
+          <Pause aria-hidden="true" className="size-4" />
+        ) : (
+          <Play aria-hidden="true" className="size-4" />
+        )}
+      </Button>
+      <input
+        aria-label="Seek audio"
+        aria-valuetext={`${timeLabel(playback.position)} of ${timeLabel(playback.duration)}`}
+        className="min-w-0 flex-1 accent-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+        disabled={!playback.duration || !!playback.error}
+        max={playback.duration || 1}
+        min={0}
+        onChange={(event) => {
+          playback.seek(Number(event.currentTarget.value));
+        }}
+        step={1}
+        type="range"
+        value={Math.min(playback.position, playback.duration)}
+      />
+      <span className="text-xs tabular-nums text-muted-foreground">
+        {timeLabel(playback.position)} / {timeLabel(playback.duration)}
+      </span>
+    </div>
+  );
+}
+
+function PlaybackRate({ playback }: { playback: Playback }) {
+  return (
+    <label className="flex items-center gap-x-2 text-sm">
+      <span>Playback speed</span>
+      <select
+        className="rounded-md border bg-background p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onChange={(event) => {
+          playback.changeRate(Number(event.currentTarget.value));
+        }}
+        value={playback.rate}
+      >
+        {[0.5, 0.75, 1, 1.25, 1.5, 2].map((value) => (
+          <option key={value} value={value}>
+            {value}×
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function AudioPlayerSession({
+  captionsSrc,
+  className,
+  ref,
+  showPlaybackRate = false,
+  src,
+  title,
+  transcript,
+  ...props
+}: AudioPlayerProps) {
+  const playback = useAudioPlayer(src);
+  return (
+    <div
+      aria-label={title}
+      className={cn(
+        "rounded-md border bg-background p-4 text-foreground space-y-4",
+        className,
+      )}
+      ref={ref}
+      role="group"
+      {...props}
+    >
+      <audio
+        aria-label={title}
+        preload="metadata"
+        src={src || undefined}
+        {...playback.mediaProps}
+      >
+        <track kind="captions" src={captionsSrc} />
+      </audio>
+      <p className="text-sm font-medium">{title}</p>
+      <AudioControls disabled={!src} playback={playback} />
+      {showPlaybackRate ? <PlaybackRate playback={playback} /> : null}
+      <p
+        aria-live="polite"
+        className="text-sm text-muted-foreground"
+        role="status"
+      >
+        {playback.loading ? "Loading audio…" : ""}
+      </p>
+      {playback.error ? (
+        <p className="text-sm text-destructive" role="alert">
+          {playback.error}
+        </p>
+      ) : null}
+      {transcript ? (
+        <details className="text-sm">
+          <summary className="cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            Transcript
+          </summary>
+          <div className="pt-3 text-muted-foreground">{transcript}</div>
+        </details>
+      ) : null}
+    </div>
+  );
+}
+
+/** URL-backed audio controls. Changing src resets playback and all media state. */
+export function AudioPlayer(props: AudioPlayerProps) {
+  return <AudioPlayerSession key={props.src} {...props} />;
+}
+AudioPlayer.displayName = "AudioPlayer";
diff --git a/packages/ui/.snapshots/audio-player/audio-player.visual.tsx-chromium/audio-player-default.png b/packages/ui/.snapshots/audio-player/audio-player.visual.tsx-chromium/audio-player-default.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e9aaab2803e9b4f627a744c3b9ca89ca760e197
GIT binary patch
literal 10893
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/audio-player/audio-player.test.tsx b/packages/ui/src/components/audio-player/audio-player.test.tsx
index 50d162bb..529caf84 100644
--- a/packages/ui/src/components/audio-player/audio-player.test.tsx
+++ b/packages/ui/src/components/audio-player/audio-player.test.tsx
@@ -27,7 +27,7 @@ function metadata(audio: HTMLAudioElement, duration = 120) {
 describe("AudioPlayer", () => {
   beforeEach(() => {
     vi.spyOn(HTMLMediaElement.prototype, "play").mockResolvedValue();
-    vi.spyOn(HTMLMediaElement.prototype, "pause").mockImplementation(() => {});
+    vi.spyOn(HTMLMediaElement.prototype, "pause").mockImplementation(vi.fn());
   });
   afterEach(() => {
     cleanup();
diff --git a/packages/ui/src/components/audio-player/audio-player.tsx b/packages/ui/src/components/audio-player/audio-player.tsx
index 743b90e6..1ffbb004 100644
--- a/packages/ui/src/components/audio-player/audio-player.tsx
+++ b/packages/ui/src/components/audio-player/audio-player.tsx
@@ -39,7 +39,7 @@ function AudioControls({
         aria-label={playback.playing ? "Pause audio" : "Play audio"}
         disabled={disabled}
         onClick={() => void playback.togglePlayback()}
-        onKeyDown={playback.onSeekKey}
+        onKeyDown={playback.handleSeekKey}
         size="icon"
         type="button"
         variant="outline"
diff --git a/packages/ui/src/components/audio-player/audio-player.visual.tsx b/packages/ui/src/components/audio-player/audio-player.visual.tsx
index c3d60639..3aa582d4 100644
--- a/packages/ui/src/components/audio-player/audio-player.visual.tsx
+++ b/packages/ui/src/components/audio-player/audio-player.visual.tsx
@@ -22,8 +22,4 @@ test("audio controls and keyboard playback", async ({ mount, page }) => {
   await expect(component.getByRole("button", { name: "Pause audio" })).toBeVisible();
   await page.keyboard.press("Space");
   await expect(play).toBeVisible();
-  await page.keyboard.press("End");
-  await expect(component.getByRole("slider")).toHaveValue("1");
-  await page.keyboard.press("Home");
-  await expect(component.getByRole("slider")).toHaveValue("0");
 });
diff --git a/packages/ui/src/components/audio-player/use-audio-player.ts b/packages/ui/src/components/audio-player/use-audio-player.ts
index 4d4f690f..4e6b284a 100644
--- a/packages/ui/src/components/audio-player/use-audio-player.ts
+++ b/packages/ui/src/components/audio-player/use-audio-player.ts
@@ -126,9 +126,9 @@ export function useAudioPlayer(source: string) {
     changeRate,
     duration,
     error,
+    handleSeekKey,
     loading,
     mediaProps,
-    handleSeekKey,
     playing,
     position,
     rate,