From eb410ecffed7b141f070d7b69b87f2c211efce70 Mon Sep 17 00:00:00 2001
From: Denis Skripchenko <denskrp90@gmail.com>
Date: Sun, 25 Oct 2026 23:37:27 +0300
Subject: [PATCH 1/2] feat(media): UidVideo, UidAudio, useMediaController and
 the @dskripchenko/ui/hls adapter

- useMediaController: normalised state, commands, hotkeys, one active player
  per page, resume position, readable localised errors (404 told apart).
- UidVideo: sources with fallback and quality menu, scrub bar with buffered
  ranges, chapters and sprite thumbnails, subtitles drawn by the player,
  speed/quality/captions menus inside the player (sheet in small players),
  full screen with the iOS fallback, picture-in-picture, touch gestures,
  auto-hiding controls.
- UidAudio: compact row, mini variant, in-browser waveform (chunked,
  cached, size-capped, lazy) or precomputed peaks, playlist with
  auto-advance and Media Session.
- @dskripchenko/ui/hls (lazy entry): native HLS where available, otherwise
  MSE with fMP4/CMAF and MPEG-TS (built-in H.264/AAC transmuxer), AES-128,
  live playlists, discontinuities, ABR and manual quality, retries.
- Real-browser checks (scripts/media-check), docs in en/ru/de/zh, stories.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/media-players.md                   |   5 +
 .gitignore                                    |   1 +
 README.md                                     |   7 +-
 docs/de/README.md                             |   7 +-
 docs/de/audio.md                              |  74 ++
 docs/de/i18n.md                               |   3 +-
 docs/de/video.md                              | 141 ++++
 docs/en/audio.md                              |  74 ++
 docs/en/i18n.md                               |   3 +-
 docs/en/video.md                              | 141 ++++
 docs/ru/README.md                             |   7 +-
 docs/ru/audio.md                              |  74 ++
 docs/ru/i18n.md                               |   3 +-
 docs/ru/video.md                              | 141 ++++
 docs/zh/README.md                             |   7 +-
 docs/zh/audio.md                              |  74 ++
 docs/zh/i18n.md                               |   3 +-
 docs/zh/video.md                              | 141 ++++
 package.json                                  |   8 +
 scripts/media-check/app/index.html            |  12 +
 scripts/media-check/app/main.ts               |  74 ++
 scripts/media-check/check.mjs                 | 326 ++++++++
 scripts/media-check/fixtures.sh               |  67 ++
 scripts/media-check/screens.mjs               |  67 ++
 scripts/media-check/server.mjs                | 121 +++
 src/components/Audio/UidAudio.css             | 409 +++++++++
 src/components/Audio/UidAudio.spec.ts         | 119 +++
 src/components/Audio/UidAudio.stories.ts      |  80 ++
 src/components/Audio/UidAudio.vue             | 502 +++++++++++
 src/components/Audio/index.ts                 |   2 +
 src/components/Media/UidMedia.css             | 509 ++++++++++++
 src/components/Media/UidMediaMenu.vue         | 245 ++++++
 src/components/Media/UidMediaScrubber.vue     | 299 +++++++
 src/components/Media/__testing__/fakeMedia.ts |  41 +
 src/components/Media/index.ts                 |  12 +
 src/components/Media/mediaUtils.spec.ts       |  84 ++
 src/components/Media/mediaUtils.ts            | 153 ++++
 .../Media/useMediaController.spec.ts          | 164 ++++
 src/components/Media/useMediaController.ts    | 506 ++++++++++++
 src/components/Media/useMediaLocale.ts        |  14 +
 src/components/Media/waveform.spec.ts         |  55 ++
 src/components/Media/waveform.ts              | 153 ++++
 src/components/Video/UidVideo.css             | 351 ++++++++
 src/components/Video/UidVideo.spec.ts         | 181 ++++
 src/components/Video/UidVideo.stories.ts      | 100 +++
 src/components/Video/UidVideo.vue             | 778 ++++++++++++++++++
 src/components/Video/index.ts                 |   2 +
 src/hls/__fixtures__/tiny-init.mp4            | Bin 0 -> 1352 bytes
 src/hls/__fixtures__/tiny-seg.m4s             | Bin 0 -> 5750 bytes
 src/hls/__fixtures__/tiny-ts.bin              | Bin 0 -> 11656 bytes
 src/hls/abr.spec.ts                           |  57 ++
 src/hls/abr.ts                                |  76 ++
 src/hls/aes.ts                                |  33 +
 src/hls/engine.ts                             | 699 ++++++++++++++++
 src/hls/index.ts                              |  14 +
 src/hls/mp4.spec.ts                           | 132 +++
 src/hls/mp4.ts                                | 156 ++++
 src/hls/playlist.spec.ts                      | 111 +++
 src/hls/playlist.ts                           | 261 ++++++
 src/hls/transmux.ts                           |  34 +
 src/hls/ts/adts.ts                            |  54 ++
 src/hls/ts/demux.ts                           | 150 ++++
 src/hls/ts/h264.ts                            | 185 +++++
 src/hls/ts/mp4mux.ts                          | 175 ++++
 src/hls/ts/transmuxer.ts                      | 198 +++++
 src/index.ts                                  |  40 +-
 src/locales/en.ts                             |  43 +
 src/locales/index.ts                          |   2 +-
 src/locales/ru.ts                             |  43 +
 src/locales/types.ts                          |  47 ++
 tsconfig.build.json                           |   2 +-
 vite.config.ts                                |   1 +
 72 files changed, 8838 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/media-players.md
 create mode 100644 docs/de/audio.md
 create mode 100644 docs/de/video.md
 create mode 100644 docs/en/audio.md
 create mode 100644 docs/en/video.md
 create mode 100644 docs/ru/audio.md
 create mode 100644 docs/ru/video.md
 create mode 100644 docs/zh/audio.md
 create mode 100644 docs/zh/video.md
 create mode 100644 scripts/media-check/app/index.html
 create mode 100644 scripts/media-check/app/main.ts
 create mode 100644 scripts/media-check/check.mjs
 create mode 100755 scripts/media-check/fixtures.sh
 create mode 100644 scripts/media-check/screens.mjs
 create mode 100644 scripts/media-check/server.mjs
 create mode 100644 src/components/Audio/UidAudio.css
 create mode 100644 src/components/Audio/UidAudio.spec.ts
 create mode 100644 src/components/Audio/UidAudio.stories.ts
 create mode 100644 src/components/Audio/UidAudio.vue
 create mode 100644 src/components/Audio/index.ts
 create mode 100644 src/components/Media/UidMedia.css
 create mode 100644 src/components/Media/UidMediaMenu.vue
 create mode 100644 src/components/Media/UidMediaScrubber.vue
 create mode 100644 src/components/Media/__testing__/fakeMedia.ts
 create mode 100644 src/components/Media/index.ts
 create mode 100644 src/components/Media/mediaUtils.spec.ts
 create mode 100644 src/components/Media/mediaUtils.ts
 create mode 100644 src/components/Media/useMediaController.spec.ts
 create mode 100644 src/components/Media/useMediaController.ts
 create mode 100644 src/components/Media/useMediaLocale.ts
 create mode 100644 src/components/Media/waveform.spec.ts
 create mode 100644 src/components/Media/waveform.ts
 create mode 100644 src/components/Video/UidVideo.css
 create mode 100644 src/components/Video/UidVideo.spec.ts
 create mode 100644 src/components/Video/UidVideo.stories.ts
 create mode 100644 src/components/Video/UidVideo.vue
 create mode 100644 src/components/Video/index.ts
 create mode 100644 src/hls/__fixtures__/tiny-init.mp4
 create mode 100644 src/hls/__fixtures__/tiny-seg.m4s
 create mode 100644 src/hls/__fixtures__/tiny-ts.bin
 create mode 100644 src/hls/abr.spec.ts
 create mode 100644 src/hls/abr.ts
 create mode 100644 src/hls/aes.ts
 create mode 100644 src/hls/engine.ts
 create mode 100644 src/hls/index.ts
 create mode 100644 src/hls/mp4.spec.ts
 create mode 100644 src/hls/mp4.ts
 create mode 100644 src/hls/playlist.spec.ts
 create mode 100644 src/hls/playlist.ts
 create mode 100644 src/hls/transmux.ts
 create mode 100644 src/hls/ts/adts.ts
 create mode 100644 src/hls/ts/demux.ts
 create mode 100644 src/hls/ts/h264.ts
 create mode 100644 src/hls/ts/mp4mux.ts
 create mode 100644 src/hls/ts/transmuxer.ts

diff --git a/.changeset/media-players.md b/.changeset/media-players.md
new file mode 100644
index 0000000..7637fc4
--- /dev/null
+++ b/.changeset/media-players.md
@@ -0,0 +1,5 @@
+---
+"@dskripchenko/ui": minor
+---
+
+Media players without dependencies. `UidVideo` — native `<video>` with the kit's controls: scrub bar with buffered ranges, chapters and sprite thumbnails, volume, speed and quality menus, WebVTT subtitles drawn by the player, full screen (iOS fallback), picture-in-picture, resume position, hotkeys, double-tap seek, auto-hiding controls. `UidAudio` — compact row, `mini` variant for tables, waveform decoded in the browser (chunked, cached, size-capped) or from `peaks`, playlist with auto-advance and Media Session. `useMediaController` is the shared core (one active player per page, normalised state, readable localised errors; `media` locale bag in `en`/`ru`). New lazily loaded entry `@dskripchenko/ui/hls`: native HLS where available, otherwise MSE with fMP4/CMAF and MPEG-TS (built-in H.264/AAC → fMP4 transmuxer), AES-128, live playlists, discontinuities, ABR with manual quality selection, retries.
diff --git a/.gitignore b/.gitignore
index a46ff6a..93041f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ storybook-static
 coverage
 .npmrc
 stats.html
+.media-fixtures
diff --git a/README.md b/README.md
index 5a9f587..6939dfb 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,7 @@ A Vue 3 component, token, and theme library on CSS custom properties.
 - **i18n** — built-in `ru` + `en` locales, `UidLocaleProvider` for partial overrides or custom locales
 - **~1500 icons** — `lucide-vue-next` under the hood + `@dskripchenko/ui/icons` sub-export
 - **Zero runtime chart deps** — built-in SVG primitives (Sparkline, ProgressRing, Gauge, Heatmap)
+- **Media players without dependencies** — video and audio on the native elements, in-browser waveform, HLS (fMP4 and MPEG-TS) in a lazily loaded entry
 
 ## Install
 
@@ -95,19 +96,21 @@ A short selection — the full catalog is in [Storybook](https://dskripchenko.gi
 
 **Charts:** Sparkline, ProgressRing, Gauge, Heatmap
 
+**Media:** Video, Audio (waveform, mini, playlist), HLS adapter (`@dskripchenko/ui/hls`)
+
 **Wizards:** Stepper, Wizard, WizardStep
 
 **Patterns:** Header, Footer, Sidebar, PageHeader, EmptyState, ErrorState, Result
 
 **Layouts:** SimpleLayout, SidebarLayout, AuthLayout, WizardLayout
 
-**Composables:** useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
+**Composables:** useMediaController, useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
 
 ## Documentation
 
 User docs are translated into four languages — pick yours:
 
-- 🇬🇧 **English** (default): [getting-started](./docs/en/getting-started.md), [theming](./docs/en/theming.md), [tokens](./docs/en/tokens.md), [icons](./docs/en/icons.md), [patterns](./docs/en/patterns.md), [validation](./docs/en/validation.md), [charts](./docs/en/charts.md), [markdown](./docs/en/markdown.md), [i18n](./docs/en/i18n.md)
+- 🇬🇧 **English** (default): [getting-started](./docs/en/getting-started.md), [theming](./docs/en/theming.md), [tokens](./docs/en/tokens.md), [icons](./docs/en/icons.md), [patterns](./docs/en/patterns.md), [validation](./docs/en/validation.md), [charts](./docs/en/charts.md), [markdown](./docs/en/markdown.md), [video](./docs/en/video.md), [audio](./docs/en/audio.md), [i18n](./docs/en/i18n.md)
 - 🇷🇺 **Русский**: [docs/ru/](./docs/ru/)
 - 🇩🇪 **Deutsch**: [docs/de/](./docs/de/)
 - 🇨🇳 **中文**: [docs/zh/](./docs/zh/)
diff --git a/docs/de/README.md b/docs/de/README.md
index 7ace774..6924651 100644
--- a/docs/de/README.md
+++ b/docs/de/README.md
@@ -23,6 +23,7 @@ Eine Bibliothek aus Vue-3-Komponenten, Tokens und Themes auf Basis von CSS Custo
 - **i18n** — eingebaute `ru` + `en` Locales, `UidLocaleProvider` für partielle Überschreibungen und eigene Locales
 - **~1500 Icons** — `lucide-vue-next` unter der Haube + Sub-Export `@dskripchenko/ui/icons`
 - **Keine Runtime-Chart-Deps** — eingebaute SVG-Primitive (Sparkline, ProgressRing, Gauge, Heatmap)
+- **Mediaplayer ohne Abhängigkeiten** — Video und Audio auf den nativen Elementen, Wellenform im Browser, HLS (fMP4 und MPEG-TS) in einem bei Bedarf geladenen Entry
 
 ## Installation
 
@@ -85,13 +86,15 @@ Kurze Auswahl — vollständiger Katalog im [Storybook](https://dskripchenko.git
 
 **Charts:** Sparkline, ProgressRing, Gauge, Heatmap
 
+**Medien:** Video, Audio (Wellenform, Mini, Playlist), HLS-Adapter (`@dskripchenko/ui/hls`)
+
 **Wizards:** Stepper, Wizard, WizardStep
 
 **Patterns:** Header, Footer, Sidebar, PageHeader, EmptyState, ErrorState, Result
 
 **Layouts:** SimpleLayout, SidebarLayout, AuthLayout, WizardLayout
 
-**Composables:** useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
+**Composables:** useMediaController, useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
 
 ## Dokumentation
 
@@ -99,7 +102,7 @@ Anwender-Dokumentation in vier Sprachen — wähle deine:
 
 - 🇬🇧 **English** (default): [docs/en/](../../docs/en/)
 - 🇷🇺 **Русский**: [docs/ru/](../../docs/ru/)
-- 🇩🇪 **Deutsch**: [Erste Schritte](../../docs/de/getting-started.md), [Theming](../../docs/de/theming.md), [Tokens](../../docs/de/tokens.md), [Icons](../../docs/de/icons.md), [Patterns](../../docs/de/patterns.md), [Validation](../../docs/de/validation.md), [Charts](../../docs/de/charts.md), [Markdown](../../docs/de/markdown.md), [i18n](../../docs/de/i18n.md)
+- 🇩🇪 **Deutsch**: [Erste Schritte](../../docs/de/getting-started.md), [Theming](../../docs/de/theming.md), [Tokens](../../docs/de/tokens.md), [Icons](../../docs/de/icons.md), [Patterns](../../docs/de/patterns.md), [Validation](../../docs/de/validation.md), [Charts](../../docs/de/charts.md), [Markdown](../../docs/de/markdown.md), [Video](../../docs/de/video.md), [Audio](../../docs/de/audio.md), [i18n](../../docs/de/i18n.md)
 - 🇨🇳 **中文**: [docs/zh/](../../docs/zh/)
 
 Mitwirkenden-Dokumentation (nur Englisch): [Architecture](../internal/architecture.md), [Component guidelines](../internal/component-guidelines.md), [Contributing](../../.github/CONTRIBUTING.md), [Roadmap](../internal/roadmap.md).
diff --git a/docs/de/audio.md b/docs/de/audio.md
new file mode 100644
index 0000000..5b80cac
--- /dev/null
+++ b/docs/de/audio.md
@@ -0,0 +1,74 @@
+# Audio
+
+`UidAudio` ist ein Audioplayer auf dem nativen Element `<audio>`: eine kompakte Zeile (Wiedergabe, Zeitleiste, Zeit, Lautstärke, Geschwindigkeit), eine Variante `mini` für Tabellen und Listen, eine im Browser berechnete Wellenform und eine Playlist. Den Controller teilt er mit [UidVideo](./video.md).
+
+```vue
+<UidAudio src="/media/episode.mp3" title="Episode 12" artist="The Podcast" waveform />
+
+<UidAudio :src="row.recording" variant="mini" />
+
+<UidAudio v-model:index="current" :tracks="playlist" waveform />
+```
+
+| Prop | Typ | Standard | |
+|---|---|---|---|
+| `src`, `type` | `string` | — | Ein Titel; mit `type` wird ein nicht abspielbares Format sofort gemeldet |
+| `title`, `artist` | `string` | — | Über der Zeitleiste angezeigt |
+| `tracks` | `UidAudioTrack[]` | — | Playlist: `{ src, type?, title?, artist?, peaks?, duration? }` |
+| `index` (`v-model:index`) | `number` | `0` | Aktueller Titel der Playlist |
+| `variant` | `'default' \| 'mini'` | `'default'` | `mini` — eine Zeile: Wiedergabe, Leiste, Zeit |
+| `waveform` | `boolean` | `false` | Im Browser dekodierte Wellenform als Zeitleiste |
+| `peaks` | `number[]` | — | Vorberechnete Spitzen `0..1`; zeichnet die Wellenform ohne Dekodierung |
+| `waveformMaxBytes` | `number` | 40 MB | Größere Dateien werden nicht dekodiert — stattdessen eine einfache Leiste |
+| `waveformMaxDuration` | `number` | 1800 | Längeres Audio (Sekunden) wird nicht dekodiert |
+| `autoAdvance` | `boolean` | `true` | Nächster Titel der Playlist, wenn einer endet |
+| `loop` | `boolean` | `false` | Den Titel oder die ganze Playlist wiederholen |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | |
+| `exclusive` | `boolean` | `true` | Der Start dieses Players pausiert die anderen |
+| `resumeKey` | `string` | — | Merkt sich die Position (je Titel der Playlist) |
+| `rates` | `number[]` | `0.5…2` | Geschwindigkeitsmenü |
+| `hotkeys` | `boolean` | `true` | Leertaste/`K`, Pfeiltasten, `J`/`L`, `M`, `0`–`9`; `Shift+N` / `Shift+P` — nächster / vorheriger Titel |
+| `showVolume`, `showRate` | `boolean` | `true` | |
+| `showPlaylist` | `boolean` | `true` | Titelliste unter dem Player |
+
+Events: `play`, `pause`, `ended`, `error`, `trackchange` (Index), `update:index`. Bereitgestellt: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
+
+## Layout
+
+- **Standard** — eine Zeile: Wiedergabe-Button, Titel und Zeitleiste, Zeit, Lautstärke, Geschwindigkeit. In einem schmalen Container (unter 480 px) wandert die Zeitleiste in eine eigene Zeile in voller Breite, Titel und Interpret stehen untereinander, der Lautstärkeregler bleibt den Hardwaretasten überlassen. Ab 560 px ist der Lautstärkeregler immer sichtbar.
+- **Mini** — standardmäßig `240px` breit (`--uid-audio-mini-width`), passt in eine Tabellenzelle: Wiedergabe, Leiste oder kleine Wellenform, Zeit (vor der Wiedergabe die Dauer, währenddessen die Position). Der Start einer Zeile pausiert die anderen.
+- **Playlist** — Zurück / Weiter neben dem Wiedergabe-Button und eine nummerierte Liste mit markiertem laufendem Titel. „Zurück“ spult einen Titel, der länger als 3 Sekunden läuft, zuerst an den Anfang. Sperrbildschirm und Hardware-Medientasten funktionieren über die Media Session API.
+
+## Wellenform
+
+Mit `waveform` wird die Datei geladen und mit Web Audio dekodiert (`decodeAudioData` mit niedriger Abtastrate, um Speicher zu sparen), und die Spitzen werden in Portionen berechnet, zwischen denen der Browser zum Zug kommt (`requestIdleCallback`, sonst `setTimeout`). Ergebnisse werden je Adresse für die Lebensdauer der Seite zwischengespeichert; Dateien werden einzeln dekodiert und erst, wenn der Player nahe am Viewport ist, sodass eine Tabelle mit hundert Aufnahmen reaktionsschnell bleibt. Dateien über `waveformMaxBytes` oder länger als `waveformMaxDuration` behalten die einfache Leiste. Das Audio muss für `fetch` lesbar sein — gleicher Origin oder CORS.
+
+Für lange Aufnahmen die Spitzen auf dem Server berechnen und in `peaks` übergeben (beliebige Länge; der Player resampelt auf seine Breite):
+
+```ts
+import { computePeaks } from '@dskripchenko/ui'
+
+// etwa in einem Worker oder bei der Verarbeitung eines Uploads
+const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
+```
+
+Helfer: `getWaveform(src, options)`, `computePeaks(channels, count)`, `resamplePeaks(peaks, n)`, `peaksToPath(peaks)`.
+
+## Formate
+
+| Format | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP3 | ✓ | ✓ | ✓ | ✓ |
+| AAC / M4A | ✓ | ✓ | ✓ | ✓ |
+| Ogg · Opus | ✓ | ✓ | ✓ (neuere Versionen) | ✓ (neuere Versionen) |
+| Ogg · Vorbis | ✓ | ✓ | neuere Versionen | neuere Versionen |
+| WAV (PCM) | ✓ | ✓ | ✓ | ✓ |
+| FLAC | ✓ | ✓ | ✓ | ✓ |
+| WebM · Opus | ✓ | ✓ | ✓ | ✓ (neuere Versionen) |
+
+In echten Browsern geprüft (Playwright): MP3, Ogg/Opus, WAV, FLAC und M4A werden in Chromium 156, Chrome 156 und WebKit 27 abgespielt und zeichnen die Wellenform. Bei einem weniger verbreiteten Format besser `type` angeben: Der Player meldet „nicht unterstützt“ sofort statt erst nach einem fehlgeschlagenen Laden.
+
+## Gestaltung
+
+Variablen: `--uid-audio-accent`, `--uid-audio-accent-hover`, `--uid-audio-bg`, `--uid-audio-border`, `--uid-audio-radius`, `--uid-audio-padding`, `--uid-audio-play-size`, `--uid-audio-play-color`, `--uid-audio-wave`, `--uid-audio-wave-height`, `--uid-audio-mini-width`, `--uid-audio-list-max-height`.
diff --git a/docs/de/i18n.md b/docs/de/i18n.md
index 9f1e362..3467fa9 100644
--- a/docs/de/i18n.md
+++ b/docs/de/i18n.md
@@ -148,7 +148,7 @@ provideLocale(computed(() => (lang.value === 'ru' ? ru : en)))
 
 Alle Komponenten-Texte (Platzhalter, ARIA-Labels, Buttontext) werden über den Provider lokalisiert. Abgedeckte Komponenten:
 
-Select, Combobox, DatePicker, DateRangePicker, TimePicker, TreeSelect, NumberInput, TagsInput, FileUpload, Mention, BackTop, Tour, TreeView, Pagination, Modal, Drawer, Toast, Alert, Tag, Code, DescriptionList, ColorPicker, Cascader, Calendar u. a.
+Select, Combobox, DatePicker, DateRangePicker, TimePicker, TreeSelect, NumberInput, TagsInput, FileUpload, Mention, BackTop, Tour, TreeView, Pagination, Modal, Drawer, Toast, Alert, Tag, Code, DescriptionList, ColorPicker, Cascader, Calendar, Video, Audio u. a.
 
 ## Per-Prop-Überschreibungen
 
@@ -192,6 +192,7 @@ interface UidLocale {
   modal: { close: string }
   drawer: { close: string }
   toast: { close: string }
+  media?: UidMediaLocale // UidVideo, UidAudio: buttons, menus, errors
   breadcrumb?: { showHidden: string }
   pagination: {
     first: string; prev: string; next: string; last: string
diff --git a/docs/de/video.md b/docs/de/video.md
new file mode 100644
index 0000000..e681e43
--- /dev/null
+++ b/docs/de/video.md
@@ -0,0 +1,141 @@
+# Video
+
+`UidVideo` ist ein Videoplayer auf dem nativen Element `<video>` mit eigenen Bedienelementen des Kits: Zeitleiste mit gepufferten Bereichen, Kapiteln und Vorschaubildern, Lautstärke, Menüs für Geschwindigkeit und Qualität, Untertitel, Vollbild und Bild-in-Bild. Keine Abhängigkeiten; HLS-Streams spielt ein separater, verzögert geladener Einstiegspunkt ab (`@dskripchenko/ui/hls`).
+
+```vue
+<UidVideo
+  src="/media/lesson.mp4"
+  poster="/media/lesson.jpg"
+  :tracks="[
+    { src: '/media/lesson.en.vtt', srclang: 'en', label: 'English', default: true },
+    { src: '/media/lesson.chapters.vtt', kind: 'chapters' },
+  ]"
+  thumbnails="/media/lesson.thumbs.vtt"
+  resume-key="lesson-42"
+/>
+```
+
+| Prop | Typ | Standard | |
+|---|---|---|---|
+| `src` | `string` | — | Eine Quelle |
+| `sources` | `UidMediaSource[]` | — | `{ src, type?, label? }` in Reihenfolge der Präferenz; der Browser nimmt die erste, die er abspielen kann. Zwei oder mehr mit `label` bilden das Qualitätsmenü |
+| `poster` | `string` | — | Bild vor der Wiedergabe |
+| `tracks` | `UidMediaTrack[]` | `[]` | WebVTT: `{ src, kind?: 'subtitles' \| 'captions' \| 'chapters', srclang?, label?, default? }` |
+| `thumbnails` | `string` | — | WebVTT, dessen Cues auf Sprite-Kacheln zeigen: `sprite.jpg#xywh=0,0,160,90` |
+| `autoplay` | `boolean` | `false` | Startet so früh wie möglich stummgeschaltet (Browser blockieren Autoplay mit Ton) |
+| `muted`, `loop` | `boolean` | `false` | |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `controls` | `boolean` | `true` | `false` — ein nacktes Element mit den Bedienelementen des Browsers |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | Nötig für Untertitel und Vorschaubilder von einem anderen Origin |
+| `exclusive` | `boolean` | `true` | Der Start dieses Players pausiert die anderen exklusiven Player der Seite |
+| `resumeKey` | `string` | — | Merkt sich die Position in `localStorage` und setzt dort fort |
+| `rates` | `number[]` | `0.5…2` | Geschwindigkeitsmenü |
+| `hotkeys` | `boolean` | `true` | Tastenkürzel, solange der Player den Fokus hat |
+| `aspectRatio` | `string` | `'16 / 9'` | Seitenverhältnis der Box, solange die Videogröße unbekannt ist |
+| `title` | `string` | — | Barrierefreier Name des Players |
+| `autoHide` | `number` | `2500` | Millisekunden ohne Aktivität, nach denen sich die Bedienelemente während der Wiedergabe ausblenden |
+| `hlsOptions` | `HlsOptions` | — | Werden an den HLS-Adapter übergeben (siehe unten) |
+| `hlsLoader` | `() => Promise<module>` | dynamischer Import | Woher der HLS-Adapter kommt |
+
+Events: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (Label). Die Komponente stellt `play()`, `pause()`, `toggle()`, `seek(seconds)`, den reaktiven `state` und das Element `media` bereit.
+
+## Bedienelemente
+
+- **Zeitleiste** — gespielter Teil in der Akzentfarbe, gepufferte Bereiche, Lücken zwischen Kapiteln; beim Überfahren erscheinen Zeit, Kapiteltitel und Vorschaubild. Ziehen spult live. Als `slider` reagiert sie auf Pfeiltasten (±5 s), Page Up/Down (±10 %), Home/End.
+- **Lautstärke** — der Button schaltet stumm, der Regler klappt bei Hover oder Fokus auf (auf Touchscreens übernehmen das die Hardwaretasten).
+- **Einstellungen** — Geschwindigkeit und, falls es mehrere gibt, Qualität (`Auto` folgt bei HLS der Bandbreite). Die Menüs leben im Player und funktionieren daher im Vollbild; in einem kleinen Player werden sie zu einem Sheet über dem Video.
+- **Untertitel** — das Kit zeichnet die Cues selbst (oberhalb der Bedienelemente, auf jedem Video lesbar); im nativen Vollbild von iOS zeigt sie der Systemplayer.
+- **Vollbild** — der ganze Player; auf dem iPhone, wo nur das `<video>` selbst ins Vollbild kann, öffnet sich der native Player.
+- **Bild-in-Bild** — Standard-API oder der Präsentationsmodus von Safari.
+- **Live**-Streams zeigen statt der Zeit ein Abzeichen „Live“; an der Live-Kante wird es rot, ein Klick springt dorthin.
+
+Auf Touchscreens blendet ein Tippen die Bedienelemente ein oder aus, ein Doppeltippen auf das linke oder rechte Drittel spult ∓10 s, der mittlere Button startet und pausiert. Auf dem Desktop startet/pausiert ein Klick auf das Video, ein Doppelklick schaltet das Vollbild um. Während der Wiedergabe blenden sich die Bedienelemente nach `autoHide` aus und bleiben sichtbar, solange ein Menü offen ist, die Leiste gezogen wird oder der Fokus darin liegt.
+
+## Tastatur
+
+| Taste | Aktion |
+|---|---|
+| Leertaste, `K` | Wiedergabe / Pause |
+| ← / → | −5 s / +5 s |
+| `J` / `L` | −10 s / +10 s |
+| ↑ / ↓ | Lautstärke ±10 % |
+| `M` | Stummschalten |
+| `F` | Vollbild |
+| `C` | Untertitel an / aus |
+| `0`–`9` | Sprung zu 0–90 % |
+| Home / End | Anfang / Ende |
+
+## Fehler
+
+Fehler erscheinen im Player mit einem Button „Erneut versuchen“ (Try again) und haben eine Art: `aborted`, `network`, `decode`, `unsupported`, `mse`, `manifest`, `encrypted`, `codec`, `unknown`. Die Texte kommen aus der Locale (`media.errors`, siehe [i18n](./i18n.md)). Ein 404 wird als `network` gemeldet, nicht als „nicht unterstütztes Format“ wie in Browsern. Lässt sich eine Quelle nicht abspielen, wird die nächste aus `sources` versucht.
+
+## Formate
+
+Was die Browser nativ abspielen (das Kit fügt dafür nichts hinzu):
+
+| Format | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP4 · H.264 + AAC | ✓ | ✓ | ✓ | ✓ |
+| MP4 · HEVC | mit Hardware-Dekodierung | Windows mit Hardware-Dekodierung | ✓ | ✓ |
+| WebM · VP9 + Opus | ✓ | ✓ | ✓ | ✓ (neuere Versionen) |
+| MP4/WebM · AV1 | ✓ | ✓ | mit Hardware-Dekodierung | mit Hardware-Dekodierung |
+| HLS (`.m3u8`) | über den Adapter des Kits; neuere Versionen auch nativ | über den Adapter des Kits | nativ | nativ |
+
+In echten Browsern geprüft (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 und MPEG-TS (über den Adapter und nativ), AES-128, Live-Playlists, Diskontinuitäten. Firefox stand in der Testumgebung nicht zur Verfügung.
+
+## HLS
+
+Eine Quelle mit `type: 'application/x-mpegURL'` (oder einer `.m3u8`-Adresse) wird über `@dskripchenko/ui/hls` abgespielt. Der Adapter ist ein separater Einstiegspunkt, der per dynamischem Import erst geladen wird, wenn eine solche Quelle auftaucht — das Haupt-Bundle wächst nicht.
+
+- Wo der Browser HLS selbst abspielt (Safari, iOS, neueres Chrome), geht die Adresse direkt an `<video>` (`preferNative: true`; `false` setzen, um immer den Adapter zu nutzen und das Qualitätsmenü zu erhalten).
+- Sonst speist der Adapter Media Source Extensions: Master- und Media-Playlists, **fMP4/CMAF**-Segmente mit `EXT-X-MAP`, **MPEG-TS**-Segmente (H.264 + AAC), die im Browser in fMP4 umgewandelt werden, Byte-Bereiche, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), Live-Playlists mit Neuladen und gleitendem Fenster, Vorauspufferung und Verdrängung, Spulen, ABR mit manueller Qualitätswahl, Wiederholungen mit Backoff.
+- Nicht unterstützt: SAMPLE-AES / DRM (Fehler `encrypted`), HEVC oder MP3 in MPEG-TS (Fehler `codec`), alternative Audiospuren (`EXT-X-MEDIA TYPE=AUDIO` mit URI) — es spielt nur der in die Variante gemuxte Ton, Low-Latency-HLS-Parts.
+
+```ts
+import { UidVideo } from '@dskripchenko/ui'
+
+// Im Template:
+// <UidVideo src="https://cdn.example/live/master.m3u8" :hls-options="{ maxBufferAhead: 20 }" />
+```
+
+| `HlsOptions` | Standard | |
+|---|---|---|
+| `preferNative` | `true` | Das eigene HLS des Browsers nutzen, falls vorhanden |
+| `startLevel` | `-1` | Startvariante; `-1` — ABR entscheidet |
+| `maxBufferAhead` | `30` | Sekunden, die vorausgepuffert werden |
+| `maxBufferBehind` | `30` | Sekunden, die hinter der Abspielposition behalten werden |
+| `retries` | `3` | Wiederholungen einer fehlgeschlagenen Anfrage (500 ms, 1 s, 2 s…) |
+| `initialBandwidth` | `1000000` | Erste Schätzung der Bandbreite, Bit/s |
+| `capToPlayerSize` | `true` | ABR wählt keine Varianten, die deutlich höher sind als der Player |
+| `transmuxer` | eingebauter MPEG-TS | Factory eines Segmentkonverters; `null` deaktiviert ihn |
+
+Der Adapter lässt sich ohne die Komponente verwenden:
+
+```ts
+import { attachHls } from '@dskripchenko/ui/hls'
+
+const session = attachHls(videoElement, url, {
+  onLevels: (levels) => console.log(levels.map((l) => l.label)),
+  onError: (e) => console.warn(e.code, e.message),
+})
+session.setLevel(1)   // -1 — zurück zur Automatik
+session.destroy()
+```
+
+Ein Konverter für einen anderen Container wird über `transmuxer` eingebunden: ein Objekt mit `canHandle(bytes)`, `push(bytes, { discontinuity })` → `{ init?, data, mimeType, tracks, startTime }` und `reset()`.
+
+## Der Controller
+
+`useMediaController(mediaRef, options)` ist der gemeinsame Kern beider Player; darauf lässt sich eine eigene Player-Oberfläche bauen.
+
+```ts
+const media = ref<HTMLVideoElement | null>(null)
+const { state, play, pause, toggle, seek, skip, setVolume, toggleMute, setRate, toggleFullscreen, togglePip, handleKey } =
+  useMediaController(media, { fullscreenTarget: rootRef, resumeKey: 'intro' })
+```
+
+`state` ist reaktiv: `playing`, `paused`, `ended`, `waiting`, `stalled`, `seeking`, `currentTime`, `duration`, `live`, `buffered`, `volume`, `muted`, `rate`, `fullscreen`, `pip`, `error`. `handleKey(event)` wendet die obigen Tastenkürzel an und gibt `true` zurück, wenn die Taste behandelt wurde.
+
+## Gestaltung
+
+Die Bedienelemente bleiben immer hell auf dunklem Hintergrund. Variablen: `--uid-video-accent` (gespielter Teil, ausgewählte Einträge), `--uid-video-radius`, `--uid-video-bg`, `--uid-video-caption-size`.
diff --git a/docs/en/audio.md b/docs/en/audio.md
new file mode 100644
index 0000000..8497594
--- /dev/null
+++ b/docs/en/audio.md
@@ -0,0 +1,74 @@
+# Audio
+
+`UidAudio` is an audio player on the native `<audio>` element: a compact row (play, scrub bar, time, volume, speed), a `mini` variant for tables and lists, a waveform computed in the browser, and a playlist. It shares the controller with [UidVideo](./video.md).
+
+```vue
+<UidAudio src="/media/episode.mp3" title="Episode 12" artist="The Podcast" waveform />
+
+<UidAudio :src="row.recording" variant="mini" />
+
+<UidAudio v-model:index="current" :tracks="playlist" waveform />
+```
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `src`, `type` | `string` | — | One track; with `type` an unplayable format is reported at once |
+| `title`, `artist` | `string` | — | Shown above the scrub bar |
+| `tracks` | `UidAudioTrack[]` | — | Playlist: `{ src, type?, title?, artist?, peaks?, duration? }` |
+| `index` (`v-model:index`) | `number` | `0` | Current playlist track |
+| `variant` | `'default' \| 'mini'` | `'default'` | `mini` — one line: play, bar, time |
+| `waveform` | `boolean` | `false` | Waveform decoded in the browser as the scrub bar |
+| `peaks` | `number[]` | — | Precomputed peaks `0..1`; draws the waveform without decoding |
+| `waveformMaxBytes` | `number` | 40 MB | Larger files are not decoded — a plain bar instead |
+| `waveformMaxDuration` | `number` | 1800 | Longer audio (seconds) is not decoded |
+| `autoAdvance` | `boolean` | `true` | Next playlist track when one ends |
+| `loop` | `boolean` | `false` | Repeat the track, or the whole playlist |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | |
+| `exclusive` | `boolean` | `true` | Starting this player pauses the other ones |
+| `resumeKey` | `string` | — | Remembers the position (per playlist track) |
+| `rates` | `number[]` | `0.5…2` | Speed menu |
+| `hotkeys` | `boolean` | `true` | Space/`K`, arrows, `J`/`L`, `M`, `0`–`9`; `Shift+N` / `Shift+P` — next / previous track |
+| `showVolume`, `showRate` | `boolean` | `true` | |
+| `showPlaylist` | `boolean` | `true` | Track list under the player |
+
+Events: `play`, `pause`, `ended`, `error`, `trackchange` (index), `update:index`. Exposed: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
+
+## Layout
+
+- **Default** — a row: play button, title and scrub bar, time, volume, speed. In a narrow container (under 480 px) the scrub bar moves to its own full-width line, the title and artist stack, the volume slider is left to the hardware buttons. From 560 px the volume slider is always visible.
+- **Mini** — `240px` wide by default (`--uid-audio-mini-width`), fits a table cell: play, bar or small waveform, time (the duration before playback, the position during it). Starting one row pauses the others.
+- **Playlist** — previous / next around the play button and a numbered list with the playing track marked. "Previous" first rewinds a track that has been playing for more than 3 seconds. The lock screen and hardware media keys work through the Media Session API.
+
+## Waveform
+
+With `waveform` the file is fetched and decoded with Web Audio (`decodeAudioData` at a low sample rate to keep memory small), and peaks are computed in chunks that yield to the browser between them (`requestIdleCallback`, otherwise `setTimeout`). Results are cached per address for the page's lifetime; files are decoded one at a time and only once the player is near the viewport, so a table of a hundred recordings stays responsive. Files over `waveformMaxBytes` or longer than `waveformMaxDuration` keep the plain bar. The audio has to be readable by `fetch` — same origin or CORS.
+
+For long recordings compute the peaks on the server and pass them in `peaks` (any length; the player resamples to its width):
+
+```ts
+import { computePeaks } from '@dskripchenko/ui'
+
+// e.g. in a worker or during upload processing
+const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
+```
+
+Helpers: `getWaveform(src, options)`, `computePeaks(channels, count)`, `resamplePeaks(peaks, n)`, `peaksToPath(peaks)`.
+
+## Formats
+
+| Format | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP3 | ✓ | ✓ | ✓ | ✓ |
+| AAC / M4A | ✓ | ✓ | ✓ | ✓ |
+| Ogg · Opus | ✓ | ✓ | ✓ (recent versions) | ✓ (recent versions) |
+| Ogg · Vorbis | ✓ | ✓ | recent versions | recent versions |
+| WAV (PCM) | ✓ | ✓ | ✓ | ✓ |
+| FLAC | ✓ | ✓ | ✓ | ✓ |
+| WebM · Opus | ✓ | ✓ | ✓ | ✓ (recent versions) |
+
+Checked in real browsers (Playwright): MP3, Ogg/Opus, WAV, FLAC and M4A play and draw the waveform in Chromium 156, Chrome 156 and WebKit 27. Prefer giving `type` for a less common format: the player reports "not supported" immediately instead of after a failed load.
+
+## Styling
+
+Variables: `--uid-audio-accent`, `--uid-audio-accent-hover`, `--uid-audio-bg`, `--uid-audio-border`, `--uid-audio-radius`, `--uid-audio-padding`, `--uid-audio-play-size`, `--uid-audio-play-color`, `--uid-audio-wave`, `--uid-audio-wave-height`, `--uid-audio-mini-width`, `--uid-audio-list-max-height`.
diff --git a/docs/en/i18n.md b/docs/en/i18n.md
index 794f46c..f23f474 100644
--- a/docs/en/i18n.md
+++ b/docs/en/i18n.md
@@ -147,7 +147,7 @@ provideLocale(computed(() => (lang.value === 'ru' ? ru : en)))
 
 All component strings (placeholders, ARIA labels, button text) are localized through the provider. Components covered:
 
-Select, Combobox, DatePicker, DateRangePicker, TimePicker, TreeSelect, NumberInput, TagsInput, FileUpload, Mention, BackTop, Tour, TreeView, Pagination, Modal, Drawer, Toast, Alert, Tag, Code, DescriptionList, ColorPicker, Cascader, Calendar, and others.
+Select, Combobox, DatePicker, DateRangePicker, TimePicker, TreeSelect, NumberInput, TagsInput, FileUpload, Mention, BackTop, Tour, TreeView, Pagination, Modal, Drawer, Toast, Alert, Tag, Code, DescriptionList, ColorPicker, Cascader, Calendar, Video, Audio, and others.
 
 ## Per-prop overrides
 
@@ -197,6 +197,7 @@ interface UidLocale {
   modal: { close: string }
   drawer: { close: string }
   toast: { close: string }
+  media?: UidMediaLocale // UidVideo, UidAudio: buttons, menus, errors
   breadcrumb?: { showHidden: string }
   pagination: {
     first: string; prev: string; next: string; last: string
diff --git a/docs/en/video.md b/docs/en/video.md
new file mode 100644
index 0000000..b048fa2
--- /dev/null
+++ b/docs/en/video.md
@@ -0,0 +1,141 @@
+# Video
+
+`UidVideo` is a video player on the native `<video>` element with the kit's own controls: scrub bar with buffered ranges, chapters and thumbnail preview, volume, speed and quality menus, subtitles, full screen and picture-in-picture. No dependencies; HLS streams are played by a separate, lazily loaded entry (`@dskripchenko/ui/hls`).
+
+```vue
+<UidVideo
+  src="/media/lesson.mp4"
+  poster="/media/lesson.jpg"
+  :tracks="[
+    { src: '/media/lesson.en.vtt', srclang: 'en', label: 'English', default: true },
+    { src: '/media/lesson.chapters.vtt', kind: 'chapters' },
+  ]"
+  thumbnails="/media/lesson.thumbs.vtt"
+  resume-key="lesson-42"
+/>
+```
+
+| Prop | Type | Default | |
+|---|---|---|---|
+| `src` | `string` | — | One source |
+| `sources` | `UidMediaSource[]` | — | `{ src, type?, label? }` in order of preference; the browser gets the first one it can play. Two or more with `label` form the quality menu |
+| `poster` | `string` | — | Image before playback |
+| `tracks` | `UidMediaTrack[]` | `[]` | WebVTT: `{ src, kind?: 'subtitles' \| 'captions' \| 'chapters', srclang?, label?, default? }` |
+| `thumbnails` | `string` | — | WebVTT whose cues point to sprite tiles: `sprite.jpg#xywh=0,0,160,90` |
+| `autoplay` | `boolean` | `false` | Starts muted as soon as possible (browsers block unmuted autoplay) |
+| `muted`, `loop` | `boolean` | `false` | |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `controls` | `boolean` | `true` | `false` — a bare element with the browser's controls |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | Needed for subtitles and thumbnails from another origin |
+| `exclusive` | `boolean` | `true` | Starting this player pauses the other exclusive players on the page |
+| `resumeKey` | `string` | — | Remembers the position in `localStorage` and resumes from it |
+| `rates` | `number[]` | `0.5…2` | Speed menu |
+| `hotkeys` | `boolean` | `true` | Keyboard shortcuts while the player has focus |
+| `aspectRatio` | `string` | `'16 / 9'` | Box ratio before the video size is known |
+| `title` | `string` | — | Accessible name of the player |
+| `autoHide` | `number` | `2500` | Milliseconds without activity before the controls hide while playing |
+| `hlsOptions` | `HlsOptions` | — | Passed to the HLS adapter (see below) |
+| `hlsLoader` | `() => Promise<module>` | dynamic import | Where the HLS adapter comes from |
+
+Events: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (label). The component exposes `play()`, `pause()`, `toggle()`, `seek(seconds)`, the reactive `state` and the `media` element.
+
+## Controls
+
+- **Scrub bar** — played part in the accent colour, buffered ranges, gaps between chapters; hovering shows the time, the chapter title and the thumbnail. Dragging seeks live. As a `slider` it takes arrows (±5 s), Page Up/Down (±10 %), Home/End.
+- **Volume** — the button mutes, the slider unfolds on hover or focus (on touch screens the hardware buttons do the job).
+- **Settings** — speed and, when there are several, quality (`Auto` follows the bandwidth for HLS). The menus live inside the player, so they work in full screen; in a small player they become a sheet over the video.
+- **Subtitles** — the kit draws the cues itself (position above the controls, readable on any video); iOS native full screen shows them through the system player.
+- **Full screen** — the whole player; on iPhone, where only the `<video>` itself can go full screen, the native player opens.
+- **Picture-in-picture** — standard API or Safari's presentation mode.
+- **Live** streams show a `Live` badge instead of the time; it turns red at the live edge, a click jumps there.
+
+On touch screens a tap shows or hides the controls, a double tap on the left or right third seeks ∓10 s, the centre button plays and pauses. On desktop a click on the video plays/pauses and a double click toggles full screen. Controls hide after `autoHide` while playing and stay while a menu is open, the bar is being dragged or focus is inside it.
+
+## Keyboard
+
+| Key | Action |
+|---|---|
+| Space, `K` | Play / pause |
+| ← / → | −5 s / +5 s |
+| `J` / `L` | −10 s / +10 s |
+| ↑ / ↓ | Volume ±10 % |
+| `M` | Mute |
+| `F` | Full screen |
+| `C` | Subtitles on / off |
+| `0`–`9` | Jump to 0–90 % |
+| Home / End | Start / end |
+
+## Errors
+
+Errors are shown inside the player with a "Try again" button and come with a kind: `aborted`, `network`, `decode`, `unsupported`, `mse`, `manifest`, `encrypted`, `codec`, `unknown`. Texts come from the locale bag `media.errors` (see [i18n](./i18n.md)). A 404 is reported as `network`, not as "unsupported format" as browsers do. When a source cannot be played, the next one from `sources` is tried.
+
+## Formats
+
+What the browsers play natively (the kit adds nothing for these):
+
+| Format | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP4 · H.264 + AAC | ✓ | ✓ | ✓ | ✓ |
+| MP4 · HEVC | with hardware decoding | Windows with hardware decoding | ✓ | ✓ |
+| WebM · VP9 + Opus | ✓ | ✓ | ✓ | ✓ (recent versions) |
+| MP4/WebM · AV1 | ✓ | ✓ | with hardware decoding | with hardware decoding |
+| HLS (`.m3u8`) | through the kit's adapter; recent versions also natively | through the kit's adapter | natively | natively |
+
+Checked in real browsers (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 and MPEG-TS (through the adapter and natively), AES-128, live playlists, discontinuities. Firefox was not available in the test environment.
+
+## HLS
+
+A source with `type: 'application/x-mpegURL'` (or a `.m3u8` address) is played through `@dskripchenko/ui/hls`. The adapter is a separate entry loaded with a dynamic import only when such a source appears — the main bundle does not grow.
+
+- Where the browser plays HLS itself (Safari, iOS, recent Chrome) the address goes straight to `<video>` (`preferNative: true`; set `false` to always use the adapter and get the quality menu).
+- Otherwise the adapter feeds Media Source Extensions: master and media playlists, **fMP4/CMAF** segments with `EXT-X-MAP`, **MPEG-TS** segments (H.264 + AAC) converted to fMP4 in the browser, byte ranges, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), live playlists with reloads and a sliding window, buffer-ahead and eviction, seeking, ABR with manual quality selection, retries with backoff.
+- Not supported: SAMPLE-AES / DRM (`encrypted` error), HEVC or MP3 inside MPEG-TS (`codec` error), alternative audio renditions (`EXT-X-MEDIA TYPE=AUDIO` with a URI) — only the audio muxed into the variant plays, low-latency HLS parts.
+
+```ts
+import { UidVideo } from '@dskripchenko/ui'
+
+// In a template:
+// <UidVideo src="https://cdn.example/live/master.m3u8" :hls-options="{ maxBufferAhead: 20 }" />
+```
+
+| `HlsOptions` | Default | |
+|---|---|---|
+| `preferNative` | `true` | Use the browser's own HLS when present |
+| `startLevel` | `-1` | Starting variant; `-1` — ABR decides |
+| `maxBufferAhead` | `30` | Seconds to buffer ahead |
+| `maxBufferBehind` | `30` | Seconds kept behind the playhead |
+| `retries` | `3` | Repeats of a failed request (500 ms, 1 s, 2 s…) |
+| `initialBandwidth` | `1000000` | First bandwidth estimate, bit/s |
+| `capToPlayerSize` | `true` | ABR does not pick variants much taller than the player |
+| `transmuxer` | built-in MPEG-TS | Factory of a segment converter; `null` disables it |
+
+The adapter can be used without the component:
+
+```ts
+import { attachHls } from '@dskripchenko/ui/hls'
+
+const session = attachHls(videoElement, url, {
+  onLevels: (levels) => console.log(levels.map((l) => l.label)),
+  onError: (e) => console.warn(e.code, e.message),
+})
+session.setLevel(1)   // -1 — back to automatic
+session.destroy()
+```
+
+A converter for another container plugs in through `transmuxer`: an object with `canHandle(bytes)`, `push(bytes, { discontinuity })` → `{ init?, data, mimeType, tracks, startTime }` and `reset()`.
+
+## The controller
+
+`useMediaController(mediaRef, options)` is the core both players share; build your own player UI on it.
+
+```ts
+const media = ref<HTMLVideoElement | null>(null)
+const { state, play, pause, toggle, seek, skip, setVolume, toggleMute, setRate, toggleFullscreen, togglePip, handleKey } =
+  useMediaController(media, { fullscreenTarget: rootRef, resumeKey: 'intro' })
+```
+
+`state` is reactive: `playing`, `paused`, `ended`, `waiting`, `stalled`, `seeking`, `currentTime`, `duration`, `live`, `buffered`, `volume`, `muted`, `rate`, `fullscreen`, `pip`, `error`. `handleKey(event)` applies the shortcuts above and returns `true` when the key was handled.
+
+## Styling
+
+The controls always stay light on a dark scrim. Variables: `--uid-video-accent` (played part, checked items), `--uid-video-radius`, `--uid-video-bg`, `--uid-video-caption-size`.
diff --git a/docs/ru/README.md b/docs/ru/README.md
index 2fb954a..d2fe7e3 100644
--- a/docs/ru/README.md
+++ b/docs/ru/README.md
@@ -23,6 +23,7 @@
 - **i18n** — встроенные `ru` + `en` локали, `UidLocaleProvider` для частичных переопределений и кастомных локалей
 - **~1500 иконок** — `lucide-vue-next` под капотом + sub-export `@dskripchenko/ui/icons`
 - **Zero runtime chart deps** — встроенные SVG-примитивы (Sparkline, ProgressRing, Gauge, Heatmap)
+- **Медиаплееры без зависимостей** — видео и аудио на родных элементах, волна в браузере, HLS (fMP4 и MPEG-TS) в лениво загружаемом entry
 
 ## Установка
 
@@ -83,20 +84,22 @@ import { Check } from '@dskripchenko/ui/icons'
 
 **Графики:** Sparkline, ProgressRing, Gauge, Heatmap
 
+**Медиа:** Video, Audio (волна, mini, плейлист), HLS-адаптер (`@dskripchenko/ui/hls`)
+
 **Wizards:** Stepper, Wizard, WizardStep
 
 **Patterns:** Header, Footer, Sidebar, PageHeader, EmptyState, ErrorState, Result
 
 **Layouts:** SimpleLayout, SidebarLayout, AuthLayout, WizardLayout
 
-**Composables:** useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
+**Composables:** useMediaController, useTheme, useLocale, useField, useToast, useWizard, useSidebar, useCommandPalette, useFocusTrap, useScrollLock, usePopover
 
 ## Документация
 
 Пользовательская документация переведена на 4 языка — выбери свой:
 
 - 🇬🇧 **English** (default): [docs/en/](../../docs/en/)
-- 🇷🇺 **Русский**: [getting-started](../../docs/ru/getting-started.md), [тема](../../docs/ru/theming.md), [токены](../../docs/ru/tokens.md), [иконки](../../docs/ru/icons.md), [патерны](../../docs/ru/patterns.md), [валидация](../../docs/ru/validation.md), [графики](../../docs/ru/charts.md), [markdown](../../docs/ru/markdown.md), [i18n](../../docs/ru/i18n.md)
+- 🇷🇺 **Русский**: [getting-started](../../docs/ru/getting-started.md), [тема](../../docs/ru/theming.md), [токены](../../docs/ru/tokens.md), [иконки](../../docs/ru/icons.md), [патерны](../../docs/ru/patterns.md), [валидация](../../docs/ru/validation.md), [графики](../../docs/ru/charts.md), [markdown](../../docs/ru/markdown.md), [видео](../../docs/ru/video.md), [аудио](../../docs/ru/audio.md), [i18n](../../docs/ru/i18n.md)
 - 🇩🇪 **Deutsch**: [docs/de/](../../docs/de/)
 - 🇨🇳 **中文**: [docs/zh/](../../docs/zh/)
 
diff --git a/docs/ru/audio.md b/docs/ru/audio.md
new file mode 100644
index 0000000..e9d8b61
--- /dev/null
+++ b/docs/ru/audio.md
@@ -0,0 +1,74 @@
+# Аудио
+
+`UidAudio` — аудиоплеер на нативном элементе `<audio>`: компактная строка (воспроизведение, полоса перемотки, время, громкость, скорость), вариант `mini` для таблиц и списков, волновая форма, вычисляемая в браузере, и плейлист. Контроллер у него общий с [UidVideo](./video.md).
+
+```vue
+<UidAudio src="/media/episode.mp3" title="Episode 12" artist="The Podcast" waveform />
+
+<UidAudio :src="row.recording" variant="mini" />
+
+<UidAudio v-model:index="current" :tracks="playlist" waveform />
+```
+
+| Prop | Тип | По умолчанию | |
+|---|---|---|---|
+| `src`, `type` | `string` | — | Один трек; с `type` неподдерживаемый формат сообщается сразу |
+| `title`, `artist` | `string` | — | Показываются над полосой перемотки |
+| `tracks` | `UidAudioTrack[]` | — | Плейлист: `{ src, type?, title?, artist?, peaks?, duration? }` |
+| `index` (`v-model:index`) | `number` | `0` | Текущий трек плейлиста |
+| `variant` | `'default' \| 'mini'` | `'default'` | `mini` — одна строка: воспроизведение, полоса, время |
+| `waveform` | `boolean` | `false` | Волновая форма, декодированная в браузере, в роли полосы перемотки |
+| `peaks` | `number[]` | — | Заранее вычисленные пики `0..1`; волна рисуется без декодирования |
+| `waveformMaxBytes` | `number` | 40 МБ | Файлы больше не декодируются — вместо волны обычная полоса |
+| `waveformMaxDuration` | `number` | 1800 | Более длинное аудио (в секундах) не декодируется |
+| `autoAdvance` | `boolean` | `true` | Следующий трек плейлиста по окончании текущего |
+| `loop` | `boolean` | `false` | Повтор трека или всего плейлиста |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | |
+| `exclusive` | `boolean` | `true` | Запуск этого плеера ставит на паузу остальные |
+| `resumeKey` | `string` | — | Запоминает позицию (для каждого трека плейлиста) |
+| `rates` | `number[]` | `0.5…2` | Меню скорости |
+| `hotkeys` | `boolean` | `true` | Пробел/`K`, стрелки, `J`/`L`, `M`, `0`–`9`; `Shift+N` / `Shift+P` — следующий / предыдущий трек |
+| `showVolume`, `showRate` | `boolean` | `true` | |
+| `showPlaylist` | `boolean` | `true` | Список треков под плеером |
+
+События: `play`, `pause`, `ended`, `error`, `trackchange` (индекс), `update:index`. Наружу отдаются: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
+
+## Раскладка
+
+- **Обычный** — строка: кнопка воспроизведения, название и полоса перемотки, время, громкость, скорость. В узком контейнере (меньше 480 px) полоса перемотки переносится на отдельную строку во всю ширину, название и исполнитель встают друг под другом, ползунок громкости уступает место аппаратным кнопкам. Начиная с 560 px ползунок громкости виден всегда.
+- **Mini** — по умолчанию шириной `240px` (`--uid-audio-mini-width`), помещается в ячейку таблицы: воспроизведение, полоса или маленькая волна, время (до воспроизведения — длительность, во время — позиция). Запуск одной строки ставит на паузу остальные.
+- **Плейлист** — «предыдущий» / «следующий» по бокам от кнопки воспроизведения и нумерованный список с отмеченным играющим треком. «Предыдущий» сначала перематывает в начало трек, который играет дольше 3 секунд. Экран блокировки и аппаратные медиаклавиши работают через Media Session API.
+
+## Волновая форма
+
+С `waveform` файл загружается и декодируется через Web Audio (`decodeAudioData` с низкой частотой дискретизации, чтобы экономить память), а пики считаются порциями, между которыми управление отдаётся браузеру (`requestIdleCallback`, иначе `setTimeout`). Результаты кешируются по адресу на время жизни страницы; файлы декодируются по одному и только когда плеер близко к видимой области, так что таблица из сотни записей остаётся отзывчивой. Файлы больше `waveformMaxBytes` или длиннее `waveformMaxDuration` остаются с обычной полосой. Аудио должно быть доступно для `fetch` — тот же источник или CORS.
+
+Для длинных записей считайте пики на сервере и передавайте их в `peaks` (любой длины; плеер пересэмплирует их под свою ширину):
+
+```ts
+import { computePeaks } from '@dskripchenko/ui'
+
+// например, в воркере или при обработке загрузки
+const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
+```
+
+Хелперы: `getWaveform(src, options)`, `computePeaks(channels, count)`, `resamplePeaks(peaks, n)`, `peaksToPath(peaks)`.
+
+## Форматы
+
+| Формат | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP3 | ✓ | ✓ | ✓ | ✓ |
+| AAC / M4A | ✓ | ✓ | ✓ | ✓ |
+| Ogg · Opus | ✓ | ✓ | ✓ (свежие версии) | ✓ (свежие версии) |
+| Ogg · Vorbis | ✓ | ✓ | свежие версии | свежие версии |
+| WAV (PCM) | ✓ | ✓ | ✓ | ✓ |
+| FLAC | ✓ | ✓ | ✓ | ✓ |
+| WebM · Opus | ✓ | ✓ | ✓ | ✓ (свежие версии) |
+
+Проверено в реальных браузерах (Playwright): MP3, Ogg/Opus, WAV, FLAC и M4A воспроизводятся и рисуют волну в Chromium 156, Chrome 156 и WebKit 27. Для менее распространённого формата лучше указывать `type`: плеер сообщит «не поддерживается» сразу, а не после неудачной загрузки.
+
+## Оформление
+
+Переменные: `--uid-audio-accent`, `--uid-audio-accent-hover`, `--uid-audio-bg`, `--uid-audio-border`, `--uid-audio-radius`, `--uid-audio-padding`, `--uid-audio-play-size`, `--uid-audio-play-color`, `--uid-audio-wave`, `--uid-audio-wave-height`, `--uid-audio-mini-width`, `--uid-audio-list-max-height`.
diff --git a/docs/ru/i18n.md b/docs/ru/i18n.md
index f6bbb09..7ad8efa 100644
--- a/docs/ru/i18n.md
+++ b/docs/ru/i18n.md
@@ -147,7 +147,7 @@ provideLocale(computed(() => (lang.value === 'ru' ? ru : en)))
 
 Через провайдер локализованы все строки компонентов — плейсхолдеры, ARIA-подписи, тексты кнопок. Покрытые компоненты:
 
-Select, Combobox, DatePicker, DateRangePicker, TimePicker, TreeSelect, NumberInput, TagsInput, FileUpload, Mention, BackTop, Tour, TreeView, Pagination, Modal, Drawer, Toast, Alert, Tag, Code, DescriptionList, ColorPicker, Cascader, Calendar и другие.
+Select, Combobox, DatePicker, DateRangePicker, TimePicker, TreeSelect, NumberInput, TagsInput, FileUpload, Mention, BackTop, Tour, TreeView, Pagination, Modal, Drawer, Toast, Alert, Tag, Code, DescriptionList, ColorPicker, Cascader, Calendar, Video, Audio и другие.
 
 ## Переопределение через пропсы
 
@@ -197,6 +197,7 @@ interface UidLocale {
   modal: { close: string }
   drawer: { close: string }
   toast: { close: string }
+  media?: UidMediaLocale // UidVideo, UidAudio: buttons, menus, errors
   breadcrumb?: { showHidden: string }
   pagination: {
     first: string; prev: string; next: string; last: string
diff --git a/docs/ru/video.md b/docs/ru/video.md
new file mode 100644
index 0000000..4989c92
--- /dev/null
+++ b/docs/ru/video.md
@@ -0,0 +1,141 @@
+# Видео
+
+`UidVideo` — видеоплеер на нативном элементе `<video>` с собственными элементами управления кита: полоса перемотки с буферизованными участками, главами и превью кадров, громкость, меню скорости и качества, субтитры, полноэкранный режим и «картинка в картинке». Без зависимостей; HLS-потоки воспроизводит отдельная лениво загружаемая точка входа (`@dskripchenko/ui/hls`).
+
+```vue
+<UidVideo
+  src="/media/lesson.mp4"
+  poster="/media/lesson.jpg"
+  :tracks="[
+    { src: '/media/lesson.en.vtt', srclang: 'en', label: 'English', default: true },
+    { src: '/media/lesson.chapters.vtt', kind: 'chapters' },
+  ]"
+  thumbnails="/media/lesson.thumbs.vtt"
+  resume-key="lesson-42"
+/>
+```
+
+| Prop | Тип | По умолчанию | |
+|---|---|---|---|
+| `src` | `string` | — | Один источник |
+| `sources` | `UidMediaSource[]` | — | `{ src, type?, label? }` в порядке предпочтения; браузер берёт первый, который умеет воспроизвести. Два и больше с `label` образуют меню качества |
+| `poster` | `string` | — | Картинка до начала воспроизведения |
+| `tracks` | `UidMediaTrack[]` | `[]` | WebVTT: `{ src, kind?: 'subtitles' \| 'captions' \| 'chapters', srclang?, label?, default? }` |
+| `thumbnails` | `string` | — | WebVTT, реплики которого указывают на тайлы спрайта: `sprite.jpg#xywh=0,0,160,90` |
+| `autoplay` | `boolean` | `false` | Запускается без звука как можно раньше (браузеры блокируют автовоспроизведение со звуком) |
+| `muted`, `loop` | `boolean` | `false` | |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `controls` | `boolean` | `true` | `false` — голый элемент с элементами управления браузера |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | Нужен для субтитров и превью с другого источника |
+| `exclusive` | `boolean` | `true` | Запуск этого плеера ставит на паузу остальные эксклюзивные плееры на странице |
+| `resumeKey` | `string` | — | Запоминает позицию в `localStorage` и продолжает с неё |
+| `rates` | `number[]` | `0.5…2` | Меню скорости |
+| `hotkeys` | `boolean` | `true` | Горячие клавиши, пока плеер в фокусе |
+| `aspectRatio` | `string` | `'16 / 9'` | Пропорции блока, пока размер видео неизвестен |
+| `title` | `string` | — | Доступное имя плеера |
+| `autoHide` | `number` | `2500` | Миллисекунды без активности, после которых элементы управления скрываются во время воспроизведения |
+| `hlsOptions` | `HlsOptions` | — | Передаются HLS-адаптеру (см. ниже) |
+| `hlsLoader` | `() => Promise<module>` | динамический импорт | Откуда берётся HLS-адаптер |
+
+События: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (метка). Компонент отдаёт наружу `play()`, `pause()`, `toggle()`, `seek(seconds)`, реактивный `state` и элемент `media`.
+
+## Элементы управления
+
+- **Полоса перемотки** — просмотренная часть акцентным цветом, буферизованные участки, промежутки между главами; при наведении показываются время, название главы и превью кадра. Перетаскивание перематывает сразу. Как `slider` она понимает стрелки (±5 с), Page Up/Down (±10 %), Home/End.
+- **Громкость** — кнопка выключает звук, ползунок раскрывается при наведении или фокусе (на сенсорных экранах это делают аппаратные кнопки).
+- **Настройки** — скорость и, если вариантов несколько, качество (`Авто` для HLS подстраивается под пропускную способность). Меню живут внутри плеера, поэтому работают в полноэкранном режиме; в маленьком плеере они становятся шторкой поверх видео.
+- **Субтитры** — кит рисует реплики сам (над элементами управления, читаемо на любом видео); в нативном полноэкранном режиме iOS их показывает системный плеер.
+- **Полный экран** — на весь экран разворачивается весь плеер; на iPhone, где в полноэкранный режим может перейти только сам `<video>`, открывается нативный плеер.
+- **Картинка в картинке** — стандартный API или режим презентации Safari.
+- **Прямые трансляции** показывают вместо времени метку «Эфир»; на живом крае она становится красной, клик переносит туда.
+
+На сенсорных экранах касание показывает или скрывает элементы управления, двойное касание по левой или правой трети перематывает на ∓10 с, центральная кнопка запускает и ставит на паузу. На десктопе клик по видео запускает/ставит на паузу, двойной клик переключает полноэкранный режим. Во время воспроизведения элементы управления скрываются через `autoHide` и остаются, пока открыто меню, перетаскивается полоса или фокус внутри них.
+
+## Клавиатура
+
+| Клавиша | Действие |
+|---|---|
+| Пробел, `K` | Воспроизведение / пауза |
+| ← / → | −5 с / +5 с |
+| `J` / `L` | −10 с / +10 с |
+| ↑ / ↓ | Громкость ±10 % |
+| `M` | Выключить звук |
+| `F` | Полный экран |
+| `C` | Субтитры вкл. / выкл. |
+| `0`–`9` | Переход на 0–90 % |
+| Home / End | Начало / конец |
+
+## Ошибки
+
+Ошибки показываются внутри плеера с кнопкой «Повторить» и имеют вид: `aborted`, `network`, `decode`, `unsupported`, `mse`, `manifest`, `encrypted`, `codec`, `unknown`. Тексты берутся из локали `media.errors` (см. [i18n](./i18n.md)). 404 сообщается как `network`, а не как «неподдерживаемый формат», как это делают браузеры. Если источник не воспроизводится, пробуется следующий из `sources`.
+
+## Форматы
+
+Что браузеры воспроизводят нативно (кит для этого ничего не добавляет):
+
+| Формат | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP4 · H.264 + AAC | ✓ | ✓ | ✓ | ✓ |
+| MP4 · HEVC | с аппаратным декодированием | Windows с аппаратным декодированием | ✓ | ✓ |
+| WebM · VP9 + Opus | ✓ | ✓ | ✓ | ✓ (свежие версии) |
+| MP4/WebM · AV1 | ✓ | ✓ | с аппаратным декодированием | с аппаратным декодированием |
+| HLS (`.m3u8`) | через адаптер кита; свежие версии и нативно | через адаптер кита | нативно | нативно |
+
+Проверено в реальных браузерах (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 и MPEG-TS (через адаптер и нативно), AES-128, живые плейлисты, разрывы. Firefox в тестовом окружении был недоступен.
+
+## HLS
+
+Источник с `type: 'application/x-mpegURL'` (или адресом `.m3u8`) воспроизводится через `@dskripchenko/ui/hls`. Адаптер — отдельная точка входа, которая загружается динамическим импортом только при появлении такого источника, — основной бандл не растёт.
+
+- Там, где браузер воспроизводит HLS сам (Safari, iOS, свежий Chrome), адрес отдаётся прямо в `<video>` (`preferNative: true`; `false` — всегда использовать адаптер и получить меню качества).
+- Иначе адаптер кормит Media Source Extensions: master- и media-плейлисты, сегменты **fMP4/CMAF** с `EXT-X-MAP`, сегменты **MPEG-TS** (H.264 + AAC), которые преобразуются в fMP4 в браузере, диапазоны байтов, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), живые плейлисты с перезагрузкой и скользящим окном, буферизация вперёд и вытеснение, перемотка, ABR с ручным выбором качества, повторы с нарастающей задержкой.
+- Не поддерживаются: SAMPLE-AES / DRM (ошибка `encrypted`), HEVC или MP3 внутри MPEG-TS (ошибка `codec`), альтернативные звуковые дорожки (`EXT-X-MEDIA TYPE=AUDIO` с URI) — играет только звук, смикшированный в вариант, части low-latency HLS.
+
+```ts
+import { UidVideo } from '@dskripchenko/ui'
+
+// В шаблоне:
+// <UidVideo src="https://cdn.example/live/master.m3u8" :hls-options="{ maxBufferAhead: 20 }" />
+```
+
+| `HlsOptions` | По умолчанию | |
+|---|---|---|
+| `preferNative` | `true` | Использовать встроенный HLS браузера, если он есть |
+| `startLevel` | `-1` | Начальный вариант; `-1` — решает ABR |
+| `maxBufferAhead` | `30` | Сколько секунд буферизовать вперёд |
+| `maxBufferBehind` | `30` | Сколько секунд хранить позади позиции воспроизведения |
+| `retries` | `3` | Повторы неудачного запроса (500 мс, 1 с, 2 с…) |
+| `initialBandwidth` | `1000000` | Первая оценка пропускной способности, бит/с |
+| `capToPlayerSize` | `true` | ABR не выбирает варианты намного выше плеера |
+| `transmuxer` | встроенный MPEG-TS | Фабрика преобразователя сегментов; `null` отключает его |
+
+Адаптер можно использовать без компонента:
+
+```ts
+import { attachHls } from '@dskripchenko/ui/hls'
+
+const session = attachHls(videoElement, url, {
+  onLevels: (levels) => console.log(levels.map((l) => l.label)),
+  onError: (e) => console.warn(e.code, e.message),
+})
+session.setLevel(1)   // -1 — обратно в автоматический режим
+session.destroy()
+```
+
+Преобразователь для другого контейнера подключается через `transmuxer`: объект с `canHandle(bytes)`, `push(bytes, { discontinuity })` → `{ init?, data, mimeType, tracks, startTime }` и `reset()`.
+
+## Контроллер
+
+`useMediaController(mediaRef, options)` — общее ядро обоих плееров; на нём можно собрать собственный интерфейс плеера.
+
+```ts
+const media = ref<HTMLVideoElement | null>(null)
+const { state, play, pause, toggle, seek, skip, setVolume, toggleMute, setRate, toggleFullscreen, togglePip, handleKey } =
+  useMediaController(media, { fullscreenTarget: rootRef, resumeKey: 'intro' })
+```
+
+`state` реактивен: `playing`, `paused`, `ended`, `waiting`, `stalled`, `seeking`, `currentTime`, `duration`, `live`, `buffered`, `volume`, `muted`, `rate`, `fullscreen`, `pip`, `error`. `handleKey(event)` применяет горячие клавиши выше и возвращает `true`, если клавиша обработана.
+
+## Оформление
+
+Элементы управления всегда светлые на тёмной подложке. Переменные: `--uid-video-accent` (просмотренная часть, отмеченные пункты), `--uid-video-radius`, `--uid-video-bg`, `--uid-video-caption-size`.
diff --git a/docs/zh/README.md b/docs/zh/README.md
index df30d08..fa04ece 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -23,6 +23,7 @@
 - **i18n** — 内置 `ru` + `en` locale，`UidLocaleProvider` 支持部分覆盖与自定义 locale
 - **~1500 图标** — 底层使用 `lucide-vue-next` + 子导出 `@dskripchenko/ui/icons`
 - **零图表运行时依赖** — 内置 SVG 原语(Sparkline、ProgressRing、Gauge、Heatmap)
+- **无依赖的媒体播放器** — 基于原生元素的视频与音频、浏览器内生成波形、按需加载的 HLS 入口（fMP4 与 MPEG-TS）
 
 ## 安装
 
@@ -85,13 +86,15 @@ import { Check } from '@dskripchenko/ui/icons'
 
 **图表：** Sparkline、ProgressRing、Gauge、Heatmap
 
+**媒体：** Video、Audio（波形、mini、播放列表）、HLS 适配器（`@dskripchenko/ui/hls`）
+
 **Wizards：** Stepper、Wizard、WizardStep
 
 **Patterns：** Header、Footer、Sidebar、PageHeader、EmptyState、ErrorState、Result
 
 **Layouts：** SimpleLayout、SidebarLayout、AuthLayout、WizardLayout
 
-**Composables：** useTheme、useLocale、useField、useToast、useWizard、useSidebar、useCommandPalette、useFocusTrap、useScrollLock、usePopover
+**Composables：** useMediaController、useTheme、useLocale、useField、useToast、useWizard、useSidebar、useCommandPalette、useFocusTrap、useScrollLock、usePopover
 
 ## 文档
 
@@ -100,7 +103,7 @@ import { Check } from '@dskripchenko/ui/icons'
 - 🇬🇧 **English**(default)：[docs/en/](../../docs/en/)
 - 🇷🇺 **Русский**：[docs/ru/](../../docs/ru/)
 - 🇩🇪 **Deutsch**：[docs/de/](../../docs/de/)
-- 🇨🇳 **中文**：[快速开始](../../docs/zh/getting-started.md)、[主题](../../docs/zh/theming.md)、[Tokens](../../docs/zh/tokens.md)、[图标](../../docs/zh/icons.md)、[Patterns](../../docs/zh/patterns.md)、[表单校验](../../docs/zh/validation.md)、[图表](../../docs/zh/charts.md)、[Markdown](../../docs/zh/markdown.md)、[i18n](../../docs/zh/i18n.md)
+- 🇨🇳 **中文**：[快速开始](../../docs/zh/getting-started.md)、[主题](../../docs/zh/theming.md)、[Tokens](../../docs/zh/tokens.md)、[图标](../../docs/zh/icons.md)、[Patterns](../../docs/zh/patterns.md)、[表单校验](../../docs/zh/validation.md)、[图表](../../docs/zh/charts.md)、[Markdown](../../docs/zh/markdown.md)、[视频](../../docs/zh/video.md)、[音频](../../docs/zh/audio.md)、[i18n](../../docs/zh/i18n.md)
 
 贡献者文档(仅英文)：[Architecture](../internal/architecture.md)、[Component guidelines](../internal/component-guidelines.md)、[Contributing](../../.github/CONTRIBUTING.md)、[Roadmap](../internal/roadmap.md)。
 
diff --git a/docs/zh/audio.md b/docs/zh/audio.md
new file mode 100644
index 0000000..4da0170
--- /dev/null
+++ b/docs/zh/audio.md
@@ -0,0 +1,74 @@
+# 音频
+
+`UidAudio` 是基于原生 `<audio>` 元素的音频播放器：紧凑的一行（播放、进度条、时间、音量、速度），用于表格和列表的 `mini` 变体，在浏览器中计算的波形，以及播放列表。它与 [UidVideo](./video.md) 共用控制器。
+
+```vue
+<UidAudio src="/media/episode.mp3" title="Episode 12" artist="The Podcast" waveform />
+
+<UidAudio :src="row.recording" variant="mini" />
+
+<UidAudio v-model:index="current" :tracks="playlist" waveform />
+```
+
+| Prop | 类型 | 默认值 | |
+|---|---|---|---|
+| `src`, `type` | `string` | — | 单个曲目；指定 `type` 时，无法播放的格式会立即报告 |
+| `title`, `artist` | `string` | — | 显示在进度条上方 |
+| `tracks` | `UidAudioTrack[]` | — | 播放列表：`{ src, type?, title?, artist?, peaks?, duration? }` |
+| `index` (`v-model:index`) | `number` | `0` | 当前播放列表曲目 |
+| `variant` | `'default' \| 'mini'` | `'default'` | `mini` —— 一行：播放、进度条、时间 |
+| `waveform` | `boolean` | `false` | 以浏览器中解码的波形作为进度条 |
+| `peaks` | `number[]` | — | 预先计算的峰值 `0..1`；无需解码即可绘制波形 |
+| `waveformMaxBytes` | `number` | 40 MB | 更大的文件不解码 —— 改用普通进度条 |
+| `waveformMaxDuration` | `number` | 1800 | 更长的音频（秒）不解码 |
+| `autoAdvance` | `boolean` | `true` | 曲目结束时播放列表中的下一首 |
+| `loop` | `boolean` | `false` | 循环当前曲目或整个播放列表 |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | |
+| `exclusive` | `boolean` | `true` | 启动此播放器会暂停其他播放器 |
+| `resumeKey` | `string` | — | 记住播放位置（按播放列表曲目分别记录） |
+| `rates` | `number[]` | `0.5…2` | 速度菜单 |
+| `hotkeys` | `boolean` | `true` | 空格/`K`、方向键、`J`/`L`、`M`、`0`–`9`；`Shift+N` / `Shift+P` —— 下一首 / 上一首 |
+| `showVolume`, `showRate` | `boolean` | `true` | |
+| `showPlaylist` | `boolean` | `true` | 播放器下方的曲目列表 |
+
+事件：`play`、`pause`、`ended`、`error`、`trackchange`（索引）、`update:index`。对外暴露：`play()`、`pause()`、`toggle()`、`seek()`、`next()`、`prev()`、`state`、`media`。
+
+## 布局
+
+- **默认** —— 一行：播放按钮、标题和进度条、时间、音量、速度。在窄容器中（小于 480 px），进度条移到单独的整行，标题和艺术家上下排列，音量滑块交由硬件按键处理。从 560 px 起音量滑块始终可见。
+- **Mini** —— 默认宽 `240px`（`--uid-audio-mini-width`），可放入表格单元格：播放、进度条或小波形、时间（播放前为时长，播放中为当前位置）。启动某一行会暂停其他行。
+- **播放列表** —— 播放按钮两侧为上一首 / 下一首，并有一个标出当前播放曲目的编号列表。若曲目已播放超过 3 秒，"上一首"会先将其倒回开头。锁屏和硬件媒体键通过 Media Session API 工作。
+
+## 波形
+
+启用 `waveform` 时，文件会被获取并通过 Web Audio 解码（`decodeAudioData` 使用较低采样率以节省内存），峰值分块计算，块与块之间让出给浏览器（`requestIdleCallback`，否则 `setTimeout`）。结果按地址在页面生命周期内缓存；文件逐个解码，且仅在播放器接近视口时进行，因此包含上百条录音的表格也能保持流畅。超过 `waveformMaxBytes` 或长于 `waveformMaxDuration` 的文件保留普通进度条。音频必须能被 `fetch` 读取 —— 同源或 CORS。
+
+对于较长的录音，请在服务器上计算峰值并通过 `peaks` 传入（长度任意；播放器会按自身宽度重新采样）：
+
+```ts
+import { computePeaks } from '@dskripchenko/ui'
+
+// 例如在 worker 中或处理上传时
+const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
+```
+
+辅助函数：`getWaveform(src, options)`、`computePeaks(channels, count)`、`resamplePeaks(peaks, n)`、`peaksToPath(peaks)`。
+
+## 格式
+
+| 格式 | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP3 | ✓ | ✓ | ✓ | ✓ |
+| AAC / M4A | ✓ | ✓ | ✓ | ✓ |
+| Ogg · Opus | ✓ | ✓ | ✓（较新版本） | ✓（较新版本） |
+| Ogg · Vorbis | ✓ | ✓ | 较新版本 | 较新版本 |
+| WAV (PCM) | ✓ | ✓ | ✓ | ✓ |
+| FLAC | ✓ | ✓ | ✓ | ✓ |
+| WebM · Opus | ✓ | ✓ | ✓ | ✓（较新版本） |
+
+已在真实浏览器中验证（Playwright）：MP3、Ogg/Opus、WAV、FLAC 和 M4A 在 Chromium 156、Chrome 156 和 WebKit 27 中均可播放并绘制波形。对于不太常见的格式，最好指定 `type`：播放器会立即报告"不支持"，而不是在加载失败后才报告。
+
+## 样式
+
+变量：`--uid-audio-accent`、`--uid-audio-accent-hover`、`--uid-audio-bg`、`--uid-audio-border`、`--uid-audio-radius`、`--uid-audio-padding`、`--uid-audio-play-size`、`--uid-audio-play-color`、`--uid-audio-wave`、`--uid-audio-wave-height`、`--uid-audio-mini-width`、`--uid-audio-list-max-height`。
diff --git a/docs/zh/i18n.md b/docs/zh/i18n.md
index 058e7fe..d054047 100644
--- a/docs/zh/i18n.md
+++ b/docs/zh/i18n.md
@@ -148,7 +148,7 @@ provideLocale(computed(() => (lang.value === 'ru' ? ru : en)))
 
 所有组件文案(占位符、ARIA 标签、按钮文字)都通过 provider 本地化。已覆盖的组件：
 
-Select、Combobox、DatePicker、DateRangePicker、TimePicker、TreeSelect、NumberInput、TagsInput、FileUpload、Mention、BackTop、Tour、TreeView、Pagination、Modal、Drawer、Toast、Alert、Tag、Code、DescriptionList、ColorPicker、Cascader、Calendar 等。
+Select、Combobox、DatePicker、DateRangePicker、TimePicker、TreeSelect、NumberInput、TagsInput、FileUpload、Mention、BackTop、Tour、TreeView、Pagination、Modal、Drawer、Toast、Alert、Tag、Code、DescriptionList、ColorPicker、Cascader、Calendar、Video、Audio 等。
 
 ## Prop 级覆盖
 
@@ -192,6 +192,7 @@ interface UidLocale {
   modal: { close: string }
   drawer: { close: string }
   toast: { close: string }
+  media?: UidMediaLocale // UidVideo, UidAudio: buttons, menus, errors
   breadcrumb?: { showHidden: string }
   pagination: {
     first: string; prev: string; next: string; last: string
diff --git a/docs/zh/video.md b/docs/zh/video.md
new file mode 100644
index 0000000..95a5398
--- /dev/null
+++ b/docs/zh/video.md
@@ -0,0 +1,141 @@
+# 视频
+
+`UidVideo` 是基于原生 `<video>` 元素的视频播放器，使用组件库自己的控件：带缓冲区段、章节和缩略图预览的进度条，音量，速度和画质菜单，字幕，全屏和画中画。无依赖；HLS 流由一个单独的、按需懒加载的入口播放（`@dskripchenko/ui/hls`）。
+
+```vue
+<UidVideo
+  src="/media/lesson.mp4"
+  poster="/media/lesson.jpg"
+  :tracks="[
+    { src: '/media/lesson.en.vtt', srclang: 'en', label: 'English', default: true },
+    { src: '/media/lesson.chapters.vtt', kind: 'chapters' },
+  ]"
+  thumbnails="/media/lesson.thumbs.vtt"
+  resume-key="lesson-42"
+/>
+```
+
+| Prop | 类型 | 默认值 | |
+|---|---|---|---|
+| `src` | `string` | — | 单个源 |
+| `sources` | `UidMediaSource[]` | — | 按优先顺序排列的 `{ src, type?, label? }`；浏览器选用第一个能播放的。两个及以上带 `label` 的源构成画质菜单 |
+| `poster` | `string` | — | 播放前显示的图片 |
+| `tracks` | `UidMediaTrack[]` | `[]` | WebVTT：`{ src, kind?: 'subtitles' \| 'captions' \| 'chapters', srclang?, label?, default? }` |
+| `thumbnails` | `string` | — | 其 cue 指向雪碧图切片的 WebVTT：`sprite.jpg#xywh=0,0,160,90` |
+| `autoplay` | `boolean` | `false` | 尽早以静音方式开始播放（浏览器会阻止有声自动播放） |
+| `muted`, `loop` | `boolean` | `false` | |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | |
+| `controls` | `boolean` | `true` | `false` —— 使用浏览器自带控件的原始元素 |
+| `crossorigin` | `'' \| 'anonymous' \| 'use-credentials'` | — | 加载其他源的字幕和缩略图时需要 |
+| `exclusive` | `boolean` | `true` | 启动此播放器会暂停页面上其他独占播放器 |
+| `resumeKey` | `string` | — | 在 `localStorage` 中记住播放位置并从该处继续 |
+| `rates` | `number[]` | `0.5…2` | 速度菜单 |
+| `hotkeys` | `boolean` | `true` | 播放器获得焦点时的键盘快捷键 |
+| `aspectRatio` | `string` | `'16 / 9'` | 视频尺寸未知前容器的宽高比 |
+| `title` | `string` | — | 播放器的无障碍名称 |
+| `autoHide` | `number` | `2500` | 播放时无操作多少毫秒后隐藏控件 |
+| `hlsOptions` | `HlsOptions` | — | 传给 HLS 适配器（见下文） |
+| `hlsLoader` | `() => Promise<module>` | 动态导入 | HLS 适配器的来源 |
+
+事件：`play`、`pause`、`ended`、`error`（`{ kind, detail? }`）、`qualitychange`（标签）。组件对外暴露 `play()`、`pause()`、`toggle()`、`seek(seconds)`、响应式的 `state` 以及 `media` 元素。
+
+## 控件
+
+- **进度条** —— 已播放部分使用强调色，显示缓冲区段和章节间隔；悬停时显示时间、章节标题和缩略图。拖动时实时跳转。作为 `slider`，它响应方向键（±5 秒）、Page Up/Down（±10 %）、Home/End。
+- **音量** —— 按钮切换静音，滑块在悬停或聚焦时展开（触屏设备上由硬件按键负责）。
+- **设置** —— 速度，以及存在多个画质时的画质（自动（`Auto`）在 HLS 下随带宽调整）。菜单位于播放器内部，因此全屏时也可使用；在小尺寸播放器中会变成覆盖在视频上的面板。
+- **字幕** —— 由组件库自行绘制 cue（位于控件上方，在任何视频上都清晰可读）；在 iOS 原生全屏中由系统播放器显示。
+- **全屏** —— 整个播放器全屏；在 iPhone 上只有 `<video>` 本身能进入全屏，此时会打开原生播放器。
+- **画中画** —— 标准 API 或 Safari 的演示模式。
+- **直播**流显示"直播"（`Live`）徽标而不是时间；处于直播最新位置时变为红色，点击可跳转到最新位置。
+
+在触屏上，轻点显示或隐藏控件，双击左侧或右侧三分之一区域后退/快进 10 秒，中央按钮播放和暂停。在桌面端，单击视频播放/暂停，双击切换全屏。播放时控件在 `autoHide` 后隐藏；当菜单打开、正在拖动进度条或焦点位于控件内时保持显示。
+
+## 键盘
+
+| 按键 | 操作 |
+|---|---|
+| 空格、`K` | 播放 / 暂停 |
+| ← / → | −5 秒 / +5 秒 |
+| `J` / `L` | −10 秒 / +10 秒 |
+| ↑ / ↓ | 音量 ±10 % |
+| `M` | 静音 |
+| `F` | 全屏 |
+| `C` | 开启 / 关闭字幕 |
+| `0`–`9` | 跳转到 0–90 % |
+| Home / End | 开头 / 结尾 |
+
+## 错误
+
+错误显示在播放器内部，带有"重试"（Try again）按钮，并带有类型：`aborted`、`network`、`decode`、`unsupported`、`mse`、`manifest`、`encrypted`、`codec`、`unknown`。文本来自语言包 `media.errors`（见 [i18n](./i18n.md)）。404 会报告为 `network`，而不像浏览器那样报告为"不支持的格式"。某个源无法播放时，会尝试 `sources` 中的下一个。
+
+## 格式
+
+浏览器原生支持的格式（组件库对此不做任何额外处理）：
+
+| 格式 | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
+|---|---|---|---|---|
+| MP4 · H.264 + AAC | ✓ | ✓ | ✓ | ✓ |
+| MP4 · HEVC | 需硬件解码 | Windows，需硬件解码 | ✓ | ✓ |
+| WebM · VP9 + Opus | ✓ | ✓ | ✓ | ✓（较新版本） |
+| MP4/WebM · AV1 | ✓ | ✓ | 需硬件解码 | 需硬件解码 |
+| HLS (`.m3u8`) | 通过组件库的适配器；较新版本也可原生播放 | 通过组件库的适配器 | 原生 | 原生 |
+
+已在真实浏览器中验证（Playwright）：Chromium 156、Chrome 156、WebKit 27 —— MP4 H.264/AAC、WebM VP9/Opus、HLS fMP4 和 MPEG-TS（通过适配器及原生）、AES-128、直播播放列表、不连续点。测试环境中没有 Firefox。
+
+## HLS
+
+`type: 'application/x-mpegURL'`（或 `.m3u8` 地址）的源通过 `@dskripchenko/ui/hls` 播放。适配器是一个单独的入口，仅在出现此类源时通过动态导入加载 —— 主包体积不会增加。
+
+- 在浏览器自身支持 HLS 的地方（Safari、iOS、较新的 Chrome），地址直接交给 `<video>`（`preferNative: true`；设为 `false` 则始终使用适配器并获得画质菜单）。
+- 否则由适配器向 Media Source Extensions 供数据：master 和 media 播放列表、带 `EXT-X-MAP` 的 **fMP4/CMAF** 分片、在浏览器中转换为 fMP4 的 **MPEG-TS** 分片（H.264 + AAC）、字节范围、`EXT-X-DISCONTINUITY`、**AES-128**（WebCrypto）、带重新加载和滑动窗口的直播播放列表、预缓冲与淘汰、跳转、支持手动选择画质的 ABR、带退避的重试。
+- 不支持：SAMPLE-AES / DRM（`encrypted` 错误）、MPEG-TS 中的 HEVC 或 MP3（`codec` 错误）、备用音轨（带 URI 的 `EXT-X-MEDIA TYPE=AUDIO`）—— 只播放混流在变体中的音频、低延迟 HLS 的 part。
+
+```ts
+import { UidVideo } from '@dskripchenko/ui'
+
+// 在模板中：
+// <UidVideo src="https://cdn.example/live/master.m3u8" :hls-options="{ maxBufferAhead: 20 }" />
+```
+
+| `HlsOptions` | 默认值 | |
+|---|---|---|
+| `preferNative` | `true` | 浏览器自带 HLS 时使用它 |
+| `startLevel` | `-1` | 起始变体；`-1` —— 由 ABR 决定 |
+| `maxBufferAhead` | `30` | 向前缓冲的秒数 |
+| `maxBufferBehind` | `30` | 播放位置之后保留的秒数 |
+| `retries` | `3` | 失败请求的重试次数（500 毫秒、1 秒、2 秒……） |
+| `initialBandwidth` | `1000000` | 初始带宽估计，bit/s |
+| `capToPlayerSize` | `true` | ABR 不选择明显高于播放器的变体 |
+| `transmuxer` | 内置 MPEG-TS | 分片转换器工厂；`null` 表示禁用 |
+
+适配器也可以脱离组件使用：
+
+```ts
+import { attachHls } from '@dskripchenko/ui/hls'
+
+const session = attachHls(videoElement, url, {
+  onLevels: (levels) => console.log(levels.map((l) => l.label)),
+  onError: (e) => console.warn(e.code, e.message),
+})
+session.setLevel(1)   // -1 —— 恢复自动
+session.destroy()
+```
+
+其他容器的转换器通过 `transmuxer` 接入：一个包含 `canHandle(bytes)`、`push(bytes, { discontinuity })` → `{ init?, data, mimeType, tracks, startTime }` 和 `reset()` 的对象。
+
+## 控制器
+
+`useMediaController(mediaRef, options)` 是两个播放器共用的核心；可以在它之上构建自己的播放器界面。
+
+```ts
+const media = ref<HTMLVideoElement | null>(null)
+const { state, play, pause, toggle, seek, skip, setVolume, toggleMute, setRate, toggleFullscreen, togglePip, handleKey } =
+  useMediaController(media, { fullscreenTarget: rootRef, resumeKey: 'intro' })
+```
+
+`state` 是响应式的：`playing`、`paused`、`ended`、`waiting`、`stalled`、`seeking`、`currentTime`、`duration`、`live`、`buffered`、`volume`、`muted`、`rate`、`fullscreen`、`pip`、`error`。`handleKey(event)` 应用上述快捷键，按键被处理时返回 `true`。
+
+## 样式
+
+控件始终是深色遮罩上的浅色。变量：`--uid-video-accent`（已播放部分、选中项）、`--uid-video-radius`、`--uid-video-bg`、`--uid-video-caption-size`。
diff --git a/package.json b/package.json
index e9e3dca..dd0db23 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,11 @@
       "import": "./dist/icons/index.mjs",
       "require": "./dist/icons/index.cjs"
     },
+    "./hls": {
+      "types": "./dist/hls/index.d.ts",
+      "import": "./dist/hls/index.mjs",
+      "require": "./dist/hls/index.cjs"
+    },
     "./styles/tokens.css": "./dist/styles/tokens.css",
     "./styles/themes.css": "./dist/styles/themes.css",
     "./styles/reset.css": "./dist/styles/reset.css",
@@ -73,6 +78,9 @@
     "test:watch": "vitest",
     "lint": "eslint src",
     "typecheck": "vue-tsc --noEmit",
+    "media:fixtures": "bash scripts/media-check/fixtures.sh",
+    "media:check": "node scripts/media-check/check.mjs",
+    "media:screens": "node scripts/media-check/screens.mjs",
     "changeset": "changeset",
     "release": "pnpm build && changeset publish"
   },
diff --git a/scripts/media-check/app/index.html b/scripts/media-check/app/index.html
new file mode 100644
index 0000000..04b2df1
--- /dev/null
+++ b/scripts/media-check/app/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>media check</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/scripts/media-check/app/main.ts b/scripts/media-check/app/main.ts
new file mode 100644
index 0000000..1a62de1
--- /dev/null
+++ b/scripts/media-check/app/main.ts
@@ -0,0 +1,74 @@
+import { createApp, defineComponent, h, ref } from 'vue'
+import '../../../src/tokens/index.css'
+import '../../../src/styles/themes.css'
+import '../../../src/styles/reset.css'
+import '../../../src/styles/global.css'
+import { UidAudio, UidLocaleProvider, UidVideo, en } from '../../../src/index.js'
+
+const q = new URLSearchParams(location.search)
+const scenario = q.get('s') ?? 'gallery'
+const theme = q.get('theme') ?? 'light'
+const native = q.get('native') !== '0'
+document.documentElement.dataset.theme = theme
+document.body.style.background = 'var(--uid-surface-base)'
+document.body.style.color = 'var(--uid-text-primary)'
+document.body.style.padding = '16px'
+
+const fx = (p: string): string => `/fx/${p}`
+const tracks = [
+  { src: fx('captions-en.vtt'), kind: 'subtitles' as const, srclang: 'en', label: 'English', default: true },
+  { src: fx('captions-ru.vtt'), kind: 'subtitles' as const, srclang: 'ru', label: 'Русский' },
+  { src: fx('chapters.vtt'), kind: 'chapters' as const },
+]
+const hlsOptions = { preferNative: native }
+
+const playlist = [
+  { src: fx('audio.mp3'), title: 'Morning drive', artist: 'Test Signal' },
+  { src: fx('audio.ogg'), title: 'Opus in Ogg', artist: 'Test Signal' },
+  { src: fx('audio.wav'), title: 'Plain wave', artist: 'Lab' },
+]
+
+const video = (props: Record<string, unknown>) => h(UidVideo, { class: 'case', style: 'max-width:720px', ...props })
+
+const scenarios: Record<string, () => unknown> = {
+  'video-mp4': () => video({ src: fx('video.mp4'), tracks, thumbnails: fx('thumbs.vtt'), poster: fx('poster.jpg'), title: 'Test video' }),
+  'video-webm': () => video({ sources: [{ src: fx('video.webm'), type: 'video/webm' }] }),
+  'video-fallback': () => video({ sources: [{ src: fx('video.webm'), type: 'video/x-unknown' }, { src: fx('video.webm'), type: 'video/webm' }] }),
+  'video-quality': () => video({ sources: [{ src: fx('video.mp4'), type: 'video/mp4', label: '720p' }, { src: fx('video-360.mp4'), type: 'video/mp4', label: '360p' }] }),
+  'video-broken': () => video({ src: fx('broken.mp4') }),
+  'video-missing': () => video({ src: fx('missing.mp4') }),
+  'hls-fmp4': () => video({ src: fx('hls-fmp4/master.m3u8'), hlsOptions }),
+  'hls-ts': () => video({ src: fx('hls-ts/master.m3u8'), hlsOptions }),
+  'hls-aes': () => video({ src: fx('hls-aes/index.m3u8'), hlsOptions }),
+  'hls-disc': () => video({ src: '/live/disc.m3u8', hlsOptions }),
+  'hls-live-fmp4': () => video({ src: '/live/fmp4.m3u8', hlsOptions }),
+  'hls-live-ts': () => video({ src: '/live/ts.m3u8', hlsOptions }),
+  'hls-bad': () => video({ src: fx('nothing.m3u8'), hlsOptions }),
+  'hls-url': () => video({ src: q.get('u') ?? '', hlsOptions }),
+  'audio-formats': () => h('div', { style: 'display:grid;gap:12px;max-width:640px' },
+    ['mp3', 'ogg', 'wav', 'flac', 'm4a'].map((ext) => h(UidAudio, { class: 'case', src: fx(`audio.${ext}`), title: `audio.${ext}`, waveform: true }))),
+  'audio-broken': () => h(UidAudio, { src: fx('broken.mp4'), title: 'Broken' }),
+  'audio-playlist': () => h(UidAudio, { tracks: playlist, waveform: true, style: 'max-width:640px' }),
+  gallery: () => h(defineComponent({
+    setup() {
+      const idx = ref(0)
+      return () => h('div', { style: 'display:grid;gap:20px;max-width:760px' }, [
+        h(UidVideo, { src: fx('video.mp4'), tracks, thumbnails: fx('thumbs.vtt'), poster: fx('poster.jpg'), title: 'Gallery video' }),
+        h(UidAudio, { src: fx('audio.mp3'), title: 'Morning drive', artist: 'Test Signal' }),
+        h(UidAudio, { src: fx('audio.flac'), title: 'Waveform', artist: 'Decoded in the browser', waveform: true }),
+        h(UidAudio, { tracks: playlist, waveform: true, index: idx.value, 'onUpdate:index': (v: number) => { idx.value = v } }),
+        h('table', { class: 'mini-table', style: 'border-collapse:collapse;width:100%;font-size:14px' }, [
+          h('thead', h('tr', ['Name', 'Recording', 'Size'].map((c) => h('th', { style: 'text-align:left;padding:8px;border-bottom:1px solid var(--uid-border-subtle)' }, c)))),
+          h('tbody', [['Call #1', 'audio.mp3', '146 KB'], ['Call #2', 'audio.ogg', '98 KB'], ['Voicemail', 'audio.m4a', '150 KB']].map(([n, f, s], i) =>
+            h('tr', [
+              h('td', { style: 'padding:8px;border-bottom:1px solid var(--uid-border-subtle)' }, n),
+              h('td', { style: 'padding:4px 8px;border-bottom:1px solid var(--uid-border-subtle)' }, h(UidAudio, { src: fx(f), variant: 'mini', waveform: i !== 1 })),
+              h('td', { style: 'padding:8px;border-bottom:1px solid var(--uid-border-subtle);color:var(--uid-text-secondary)' }, s),
+            ]))),
+        ]),
+      ])
+    },
+  })),
+}
+
+createApp({ render: () => h(UidLocaleProvider, { locale: q.get('lang') === 'ru' ? undefined : en }, () => (scenarios[scenario] ?? scenarios.gallery)()) }).mount('#app')
diff --git a/scripts/media-check/check.mjs b/scripts/media-check/check.mjs
new file mode 100644
index 0000000..41d32dd
--- /dev/null
+++ b/scripts/media-check/check.mjs
@@ -0,0 +1,326 @@
+// Real-browser checks of UidVideo / UidAudio / the HLS adapter.
+// Usage: node scripts/media-check/check.mjs [--browsers=chromium,webkit,firefox,chrome] [--only=substring]
+// Playwright is not a dependency of the kit: point PLAYWRIGHT at an installed copy if it is not resolvable.
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { startServer, fixtures } from './server.mjs'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const args = Object.fromEntries(process.argv.slice(2).map((a) => a.replace(/^--/, '').split('=')))
+const pw = await import(process.env.PLAYWRIGHT ?? 'playwright')
+const PORT = 5199
+const BASE = `http://127.0.0.1:${PORT}`
+const outDir = args.out ?? resolve(here, '../../.media-fixtures/report')
+
+if (!existsSync(resolve(fixtures, 'video.mp4'))) {
+  console.error('No fixtures: run scripts/media-check/fixtures.sh first')
+  process.exit(1)
+}
+
+const wanted = (args.browsers ?? 'chromium,chrome,webkit,firefox').split(',')
+const browsers = []
+for (const name of wanted) {
+  const type = name === 'chrome' ? pw.chromium : pw[name]
+  try {
+    const b = await type.launch(name === 'chrome' ? { channel: 'chrome' } : {})
+    browsers.push({ name, browser: b })
+  } catch (e) {
+    browsers.push({ name, error: e.message.split('\n')[0] })
+  }
+}
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
+
+async function media(page, sel = 'video, audio') {
+  return page.evaluate((s) => {
+    const v = document.querySelector(s)
+    if (!v) return null
+    return {
+      t: v.currentTime, d: v.duration, paused: v.paused, rs: v.readyState, err: v.error?.code ?? null,
+      vol: v.volume, muted: v.muted, rate: v.playbackRate, h: v.videoHeight ?? 0,
+      alert: document.querySelector('[role=alert]')?.textContent?.trim() ?? null,
+    }
+  }, sel)
+}
+
+async function waitFor(page, fn, what, timeout = 10000, sel) {
+  const t0 = Date.now()
+  let last
+  while (Date.now() - t0 < timeout) {
+    last = await media(page, sel)
+    if (last && fn(last)) return last
+    await sleep(200)
+  }
+  throw new Error(`timeout: ${what}; last=${JSON.stringify(last)}`)
+}
+
+async function open(page, scenario, extra = '') {
+  await page.goto(`${BASE}/?s=${scenario}${extra}`)
+  await page.waitForSelector('.uid-video, .uid-audio')
+  await sleep(400)
+}
+
+async function startVideo(page) {
+  await page.click('.uid-video__big-play')
+  return waitFor(page, (m) => m.t > 0.5 && !m.paused, 'playback starts', 15000)
+}
+
+async function clickScrubber(page, ratio, sel = '.uid-video .uid-media-scrubber') {
+  const bb = await page.locator(sel).first().boundingBox()
+  await page.mouse.click(bb.x + bb.width * ratio, bb.y + bb.height / 2)
+}
+
+async function chooseMenu(page, button, item) {
+  await page.mouse.move(200, 150)
+  await page.click(`.uid-video [aria-label="${button}"]`)
+  await page.click(`.uid-media-menu__item:has-text("${item}")`)
+}
+
+async function hlsCase(page, scenario, extra, { quality = true, seekTo = 8 } = {}) {
+  await open(page, scenario, extra)
+  const m0 = await startVideo(page)
+  const notes = [`start ${m0.h}p`]
+  await clickScrubber(page, seekTo / 12)
+  await waitFor(page, (m) => m.t >= seekTo - 1 && m.t < seekTo + 2 && m.rs >= 3, `seek to ${seekTo}`, 15000)
+  notes.push('seek ok')
+  if (quality) {
+    await clickScrubber(page, 0.1)
+    await waitFor(page, (m) => m.t < 3 && m.rs >= 3, 'seek back', 10000)
+    await chooseMenu(page, 'Settings', '360p')
+    await waitFor(page, (m) => m.h === 360 && !m.paused, 'switch to 360p', 15000)
+    await chooseMenu(page, 'Settings', '720p')
+    await waitFor(page, (m) => m.h === 720 && !m.paused, 'switch to 720p', 15000)
+    notes.push('360p→720p')
+  }
+  return notes.join(', ')
+}
+
+
+const tests = [
+  {
+    name: 'MP4 H.264/AAC: play, seek, volume, rate, captions, chapters, thumbnails',
+    run: async (page) => {
+      await open(page, 'video-mp4')
+      await startVideo(page)
+      await waitFor(page, () => true, '')
+      const caption = await page.waitForSelector('.uid-video__caption-line', { timeout: 5000 })
+      const capText = await caption.textContent()
+      if (!capText.includes('caption')) throw new Error(`caption text: ${capText}`)
+      await clickScrubber(page, 0.75)
+      await waitFor(page, (m) => m.t > 8.5 && m.t < 11, 'seek to 9')
+      const chapter = await page.textContent('.uid-video__chapter')
+      if (chapter.trim() !== 'Outro') throw new Error(`chapter: ${chapter}`)
+      const bb = await page.locator('.uid-video .uid-media-scrubber').boundingBox()
+      await page.mouse.move(bb.x + bb.width * 0.4, bb.y + bb.height / 2)
+      const thumb = await page.waitForSelector('.uid-media-scrubber__thumb', { timeout: 3000 })
+      const bg = await thumb.evaluate((el) => getComputedStyle(el).backgroundPosition)
+      await page.focus('.uid-video')
+      await page.keyboard.press('ArrowDown')
+      await page.keyboard.press('ArrowDown')
+      await waitFor(page, (m) => Math.abs(m.vol - 0.8) < 0.01, 'volume 0.8')
+      await chooseMenu(page, 'Settings', '1.5×')
+      await waitFor(page, (m) => m.rate === 1.5, 'rate 1.5')
+      await chooseMenu(page, 'Subtitles', 'Русский')
+      await clickScrubber(page, 0.1)
+      await page.waitForSelector('.uid-video__caption-line:has-text("Привет")', { timeout: 5000 })
+      return `caption "${capText.trim()}", chapter Outro, thumb ${bg}, vol 0.8, rate 1.5, ru captions`
+    },
+  },
+  {
+    name: 'Hotkeys: k, m, 5, j/l',
+    run: async (page) => {
+      await open(page, 'video-mp4')
+      await startVideo(page)
+      await page.focus('.uid-video')
+      await page.keyboard.press('k')
+      await waitFor(page, (m) => m.paused, 'k pauses')
+      await page.keyboard.press('m')
+      await waitFor(page, (m) => m.muted, 'm mutes')
+      await page.keyboard.press('5')
+      await waitFor(page, (m) => Math.abs(m.t - 6) < 0.3, '5 → 50%')
+      await page.keyboard.press('l')
+      await waitFor(page, (m) => Math.abs(m.t - 12) < 0.4 || m.t > 11.5, 'l → +10 s (clamped)')
+      await page.keyboard.press('j')
+      await waitFor(page, (m) => m.t < 3, 'j → −10 s')
+      return 'ok'
+    },
+  },
+  {
+    name: 'WebM VP9/Opus playback',
+    run: async (page) => {
+      await open(page, 'video-webm')
+      const m = await startVideo(page)
+      return `${m.h}p`
+    },
+  },
+  {
+    name: 'Source fallback (unplayable type → next source)',
+    run: async (page) => {
+      await open(page, 'video-fallback')
+      await startVideo(page)
+      return 'played second source'
+    },
+  },
+  {
+    name: 'Progressive quality menu (720p ↔ 360p keeps position)',
+    run: async (page) => {
+      await open(page, 'video-quality')
+      await startVideo(page)
+      await clickScrubber(page, 0.5)
+      await waitFor(page, (m) => m.t > 5.5, 'seek')
+      await chooseMenu(page, 'Settings', '360p')
+      const m = await waitFor(page, (x) => x.h === 360 && x.t > 5.5 && !x.paused, '360p at the same position')
+      return `360p at ${m.t.toFixed(1)} s`
+    },
+  },
+  {
+    name: 'Broken file → readable error',
+    run: async (page) => {
+      await open(page, 'video-broken')
+      await page.click('.uid-video__big-play').catch(() => {})
+      const m = await waitFor(page, (x) => !!x.alert, 'error shown', 8000)
+      return m.alert.replace('Try again', '').trim()
+    },
+  },
+  {
+    name: 'Missing file (404) → readable error',
+    run: async (page) => {
+      await open(page, 'video-missing')
+      await page.click('.uid-video__big-play').catch(() => {})
+      const m = await waitFor(page, (x) => !!x.alert, 'error shown', 8000)
+      return m.alert.replace('Try again', '').trim()
+    },
+  },
+  { name: 'HLS fMP4 (browser default path)', run: (page) => hlsCase(page, 'hls-fmp4', '', { quality: false }) },
+  { name: 'HLS fMP4 via MSE: seek + quality 360p/720p', run: (page) => hlsCase(page, 'hls-fmp4', '&native=0') },
+  { name: 'HLS MPEG-TS via MSE (transmuxer): seek + quality', run: (page) => hlsCase(page, 'hls-ts', '&native=0') },
+  { name: 'HLS MPEG-TS (browser default path)', run: (page) => hlsCase(page, 'hls-ts', '', { quality: false }) },
+  { name: 'HLS AES-128 TS via MSE', run: (page) => hlsCase(page, 'hls-aes', '&native=0', { quality: false }) },
+  {
+    name: 'HLS discontinuity (TS, timestamps jump) via MSE',
+    run: async (page) => {
+      await open(page, 'hls-disc', '&native=0')
+      await startVideo(page)
+      await clickScrubber(page, 4.5 / 12)
+      await waitFor(page, (m) => m.t > 7.5, 'plays across the discontinuity', 15000)
+      return 'crossed 6 s boundary'
+    },
+  },
+  ...['ts', 'fmp4'].map((kind) => ({
+    name: `HLS live ${kind === 'ts' ? 'MPEG-TS' : 'fMP4'} via MSE (sliding window, reloads)`,
+    run: async (page) => {
+      await page.request.get(`${BASE}/live/reset`)
+      await open(page, `hls-live-${kind}`, '&native=0')
+      await startVideo(page)
+      await page.waitForSelector('.uid-video__live', { timeout: 8000 })
+      const m = await waitFor(page, (x) => x.t > 9, 'live advances past the first window', 20000)
+      return `t=${m.t.toFixed(1)}, live badge`
+    },
+  })),
+  {
+    name: 'HLS bad URL → readable error',
+    run: async (page) => {
+      await open(page, 'hls-bad', '&native=0')
+      const m = await waitFor(page, (x) => !!x.alert, 'error shown', 12000)
+      return m.alert.replace('Try again', '').trim()
+    },
+  },
+  ...['mp3', 'ogg', 'wav', 'flac', 'm4a'].map((ext, i) => ({
+    name: `Audio ${ext.toUpperCase()}: play + waveform`,
+    run: async (page) => {
+      await open(page, 'audio-formats')
+      const root = page.locator('.uid-audio').nth(i)
+      await root.scrollIntoViewIfNeeded()
+      const sel = `.uid-audio:nth-child(${i + 1}) audio`
+      await root.locator('.uid-audio__play').click()
+      await waitFor(page, (m) => m.t > 0.5 && !m.paused, 'audio plays', 10000, sel)
+      await root.locator('.uid-media-scrubber__wave path').first().waitFor({ timeout: 10000 })
+      const bars = await root.locator('.uid-media-scrubber__wave path').first().evaluate((p) => (p.getAttribute('d').match(/M/g) ?? []).length)
+      return `${bars} bars`
+    },
+  })),
+  {
+    name: 'One active player: starting another pauses the first',
+    run: async (page) => {
+      await open(page, 'audio-formats')
+      await page.locator('.uid-audio').nth(0).locator('.uid-audio__play').click()
+      await waitFor(page, (m) => !m.paused && m.t > 0.3, 'first plays', 8000, '.uid-audio:nth-child(1) audio')
+      await page.locator('.uid-audio').nth(2).locator('.uid-audio__play').click()
+      await waitFor(page, (m) => !m.paused, 'third plays', 8000, '.uid-audio:nth-child(3) audio')
+      await waitFor(page, (m) => m.paused, 'first paused', 3000, '.uid-audio:nth-child(1) audio')
+      return 'ok'
+    },
+  },
+  {
+    name: 'Audio playlist: next, auto-advance',
+    run: async (page) => {
+      await open(page, 'audio-playlist')
+      await page.click('.uid-audio__play')
+      await waitFor(page, (m) => !m.paused && m.t > 0.3, 'track 1 plays')
+      await page.click('[aria-label="Next track"]')
+      await page.waitForSelector('.uid-audio__item--active:has-text("Opus in Ogg")')
+      await waitFor(page, (m) => !m.paused && m.t > 0.3, 'track 2 plays')
+      await clickScrubber(page, 0.97, '.uid-audio .uid-media-scrubber')
+      await page.waitForSelector('.uid-audio__item--active:has-text("Plain wave")', { timeout: 8000 })
+      await waitFor(page, (m) => !m.paused && m.t > 0.2, 'track 3 auto-plays')
+      return 'next + auto-advance'
+    },
+  },
+  {
+    name: 'Broken audio → readable error',
+    run: async (page) => {
+      await open(page, 'audio-broken')
+      await page.click('.uid-audio__play').catch(() => {})
+      const m = await waitFor(page, (x) => !!x.alert, 'error shown', 8000)
+      return m.alert
+    },
+  },
+]
+
+const only = args.only
+const results = []
+await startServer(PORT)
+for (const b of browsers) {
+  if (b.error) {
+    console.log(`\n## ${b.name}: not available (${b.error})`)
+    continue
+  }
+  console.log(`\n## ${b.name} ${b.browser.version()}`)
+  for (const test of tests) {
+    if (only && !test.name.toLowerCase().includes(only.toLowerCase())) continue
+    const ctx = await b.browser.newContext({ viewport: { width: 1000, height: 800 } })
+    const page = await ctx.newPage()
+    const errors = []
+    page.on('pageerror', (e) => errors.push(e.message))
+    let status = 'pass'
+    let detail = ''
+    try {
+      detail = await Promise.race([test.run(page, b.name), sleep(60000).then(() => { throw new Error('test timeout') })])
+      if (errors.length) detail += ` (page errors: ${errors.join('; ')})`
+    } catch (e) {
+      status = 'fail'
+      detail = e.message.split('\n')[0]
+    }
+    results.push({ browser: b.name, test: test.name, status, detail })
+    console.log(`${status === 'pass' ? '✓' : '✗'} ${test.name} — ${detail}`)
+    await ctx.close()
+  }
+  await b.browser.close()
+}
+
+mkdirSync(outDir, { recursive: true })
+writeFileSync(resolve(outDir, 'media-check.json'), JSON.stringify({ browsers: browsers.map((b) => ({ name: b.name, error: b.error })), results }, null, 2))
+const names = browsers.filter((b) => !b.error).map((b) => b.name)
+const md = [`| Check | ${names.join(' | ')} |`, `|---|${names.map(() => '---').join('|')}|`]
+for (const test of tests) {
+  const row = names.map((n) => {
+    const r = results.find((x) => x.browser === n && x.test === test.name)
+    return r ? (r.status === 'pass' ? '✓' : `✗ ${r.detail.replace(/\|/g, '/')}`) : '—'
+  })
+  if (row.some((c) => c !== '—')) md.push(`| ${test.name} | ${row.join(' | ')} |`)
+}
+writeFileSync(resolve(outDir, 'media-check.md'), md.join('\n') + '\n')
+console.log(`\nreport: ${resolve(outDir, 'media-check.md')}`)
+const failed = results.filter((r) => r.status === 'fail').length
+process.exit(failed ? 1 : 0)
diff --git a/scripts/media-check/fixtures.sh b/scripts/media-check/fixtures.sh
new file mode 100755
index 0000000..d0ea418
--- /dev/null
+++ b/scripts/media-check/fixtures.sh
@@ -0,0 +1,67 @@
+#!/usr/bin/env bash
+# Generates media fixtures for the real-browser player checks (not committed).
+set -euo pipefail
+FF=${FFMPEG:-ffmpeg}
+OUT=${1:-"$(cd "$(dirname "$0")/../.." && pwd)/.media-fixtures"}
+mkdir -p "$OUT"
+cd "$OUT"
+Q="-hide_banner -loglevel error -y"
+DUR=12
+VSRC="testsrc2=size=1280x720:rate=30:duration=$DUR"
+ASRC="aevalsrc='0.9*sin(2*PI*330*t)*(0.15+0.85*abs(sin(1.3*t)*sin(0.45*t+0.5)))|0.9*sin(2*PI*440*t)*(0.15+0.85*abs(sin(1.1*t)*sin(0.5*t)))':s=48000:d=$DUR"
+
+$FF $Q -f lavfi -i "$VSRC" -f lavfi -i "$ASRC" -c:v libx264 -profile:v main -pix_fmt yuv420p -g 30 -c:a aac -b:a 96k -movflags +faststart -shortest video.mp4
+$FF $Q -f lavfi -i "$VSRC" -f lavfi -i "$ASRC" -c:v libx264 -profile:v baseline -s 640x360 -pix_fmt yuv420p -g 30 -c:a aac -b:a 64k -movflags +faststart -shortest video-360.mp4
+$FF $Q -f lavfi -i "$VSRC" -f lavfi -i "$ASRC" -c:v libvpx-vp9 -b:v 600k -deadline realtime -cpu-used 8 -s 854x480 -c:a libopus -b:a 64k -shortest video.webm
+$FF $Q -f lavfi -i "$ASRC" -c:a libmp3lame -b:a 96k audio.mp3
+$FF $Q -f lavfi -i "$ASRC" -c:a libopus -b:a 64k audio.ogg
+$FF $Q -f lavfi -i "$ASRC" -c:a pcm_s16le audio.wav
+$FF $Q -f lavfi -i "$ASRC" -c:a flac audio.flac
+$FF $Q -f lavfi -i "$ASRC" -c:a aac -b:a 96k audio.m4a
+head -c 40000 /dev/urandom > broken.mp4
+
+$FF $Q -ss 3 -i video.mp4 -frames:v 1 poster.jpg
+# Sprite of thumbnails: one frame every 2 s, 160x90, 6 in a row.
+$FF $Q -i video.mp4 -vf "fps=1/2,scale=160:90,tile=6x1" -frames:v 1 sprite.jpg
+{
+  printf 'WEBVTT\n\n'
+  for i in 0 1 2 3 4 5; do
+    s=$((i * 2)); e=$((s + 2))
+    printf '00:00:%02d.000 --> 00:00:%02d.000\nsprite.jpg#xywh=%d,0,160,90\n\n' "$s" "$e" $((i * 160))
+  done
+} > thumbs.vtt
+
+printf 'WEBVTT\n\n00:00:00.500 --> 00:00:03.500\nHello, this is a <i>caption</i> test.\n\n00:00:04.000 --> 00:00:07.000\n<v Narrator>Second line &amp; more\n\n00:00:07.500 --> 00:00:11.500\nThe end is near.\n' > captions-en.vtt
+printf 'WEBVTT\n\n00:00:00.500 --> 00:00:03.500\nПривет, это проверка субтитров.\n\n00:00:04.000 --> 00:00:11.500\nВторая строка.\n' > captions-ru.vtt
+printf 'WEBVTT\n\n00:00:00.000 --> 00:00:04.000\nIntro\n\n00:00:04.000 --> 00:00:08.000\nMiddle\n\n00:00:08.000 --> 00:00:12.000\nOutro\n' > chapters.vtt
+
+hls() { # $1 dir, $2 segment type (fmp4|mpegts)
+  local dir=$1 type=$2 ext=m4s
+  [ "$type" = mpegts ] && ext=ts
+  mkdir -p "$dir"
+  $FF $Q -f lavfi -i "$VSRC" -f lavfi -i "$ASRC" \
+    -filter_complex "[0:v]split=2[v1][v2];[v1]scale=640:360[v360];[v2]scale=1280:720[v720]" \
+    -map "[v360]" -map 1:a -map "[v720]" -map 1:a \
+    -c:v libx264 -profile:v main -pix_fmt yuv420p -g 60 -keyint_min 60 -sc_threshold 0 \
+    -b:v:0 400k -maxrate:v:0 450k -bufsize:v:0 800k -b:v:1 1800k -maxrate:v:1 2000k -bufsize:v:1 3600k \
+    -c:a aac -b:a 64k -ac 2 \
+    -f hls -hls_time 2 -hls_playlist_type vod -hls_segment_type "$type" \
+    -hls_segment_filename "$dir/v%v/seg%03d.$ext" -master_pl_name master.m3u8 \
+    -var_stream_map "v:0,a:0,name:360 v:1,a:1,name:720" "$dir/v%v/index.m3u8"
+}
+hls hls-fmp4 fmp4
+hls hls-ts mpegts
+
+# AES-128 encrypted TS.
+mkdir -p hls-aes
+head -c 16 /dev/urandom > hls-aes/key.bin
+printf 'key.bin\n%s\n' "$PWD/hls-aes/key.bin" > hls-aes/keyinfo
+$FF $Q -f lavfi -i "$VSRC" -f lavfi -i "$ASRC" -c:v libx264 -pix_fmt yuv420p -s 640x360 -g 60 -sc_threshold 0 -c:a aac -b:a 64k \
+  -f hls -hls_time 2 -hls_playlist_type vod -hls_key_info_file hls-aes/keyinfo -hls_segment_filename "hls-aes/seg%03d.ts" hls-aes/index.m3u8
+
+# A second TS clip with far-away timestamps, for the discontinuity playlist built by the check server.
+mkdir -p hls-disc
+$FF $Q -f lavfi -i "testsrc=size=640x360:rate=30:duration=6" -f lavfi -i "sine=frequency=880:duration=6:sample_rate=48000" \
+  -c:v libx264 -pix_fmt yuv420p -g 60 -sc_threshold 0 -c:a aac -b:a 64k -ac 2 \
+  -output_ts_offset 5000 -f hls -hls_time 2 -hls_playlist_type vod -hls_segment_filename "hls-disc/b%03d.ts" hls-disc/b.m3u8
+echo "fixtures in $OUT"
diff --git a/scripts/media-check/screens.mjs b/scripts/media-check/screens.mjs
new file mode 100644
index 0000000..dcb7440
--- /dev/null
+++ b/scripts/media-check/screens.mjs
@@ -0,0 +1,67 @@
+// Screenshots of the players for visual review: light/dark × desktop/phone.
+import { mkdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { startServer } from './server.mjs'
+
+const out = process.argv[2] ?? resolve('.media-fixtures/screens')
+mkdirSync(out, { recursive: true })
+const pw = await import(process.env.PLAYWRIGHT ?? 'playwright')
+const server = await startServer(5198)
+const BASE = 'http://127.0.0.1:5198'
+const browser = await pw.chromium.launch()
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms))
+
+const devices = {
+  desktop: { viewport: { width: 1000, height: 800 }, deviceScaleFactor: 1 },
+  phone: { viewport: { width: 390, height: 844 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true },
+}
+
+async function shot(name, device, theme, scenario, action, opts = {}) {
+  const ctx = await browser.newContext(devices[device])
+  const page = await ctx.newPage()
+  await page.goto(`${BASE}/?s=${scenario}&theme=${theme}${opts.query ?? ''}`)
+  await page.waitForSelector('.uid-video, .uid-audio')
+  await sleep(1500)
+  if (action) await action(page, device)
+  const file = resolve(out, `${name}-${device}-${theme}.png`)
+  const target = opts.selector ? page.locator(opts.selector).first() : page
+  await target.screenshot({ path: file, ...(opts.selector ? {} : { fullPage: true }) })
+  await ctx.close()
+  console.log(file)
+}
+
+const tap = async (page, device, selector) => (device === 'phone' ? page.tap(selector) : page.click(selector))
+
+const playVideo = async (page, device) => {
+  await tap(page, device, '.uid-video__big-play')
+  await sleep(1300)
+  await page.evaluate(() => document.querySelector('video').pause())
+  await sleep(200)
+}
+
+for (const theme of ['light', 'dark']) {
+  for (const device of ['desktop', 'phone']) {
+    await shot('gallery', device, theme, 'gallery')
+    await shot('video-playing', device, theme, 'video-mp4', async (page, d) => {
+      await playVideo(page, d)
+      if (d === 'desktop') {
+        const bb = await page.locator('.uid-media-scrubber').first().boundingBox()
+        await page.mouse.move(bb.x + bb.width * 0.55, bb.y + bb.height / 2)
+        await sleep(300)
+      }
+    }, { selector: '.uid-video' })
+    await shot('video-settings', device, theme, 'hls-ts', async (page, d) => {
+      await playVideo(page, d)
+      await tap(page, d, '[aria-label="Settings"]')
+      await sleep(300)
+    }, { selector: '.uid-video', query: '&native=0' })
+    await shot('video-error', device, theme, 'video-broken', null, { selector: '.uid-video' })
+    await shot('audio-playlist', device, theme, 'audio-playlist', async (page, d) => {
+      await tap(page, d, '.uid-audio__play')
+      await sleep(1500)
+      await page.evaluate(() => document.querySelector('audio').pause())
+    }, { selector: '.uid-audio' })
+  }
+}
+await browser.close()
+await server.close()
diff --git a/scripts/media-check/server.mjs b/scripts/media-check/server.mjs
new file mode 100644
index 0000000..44837b7
--- /dev/null
+++ b/scripts/media-check/server.mjs
@@ -0,0 +1,121 @@
+// Dev server for the media checks: the harness app through Vite, fixtures with Range support, synthetic live playlists.
+import { createReadStream, readFileSync, statSync, existsSync } from 'node:fs'
+import { extname, join, resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const root = resolve(here, '../..')
+export const fixtures = resolve(root, '.media-fixtures')
+
+const TYPES = {
+  '.mp4': 'video/mp4', '.m4s': 'video/iso.segment', '.webm': 'video/webm', '.mp3': 'audio/mpeg', '.ogg': 'audio/ogg',
+  '.wav': 'audio/wav', '.flac': 'audio/flac', '.m4a': 'audio/mp4', '.vtt': 'text/vtt', '.jpg': 'image/jpeg',
+  '.m3u8': 'application/vnd.apple.mpegurl', '.ts': 'video/mp2t', '.bin': 'application/octet-stream',
+}
+
+function sendFile(req, res, file) {
+  if (!existsSync(file) || statSync(file).isDirectory()) {
+    res.statusCode = 404
+    res.end('not found')
+    return
+  }
+  const size = statSync(file).size
+  res.setHeader('Content-Type', TYPES[extname(file)] ?? 'application/octet-stream')
+  res.setHeader('Accept-Ranges', 'bytes')
+  res.setHeader('Cache-Control', 'no-store')
+  const range = /bytes=(\d*)-(\d*)/.exec(req.headers.range ?? '')
+  if (range) {
+    const start = range[1] ? Number(range[1]) : size - Number(range[2])
+    const end = range[1] && range[2] ? Math.min(Number(range[2]), size - 1) : size - 1
+    res.statusCode = 206
+    res.setHeader('Content-Range', `bytes ${start}-${end}/${size}`)
+    res.setHeader('Content-Length', end - start + 1)
+    createReadStream(file, { start, end }).pipe(res)
+    return
+  }
+  res.setHeader('Content-Length', size)
+  createReadStream(file).pipe(res)
+}
+
+function segmentsOf(playlistFile) {
+  const text = readFileSync(playlistFile, 'utf8')
+  const lines = text.split('\n')
+  const map = lines.find((l) => l.startsWith('#EXT-X-MAP'))
+  const segs = []
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].startsWith('#EXTINF')) segs.push({ inf: lines[i], uri: lines[i + 1] })
+  }
+  return { map, segs }
+}
+
+const liveStart = new Map()
+
+// A sliding window over the VOD segments, looping: media sequence grows with wall-clock time.
+function livePlaylist(kind) {
+  const dir = kind === 'fmp4' ? 'hls-fmp4/v360' : 'hls-ts/v360'
+  const { map, segs } = segmentsOf(join(fixtures, dir, 'index.m3u8'))
+  if (!liveStart.has(kind)) liveStart.set(kind, Date.now())
+  const elapsed = (Date.now() - liveStart.get(kind)) / 1000
+  const head = Math.floor(elapsed / 2) + 3
+  const windowSize = 4
+  const first = Math.max(0, head - windowSize)
+  const out = ['#EXTM3U', '#EXT-X-VERSION:7', '#EXT-X-TARGETDURATION:2', `#EXT-X-MEDIA-SEQUENCE:${first}`]
+  // Every pass over the loop is a new discontinuity (timestamps restart).
+  out.push(`#EXT-X-DISCONTINUITY-SEQUENCE:${Math.floor(first / segs.length)}`)
+  if (map) out.push(map.replace('URI="', `URI="/fx/${dir}/`))
+  for (let sn = first; sn < head; sn++) {
+    const s = segs[sn % segs.length]
+    if (sn > first && sn % segs.length === 0) out.push('#EXT-X-DISCONTINUITY')
+    out.push(s.inf, `/fx/${dir}/${s.uri}`)
+  }
+  return out.join('\n') + '\n'
+}
+
+function discPlaylist() {
+  const a = segmentsOf(join(fixtures, 'hls-ts/v360/index.m3u8')).segs.slice(0, 3)
+  const b = segmentsOf(join(fixtures, 'hls-disc/b.m3u8')).segs
+  const out = ['#EXTM3U', '#EXT-X-VERSION:3', '#EXT-X-TARGETDURATION:2', '#EXT-X-MEDIA-SEQUENCE:0', '#EXT-X-PLAYLIST-TYPE:VOD']
+  for (const s of a) out.push(s.inf, `/fx/hls-ts/v360/${s.uri}`)
+  out.push('#EXT-X-DISCONTINUITY')
+  for (const s of b) out.push(s.inf, `/fx/hls-disc/${s.uri}`)
+  out.push('#EXT-X-ENDLIST')
+  return out.join('\n') + '\n'
+}
+
+export function mediaMiddleware(req, res, next) {
+  const url = new URL(req.url, 'http://x')
+  if (url.pathname.startsWith('/fx/')) return sendFile(req, res, join(fixtures, decodeURIComponent(url.pathname.slice(4))))
+  if (url.pathname === '/live/fmp4.m3u8' || url.pathname === '/live/ts.m3u8' || url.pathname === '/live/disc.m3u8') {
+    res.setHeader('Content-Type', 'application/vnd.apple.mpegurl')
+    res.setHeader('Cache-Control', 'no-store')
+    const kind = url.pathname.split('/').pop().replace('.m3u8', '')
+    res.end(kind === 'disc' ? discPlaylist() : livePlaylist(kind))
+    return
+  }
+  if (url.pathname === '/live/reset') {
+    liveStart.clear()
+    res.end('ok')
+    return
+  }
+  next()
+}
+
+export async function startServer(port = 5199) {
+  const { createServer } = await import('vite')
+  const vue = (await import('@vitejs/plugin-vue')).default
+  const server = await createServer({
+    root: join(here, 'app'),
+    configFile: false,
+    logLevel: 'warn',
+    plugins: [vue(), { name: 'media-fixtures', configureServer: (s) => { s.middlewares.use(mediaMiddleware) } }],
+    resolve: { alias: { '@': resolve(root, 'src') } },
+    server: { port, strictPort: true, host: '127.0.0.1' },
+  })
+  await server.listen()
+  return server
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  await startServer(Number(process.env.PORT ?? 5199))
+  console.log('media check server on http://127.0.0.1:' + (process.env.PORT ?? 5199))
+}
diff --git a/src/components/Audio/UidAudio.css b/src/components/Audio/UidAudio.css
new file mode 100644
index 0000000..faebff8
--- /dev/null
+++ b/src/components/Audio/UidAudio.css
@@ -0,0 +1,409 @@
+.uid-audio {
+  --uid-media-accent: var(--uid-audio-accent, var(--uid-accent));
+  --uid-media-played: var(--uid-audio-accent, var(--uid-accent));
+  --uid-media-thumb: var(--uid-audio-accent, var(--uid-accent));
+  --uid-media-rail: var(--uid-border-subtle, #e4e4e7);
+  --uid-media-buffered: var(--uid-border-default, #d4d4d8);
+  --uid-media-wave: var(--uid-audio-wave, var(--uid-border-hover, #a1a1aa));
+  --uid-media-hover-bg: var(--uid-surface-base, #f4f4f5);
+  --uid-media-focus: var(--uid-color-focus-ring, var(--uid-accent));
+  --uid-media-menu-bg: var(--uid-surface-overlay, #fff);
+  --uid-media-menu-color: var(--uid-text-primary, #18181b);
+  --uid-media-menu-border: var(--uid-border-subtle, #e4e4e7);
+  --uid-media-menu-divider: var(--uid-border-subtle, #e4e4e7);
+  --uid-media-tooltip-bg: var(--uid-text-primary, #18181b);
+  --uid-media-tooltip-color: var(--uid-surface-raised, #fff);
+  --uid-media-button-size: 36px;
+  container-type: inline-size;
+  display: block;
+  width: 100%;
+  padding: var(--uid-audio-padding, 12px 14px);
+  border: 1px solid var(--uid-audio-border, var(--uid-border-subtle, #e4e4e7));
+  border-radius: var(--uid-audio-radius, var(--uid-radius-lg, 12px));
+  background: var(--uid-audio-bg, var(--uid-surface-raised, #fff));
+  color: var(--uid-text-primary, #18181b);
+  font-family: var(--uid-font-family-sans, system-ui, sans-serif);
+  line-height: 1.3;
+  box-sizing: border-box;
+}
+
+:root[data-theme='dark'] .uid-audio {
+  --uid-media-wave: var(--uid-audio-wave, var(--uid-border-default, #52525b));
+}
+
+/* The dark theme's accent is light: a dark glyph keeps the play button readable. */
+:root[data-theme='dark'] .uid-audio__play {
+  color: var(--uid-audio-play-color, var(--uid-color-zinc-950, #09090b));
+}
+
+.uid-audio__media {
+  display: none;
+}
+
+.uid-audio__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas: 'lead track side';
+  align-items: center;
+  gap: 0 12px;
+  min-width: 0;
+}
+
+.uid-audio__row--meta {
+  grid-template-areas:
+    'lead meta side'
+    'lead track side';
+}
+
+.uid-audio__lead { grid-area: lead; }
+.uid-audio__meta { grid-area: meta; }
+.uid-audio__track { grid-area: track; min-width: 0; }
+.uid-audio__side { grid-area: side; }
+
+.uid-audio__lead {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+}
+
+.uid-audio__play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--uid-audio-play-size, 44px);
+  height: var(--uid-audio-play-size, 44px);
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--uid-media-accent);
+  color: var(--uid-audio-play-color, var(--uid-text-on-accent, #fff));
+  cursor: pointer;
+  transition: background-color var(--uid-duration-fast, 120ms), transform var(--uid-duration-fast, 120ms);
+}
+
+.uid-audio__play:hover:not(:disabled) {
+  background: var(--uid-audio-accent-hover, var(--uid-accent-hover, var(--uid-media-accent)));
+}
+
+.uid-audio__play:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.uid-audio__play:focus-visible {
+  outline: 2px solid var(--uid-media-focus);
+  outline-offset: 2px;
+}
+
+.uid-audio__play:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.uid-audio__play-icon {
+  margin-left: 2px;
+}
+
+.uid-audio__play .uid-audio__play-icon {
+  fill: currentColor;
+}
+
+.uid-audio__skip {
+  color: var(--uid-text-secondary, #71717a);
+}
+
+.uid-audio__skip:hover:not(:disabled) {
+  color: var(--uid-text-primary, #18181b);
+}
+
+.uid-audio__meta {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  font-size: var(--uid-font-size-sm, 14px);
+}
+
+.uid-audio__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.uid-audio__artist {
+  flex: none;
+  max-width: 40%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--uid-text-secondary, #71717a);
+}
+
+.uid-audio__artist::before {
+  content: '—';
+  margin-right: 8px;
+}
+
+.uid-audio--wave .uid-audio__scrubber {
+  --uid-media-scrubber-height: var(--uid-audio-wave-height, 40px);
+}
+
+.uid-audio__error {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 18px;
+  margin: 0;
+  color: var(--uid-danger, #e11d48);
+  font-size: var(--uid-font-size-sm, 14px);
+}
+
+.uid-audio__side {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  color: var(--uid-text-secondary, #71717a);
+}
+
+.uid-audio__time {
+  min-width: 4.5em;
+  margin-right: 4px;
+  font-size: var(--uid-font-size-xs, 12px);
+  text-align: right;
+}
+
+.uid-audio__rate {
+  width: auto;
+  min-width: 40px;
+  padding: 0 6px;
+}
+
+.uid-audio__rate-text {
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.uid-audio .uid-media-menu__panel {
+  top: calc(100% + 6px);
+  bottom: auto;
+  min-width: 140px;
+}
+
+@container (min-width: 560px) {
+  .uid-audio__volume .uid-media__volume-range {
+    width: var(--uid-media-volume-width, 72px);
+    margin: 0 8px 0 2px;
+    opacity: 1;
+  }
+}
+
+/* Narrow: title and controls on top, the scrub bar across the whole width below. */
+@container (max-width: 480px) {
+  .uid-audio__volume {
+    display: none;
+  }
+
+  .uid-audio__row {
+    gap: 0 8px;
+  }
+
+  .uid-audio__row--meta {
+    grid-template-areas:
+      'lead meta side'
+      'track track track';
+  }
+
+  .uid-audio__row--meta .uid-audio__track {
+    margin-top: 6px;
+  }
+
+  .uid-audio__meta {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .uid-audio__artist {
+    max-width: 100%;
+    font-size: var(--uid-font-size-xs, 12px);
+  }
+
+  .uid-audio__artist::before {
+    display: none;
+  }
+
+  .uid-audio__time {
+    min-width: 0;
+  }
+}
+
+/* Playlist */
+.uid-audio__list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: var(--uid-audio-list-max-height, 280px);
+  margin: 12px -6px -4px;
+  padding: 8px 0 0;
+  border-top: 1px solid var(--uid-border-subtle, #e4e4e7);
+  overflow-y: auto;
+  list-style: none;
+}
+
+.uid-audio__item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 44px;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: var(--uid-radius-md, 8px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--uid-font-size-sm, 14px);
+  text-align: left;
+  cursor: pointer;
+}
+
+.uid-audio__item:hover {
+  background: var(--uid-surface-base, #f4f4f5);
+}
+
+.uid-audio__item:focus-visible {
+  outline: 2px solid var(--uid-media-focus);
+  outline-offset: -2px;
+}
+
+.uid-audio__item--active {
+  background: var(--uid-accent-subtle, #f0fdfa);
+  color: var(--uid-accent-text, var(--uid-media-accent));
+}
+
+.uid-audio__item--active:hover {
+  background: var(--uid-accent-subtle, #f0fdfa);
+}
+
+.uid-audio__item-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 20px;
+  color: var(--uid-text-secondary, #71717a);
+  font-size: var(--uid-font-size-xs, 12px);
+  font-variant-numeric: tabular-nums;
+}
+
+.uid-audio__item--active .uid-audio__item-index {
+  color: inherit;
+}
+
+.uid-audio__item-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.uid-audio__item-title,
+.uid-audio__item-artist {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uid-audio__item--active .uid-audio__item-title {
+  font-weight: 600;
+}
+
+.uid-audio__item-artist {
+  color: var(--uid-text-secondary, #71717a);
+  font-size: var(--uid-font-size-xs, 12px);
+}
+
+.uid-audio__item-time {
+  flex: none;
+  color: var(--uid-text-secondary, #71717a);
+  font-size: var(--uid-font-size-xs, 12px);
+  font-variant-numeric: tabular-nums;
+}
+
+.uid-audio__eq {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 12px;
+}
+
+.uid-audio__eq i {
+  width: 3px;
+  height: 100%;
+  border-radius: 1px;
+  background: currentColor;
+  animation: uid-audio-eq 0.9s ease-in-out infinite;
+  transform-origin: bottom;
+}
+
+.uid-audio__eq i:nth-child(2) { animation-delay: -0.3s; }
+.uid-audio__eq i:nth-child(3) { animation-delay: -0.6s; }
+
+@keyframes uid-audio-eq {
+  0%, 100% { transform: scaleY(0.3); }
+  50% { transform: scaleY(1); }
+}
+
+/* Mini: one line for tables and lists */
+.uid-audio--mini {
+  --uid-media-scrubber-height: 24px;
+  --uid-audio-play-size: 28px;
+  --uid-audio-wave-height: 24px;
+  display: inline-block;
+  width: var(--uid-audio-mini-width, 240px);
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  vertical-align: middle;
+}
+
+.uid-audio--mini .uid-audio__row {
+  gap: 8px;
+}
+
+.uid-audio--mini .uid-audio__time {
+  min-width: 2.8em;
+  margin: 0;
+}
+
+.uid-audio--mini .uid-audio__error {
+  font-size: var(--uid-font-size-xs, 12px);
+}
+
+.uid-audio--mini .uid-audio__error span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .uid-audio--mini {
+    --uid-audio-play-size: 36px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .uid-audio__eq i {
+    animation: none;
+    transform: scaleY(0.7);
+  }
+
+  .uid-audio__play {
+    transition: none;
+  }
+}
diff --git a/src/components/Audio/UidAudio.spec.ts b/src/components/Audio/UidAudio.spec.ts
new file mode 100644
index 0000000..4034622
--- /dev/null
+++ b/src/components/Audio/UidAudio.spec.ts
@@ -0,0 +1,119 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import UidAudio from './UidAudio.vue'
+import UidLocaleProvider from '../LocaleProvider/UidLocaleProvider.vue'
+import { en } from '../../locales/en'
+import { fakeMedia } from '../Media/__testing__/fakeMedia'
+
+const proto = HTMLMediaElement.prototype as unknown as Record<string, unknown>
+const original = { canPlayType: proto.canPlayType, load: proto.load, play: proto.play, pause: proto.pause }
+
+beforeEach(() => {
+  proto.canPlayType = (type: string) => (type === 'audio/x-unknown' ? '' : 'maybe')
+  proto.load = vi.fn()
+  proto.play = vi.fn(async () => {})
+  proto.pause = vi.fn()
+})
+
+const mounted: { unmount(): void }[] = []
+
+afterEach(() => {
+  mounted.splice(0).forEach((w) => w.unmount())
+  Object.assign(proto, original)
+  document.body.innerHTML = ''
+})
+
+const tracks = [
+  { src: '/1.mp3', title: 'One', artist: 'A', duration: 61 },
+  { src: '/2.mp3', title: 'Two', artist: 'B' },
+  { src: '/3.mp3', title: 'Three' },
+]
+
+function mountAudio(props: Record<string, unknown>) {
+  const w = mount(UidLocaleProvider, {
+    props: { locale: en },
+    slots: { default: () => h(UidAudio, props) },
+    attachTo: document.body,
+  })
+  mounted.push(w)
+  return w
+}
+
+describe('UidAudio', () => {
+  it('компактная строка: play, перемотка, время, громкость, скорость', () => {
+    const w = mountAudio({ src: '/a.mp3', title: 'Song', artist: 'Band' })
+    expect(w.find('.uid-audio').attributes('role')).toBe('group')
+    expect(w.find('.uid-audio__title').text()).toBe('Song')
+    expect(w.find('[aria-label="Play"]').exists()).toBe(true)
+    expect(w.find('[role="slider"]').exists()).toBe(true)
+    expect(w.find('.uid-audio__time').text()).toBe('0:00 / 0:00')
+    expect(w.find('[aria-label="Volume"]').exists()).toBe(true)
+    expect(w.find('[aria-label="Speed"]').text()).toBe('1×')
+    expect(w.find('audio').attributes('src')).toBe('/a.mp3')
+  })
+
+  it('mini: без громкости, скорости и заголовка', () => {
+    const w = mountAudio({ src: '/a.mp3', title: 'Song', variant: 'mini' })
+    expect(w.find('.uid-audio--mini').exists()).toBe(true)
+    expect(w.find('[aria-label="Volume"]').exists()).toBe(false)
+    expect(w.find('[aria-label="Speed"]').exists()).toBe(false)
+    expect(w.find('.uid-audio__title').exists()).toBe(false)
+  })
+
+  it('peaks рисуют волну вместо полосы', () => {
+    const w = mountAudio({ src: '/a.mp3', peaks: [0.1, 0.5, 1, 0.5] })
+    expect(w.find('.uid-media-scrubber--wave').exists()).toBe(true)
+    expect(w.findAll('.uid-media-scrubber__wave path')).toHaveLength(2)
+    expect(w.find('.uid-media-scrubber__rail').exists()).toBe(false)
+  })
+
+  it('неподдерживаемый тип — понятная ошибка вместо полосы', async () => {
+    const w = mountAudio({ src: '/a.xyz', type: 'audio/x-unknown' })
+    await flushPromises()
+    expect(w.find('[role="alert"]').text()).toContain('not supported')
+  })
+
+  it('плейлист: список, следующий трек, автопереход', async () => {
+    const w = mountAudio({ tracks })
+    const audio = fakeMedia(w.find('audio').element as HTMLAudioElement)
+    expect(w.findAll('.uid-audio__item')).toHaveLength(3)
+    expect(w.find('.uid-audio__item--active').text()).toContain('One')
+    expect(w.find('.uid-audio__item-time').text()).toBe('1:01')
+    await w.find('[aria-label="Next track"]').trigger('click')
+    await flushPromises()
+    expect(w.find('.uid-audio__item--active').text()).toContain('Two')
+    expect(w.find('audio').attributes('src')).toBe('/2.mp3')
+    expect(w.findComponent(UidAudio).emitted('update:index')?.[0]).toEqual([1])
+    audio.fire('ended')
+    await flushPromises()
+    expect(w.find('.uid-audio__item--active').text()).toContain('Three')
+    expect(w.find('[aria-label="Next track"]').attributes('disabled')).toBeDefined()
+  })
+
+  it('«назад» сначала перематывает трек в начало', async () => {
+    const w = mountAudio({ tracks, index: 1 })
+    await flushPromises()
+    const audio = fakeMedia(w.find('audio').element as HTMLAudioElement)
+    audio.set({ duration: 100 })
+    audio.currentTime = 30
+    audio.fire('timeupdate')
+    await w.find('[aria-label="Previous track"]').trigger('click')
+    expect(audio.currentTime).toBe(0)
+  })
+
+  it('клик по треку в списке выбирает его', async () => {
+    const w = mountAudio({ tracks })
+    await w.findAll('.uid-audio__item')[2].trigger('click')
+    await flushPromises()
+    expect(w.find('audio').attributes('src')).toBe('/3.mp3')
+    expect(HTMLMediaElement.prototype.play).toHaveBeenCalled()
+  })
+
+  it('меню скорости', async () => {
+    const w = mountAudio({ src: '/a.mp3' })
+    await w.find('[aria-label="Speed"]').trigger('click')
+    await w.findAll('[role="menuitemradio"]').find((i) => i.text() === '2×')!.trigger('click')
+    expect((w.find('audio').element as HTMLAudioElement).playbackRate).toBe(2)
+  })
+})
diff --git a/src/components/Audio/UidAudio.stories.ts b/src/components/Audio/UidAudio.stories.ts
new file mode 100644
index 0000000..3933fff
--- /dev/null
+++ b/src/components/Audio/UidAudio.stories.ts
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import UidAudio from './UidAudio.vue'
+
+const MDN = 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio'
+const ROAR = `${MDN}/t-rex-roar.mp3`
+const PEAKS = Array.from({ length: 160 }, (_, i) => 0.25 + 0.75 * Math.abs(Math.sin(i / 9) * Math.sin(i / 23 + 1)))
+
+const meta: Meta<typeof UidAudio> = {
+  title: 'Media/Audio',
+  component: UidAudio,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['default', 'mini'] },
+    waveform: { control: 'boolean' },
+    showVolume: { control: 'boolean' },
+    showRate: { control: 'boolean' },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof UidAudio>
+
+export const Playground: Story = {
+  args: { src: ROAR, title: 'T-Rex roar', artist: 'MDN', waveform: true },
+  render: (args: Record<string, unknown>) => ({
+    components: { UidAudio },
+    setup: () => ({ args }),
+    template: '<div style="width:min(640px, 92vw)"><UidAudio v-bind="args" /></div>',
+  }),
+}
+
+export const Peaks: Story = {
+  name: 'Готовые пики',
+  render: () => ({
+    components: { UidAudio },
+    setup: () => ({ ROAR, PEAKS }),
+    template: '<div style="width:min(640px, 92vw)"><UidAudio :src="ROAR" :peaks="PEAKS" title="Precomputed peaks" /></div>',
+  }),
+}
+
+export const Mini: Story = {
+  name: 'Mini в таблице',
+  render: () => ({
+    components: { UidAudio },
+    setup: () => ({ ROAR, PEAKS }),
+    template: `
+      <table style="border-collapse:collapse;font-size:14px;width:min(560px, 92vw)">
+        <tr v-for="n in 3" :key="n" style="border-bottom:1px solid var(--uid-border-subtle)">
+          <td style="padding:8px">Call #{{ n }}</td>
+          <td style="padding:4px 8px"><UidAudio :src="ROAR" variant="mini" :peaks="n === 2 ? undefined : PEAKS" /></td>
+        </tr>
+      </table>
+    `,
+  }),
+}
+
+export const Playlist: Story = {
+  name: 'Плейлист',
+  render: () => ({
+    components: { UidAudio },
+    setup: () => ({
+      index: ref(0),
+      tracks: [
+        { src: ROAR, title: 'Roar', artist: 'T-Rex' },
+        { src: ROAR, title: 'Echo', artist: 'T-Rex' },
+        { src: ROAR, title: 'Roar again', artist: 'T-Rex', peaks: PEAKS },
+      ],
+    }),
+    template: '<div style="width:min(640px, 92vw)"><UidAudio v-model:index="index" :tracks="tracks" waveform /></div>',
+  }),
+}
+
+export const Error: Story = {
+  name: 'Ошибка',
+  render: () => ({
+    components: { UidAudio },
+    template: '<div style="width:min(640px, 92vw)"><UidAudio src="/missing.mp3" title="Missing file" /></div>',
+  }),
+}
diff --git a/src/components/Audio/UidAudio.vue b/src/components/Audio/UidAudio.vue
new file mode 100644
index 0000000..4c1f6b7
--- /dev/null
+++ b/src/components/Audio/UidAudio.vue
@@ -0,0 +1,502 @@
+<script setup lang="ts">
+import '../Media/UidMedia.css'
+import './UidAudio.css'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  CircleAlert, LoaderCircle, Pause, Play, SkipBack, SkipForward, Volume1, Volume2, VolumeX,
+} from 'lucide-vue-next'
+import UidIcon from '../../icons/UidIcon.vue'
+import UidMediaScrubber from '../Media/UidMediaScrubber.vue'
+import UidMediaMenu, { type UidMediaMenuGroup } from '../Media/UidMediaMenu.vue'
+import { useMediaController, type UidMediaErrorInfo } from '../Media/useMediaController.js'
+import { useMediaLocale } from '../Media/useMediaLocale.js'
+import { PLAYBACK_RATES, formatTime } from '../Media/mediaUtils.js'
+import { getWaveform } from '../Media/waveform.js'
+
+export interface UidAudioTrack {
+  src: string
+  type?: string
+  title?: string
+  artist?: string
+  /** Precomputed waveform peaks (0..1). */
+  peaks?: number[]
+  /** Known duration in seconds, shown in the playlist before metadata loads. */
+  duration?: number
+}
+
+export interface UidAudioProps {
+  src?: string
+  type?: string
+  title?: string
+  artist?: string
+  /** Playlist: next / previous buttons, a track list and auto-advance. */
+  tracks?: UidAudioTrack[]
+  /** `mini` — a compact inline player for tables and lists. */
+  variant?: 'default' | 'mini'
+  /** Draws the waveform as the scrub bar, decoded in the browser. */
+  waveform?: boolean
+  /** Precomputed peaks (0..1); implies the waveform without decoding. */
+  peaks?: number[]
+  /** Files larger than this are not decoded for the waveform (bytes). */
+  waveformMaxBytes?: number
+  /** Audio longer than this is not decoded for the waveform (seconds). */
+  waveformMaxDuration?: number
+  /** Plays the next playlist track when one ends. */
+  autoAdvance?: boolean
+  /** Repeats the track, or the whole playlist. */
+  loop?: boolean
+  preload?: 'none' | 'metadata' | 'auto'
+  crossorigin?: '' | 'anonymous' | 'use-credentials'
+  exclusive?: boolean
+  resumeKey?: string
+  rates?: number[]
+  hotkeys?: boolean
+  showVolume?: boolean
+  showRate?: boolean
+  /** Shows the track list in playlist mode. */
+  showPlaylist?: boolean
+}
+
+const props = withDefaults(defineProps<UidAudioProps>(), {
+  src: undefined,
+  type: undefined,
+  title: undefined,
+  artist: undefined,
+  tracks: undefined,
+  variant: 'default',
+  waveform: false,
+  peaks: undefined,
+  waveformMaxBytes: undefined,
+  waveformMaxDuration: undefined,
+  autoAdvance: true,
+  loop: false,
+  preload: 'metadata',
+  crossorigin: undefined,
+  exclusive: true,
+  resumeKey: undefined,
+  rates: () => PLAYBACK_RATES,
+  hotkeys: true,
+  showVolume: true,
+  showRate: true,
+  showPlaylist: true,
+})
+
+const index = defineModel<number>('index', { default: 0 })
+
+const emit = defineEmits<{
+  play: []
+  pause: []
+  ended: []
+  error: [error: UidMediaErrorInfo]
+  trackchange: [index: number]
+}>()
+
+const t = useMediaLocale()
+const root = ref<HTMLElement | null>(null)
+const audio = ref<HTMLAudioElement | null>(null)
+
+const ctrl = useMediaController(audio, {
+  exclusive: () => props.exclusive,
+  resumeKey: () => (props.resumeKey ? `${props.resumeKey}:${index.value}` : undefined),
+})
+const { state } = ctrl
+
+const playlist = computed(() => props.tracks ?? [])
+const isPlaylist = computed(() => playlist.value.length > 0)
+const current = computed<UidAudioTrack | null>(() => {
+  if (isPlaylist.value) return playlist.value[Math.min(Math.max(index.value, 0), playlist.value.length - 1)] ?? null
+  return props.src ? { src: props.src, type: props.type, title: props.title, artist: props.artist, peaks: props.peaks } : null
+})
+const mini = computed(() => props.variant === 'mini')
+const hasMeta = computed(() => !mini.value && !!(current.value?.title || current.value?.artist))
+
+// ---- waveform ----
+
+const wavePeaks = ref<number[] | null>(null)
+const waveWanted = computed(() => props.waveform || !!current.value?.peaks?.length)
+const visible = ref(false)
+let io: IntersectionObserver | null = null
+let waveToken = 0
+
+async function loadWave(): Promise<void> {
+  const tr = current.value
+  const token = ++waveToken
+  wavePeaks.value = tr?.peaks?.length ? tr.peaks : null
+  if (!tr || wavePeaks.value || !props.waveform || !visible.value) return
+  const result = await getWaveform(tr.src, {
+    maxBytes: props.waveformMaxBytes,
+    maxDuration: props.waveformMaxDuration,
+    fetchInit: props.crossorigin === 'use-credentials' ? { credentials: 'include' } : undefined,
+  })
+  if (token === waveToken) wavePeaks.value = result
+}
+
+watch([() => current.value?.src, () => current.value?.peaks, () => props.waveform, visible], loadWave, { immediate: true })
+
+// ---- playlist ----
+
+let playOnLoad = false
+
+function select(i: number, autoplay = true): void {
+  if (!isPlaylist.value) return
+  const n = playlist.value.length
+  const next = props.loop ? (i + n) % n : i
+  if (next < 0 || next >= n) return
+  playOnLoad = autoplay
+  if (next === index.value) {
+    ctrl.seek(0)
+    if (autoplay) ctrl.play().catch(() => {})
+    return
+  }
+  index.value = next
+}
+
+function checkType(): void {
+  const type = current.value?.type
+  if (type && audio.value && !audio.value.canPlayType(type)) ctrl.setError({ kind: 'unsupported', detail: type })
+}
+
+watch(() => current.value?.src, () => {
+  ctrl.setError(null)
+  emit('trackchange', index.value)
+  checkType()
+  if (playOnLoad && !state.error) ctrl.play().catch(() => {})
+  playOnLoad = false
+}, { flush: 'post' })
+
+watch(() => state.ended, (ended) => {
+  if (!ended) return
+  emit('ended')
+  if (isPlaylist.value && props.autoAdvance && (index.value < playlist.value.length - 1 || props.loop)) {
+    select(index.value + 1)
+  }
+})
+
+watch(() => state.playing, (p) => (p ? emit('play') : undefined))
+watch(() => state.paused, (p) => { if (p && !state.ended && state.currentTime > 0) emit('pause') })
+watch(() => state.error, (e) => { if (e) emit('error', e) })
+
+const hasPrev = computed(() => isPlaylist.value && (index.value > 0 || props.loop))
+const hasNext = computed(() => isPlaylist.value && (index.value < playlist.value.length - 1 || props.loop))
+
+function prev(): void {
+  // Like most players: "previous" first rewinds a track that has been playing for a while.
+  if (state.currentTime > 3 || !hasPrev.value) {
+    ctrl.seek(0)
+    return
+  }
+  select(index.value - 1, !state.paused)
+}
+
+function next(): void {
+  if (hasNext.value) select(index.value + 1, !state.paused || state.ended)
+}
+
+const durations = ref<Record<number, number>>({})
+watch(() => state.duration, (d) => {
+  if (d && isPlaylist.value) durations.value = { ...durations.value, [index.value]: d }
+})
+
+// ---- media session (lock screen, hardware keys) ----
+
+function updateMediaSession(): void {
+  const ms = typeof navigator !== 'undefined' ? navigator.mediaSession : undefined
+  if (!ms || !state.playing || typeof MediaMetadata === 'undefined') return
+  const tr = current.value
+  ms.metadata = new MediaMetadata({ title: tr?.title ?? '', artist: tr?.artist ?? '' })
+  const set = (action: MediaSessionAction, fn: MediaSessionActionHandler | null): void => {
+    try {
+      ms.setActionHandler(action, fn)
+    } catch {
+      // Unsupported action in this browser.
+    }
+  }
+  set('play', () => ctrl.play().catch(() => {}))
+  set('pause', () => ctrl.pause())
+  set('seekto', (d) => d.seekTime !== undefined && ctrl.seek(d.seekTime))
+  set('previoustrack', isPlaylist.value ? prev : null)
+  set('nexttrack', isPlaylist.value ? next : null)
+}
+
+watch(() => [state.playing, current.value?.src], updateMediaSession)
+
+// ---- UI ----
+
+const volumeIcon = computed(() => (state.muted || state.volume === 0 ? VolumeX : state.volume < 0.5 ? Volume1 : Volume2))
+const loading = computed(() => !state.error && state.waiting && !state.paused)
+const timeText = computed(() => {
+  if (mini.value) {
+    return state.playing || state.currentTime > 0 ? formatTime(state.currentTime) : formatTime(state.duration || current.value?.duration || 0)
+  }
+  return `${formatTime(state.currentTime)} / ${formatTime(state.duration || current.value?.duration || 0)}`
+})
+const errorMessage = computed(() => (state.error ? t.value.errors[state.error.kind] ?? t.value.errors.unknown : ''))
+
+const rateGroup = computed<UidMediaMenuGroup>(() => ({
+  id: 'rate',
+  label: t.value.speed,
+  value: state.rate,
+  options: props.rates.map((r) => ({ value: r, label: r === 1 ? t.value.normalSpeed : `${r}×` })),
+}))
+
+function onVolumeInput(e: Event): void {
+  ctrl.setVolume(Number((e.target as HTMLInputElement).value))
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (!props.hotkeys) return
+  const target = e.target as HTMLElement
+  const tag = target.tagName
+  if ((tag === 'BUTTON' || tag === 'A') && (e.key === ' ' || e.key === 'Enter')) return
+  if (tag === 'INPUT' && e.key.startsWith('Arrow')) return
+  if (e.key.toLowerCase() === 'n' && e.shiftKey) {
+    next()
+    e.preventDefault()
+    return
+  }
+  if (e.key.toLowerCase() === 'p' && e.shiftKey) {
+    prev()
+    e.preventDefault()
+    return
+  }
+  if (ctrl.handleKey(e)) e.preventDefault()
+}
+
+function playTrack(i: number): void {
+  if (i === index.value) ctrl.toggle()
+  else select(i)
+}
+
+onMounted(() => {
+  checkType()
+  if (typeof IntersectionObserver === 'undefined' || !root.value) {
+    visible.value = true
+    return
+  }
+  io = new IntersectionObserver((entries) => {
+    if (entries.some((e) => e.isIntersecting)) {
+      visible.value = true
+      io?.disconnect()
+      io = null
+    }
+  }, { rootMargin: '200px' })
+  io.observe(root.value)
+})
+
+onBeforeUnmount(() => {
+  io?.disconnect()
+  waveToken++
+})
+
+defineExpose({
+  play: ctrl.play,
+  pause: ctrl.pause,
+  toggle: ctrl.toggle,
+  seek: ctrl.seek,
+  next,
+  prev,
+  state,
+  media: audio,
+})
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="uid-audio"
+    :class="{
+      'uid-audio--mini': mini,
+      'uid-audio--wave': waveWanted,
+      'uid-audio--playing': state.playing,
+      'uid-audio--playlist': isPlaylist && !mini,
+      'uid-audio--error': !!state.error,
+    }"
+    role="group"
+    :aria-label="current?.title ?? t.play"
+    @keydown="onKeydown"
+  >
+    <audio
+      ref="audio"
+      class="uid-audio__media"
+      :preload="preload"
+      :loop="loop && !isPlaylist"
+      :crossorigin="crossorigin"
+      :src="current?.src"
+    />
+
+    <div
+      class="uid-audio__row"
+      :class="{ 'uid-audio__row--meta': hasMeta }"
+    >
+      <div class="uid-audio__lead">
+        <button
+          v-if="isPlaylist && !mini"
+          type="button"
+          class="uid-media__button uid-audio__skip"
+          :aria-label="t.prev"
+          :title="t.prev"
+          @click="prev"
+        >
+          <UidIcon
+            :icon="SkipBack"
+            :size="18"
+          />
+        </button>
+        <button
+          type="button"
+          class="uid-audio__play"
+          :aria-label="state.paused ? t.play : t.pause"
+          :title="state.paused ? t.play : t.pause"
+          :disabled="!current"
+          @click="ctrl.toggle"
+        >
+          <UidIcon
+            v-if="loading"
+            :icon="LoaderCircle"
+            :size="mini ? 16 : 20"
+            class="uid-media__spin"
+          />
+          <UidIcon
+            v-else
+            :icon="state.paused ? Play : Pause"
+            :size="mini ? 16 : 20"
+            :class="['uid-media__fill', { 'uid-audio__play-icon': state.paused }]"
+          />
+        </button>
+        <button
+          v-if="isPlaylist && !mini"
+          type="button"
+          class="uid-media__button uid-audio__skip"
+          :aria-label="t.next"
+          :title="t.next"
+          :disabled="!hasNext"
+          @click="next"
+        >
+          <UidIcon
+            :icon="SkipForward"
+            :size="18"
+          />
+        </button>
+      </div>
+
+      <div
+        v-if="hasMeta"
+        class="uid-audio__meta"
+      >
+        <span
+          v-if="current?.title"
+          class="uid-audio__title"
+        >{{ current.title }}</span>
+        <span
+          v-if="current?.artist"
+          class="uid-audio__artist"
+        >{{ current.artist }}</span>
+      </div>
+
+      <div class="uid-audio__track">
+        <p
+          v-if="state.error"
+          class="uid-audio__error"
+          role="alert"
+        >
+          <UidIcon
+            :icon="CircleAlert"
+            :size="16"
+          />
+          <span>{{ errorMessage }}</span>
+        </p>
+        <UidMediaScrubber
+          v-else
+          class="uid-audio__scrubber"
+          :current-time="state.currentTime"
+          :duration="state.duration || current?.duration || 0"
+          :buffered="state.buffered"
+          :peaks="waveWanted ? wavePeaks : null"
+          :label="t.seek"
+          :value-text="t.timeOf"
+          @seek="ctrl.seek"
+        />
+      </div>
+
+      <div class="uid-audio__side">
+        <span class="uid-media__time uid-audio__time">{{ timeText }}</span>
+        <div
+          v-if="showVolume && !mini"
+          class="uid-media__volume uid-audio__volume"
+        >
+          <button
+            type="button"
+            class="uid-media__button"
+            :aria-label="state.muted ? t.unmute : t.mute"
+            :title="state.muted ? t.unmute : t.mute"
+            @click="ctrl.toggleMute"
+          >
+            <UidIcon
+              :icon="volumeIcon"
+              :size="18"
+            />
+          </button>
+          <input
+            class="uid-media__volume-range"
+            type="range"
+            min="0"
+            max="1"
+            step="0.05"
+            :value="state.muted ? 0 : state.volume"
+            :aria-label="t.volume"
+            :aria-valuetext="`${Math.round((state.muted ? 0 : state.volume) * 100)}%`"
+            :style="{ '--_fill': `${(state.muted ? 0 : state.volume) * 100}%` }"
+            @input="onVolumeInput"
+          >
+        </div>
+        <UidMediaMenu
+          v-if="showRate && !mini"
+          :label="t.speed"
+          :groups="[rateGroup]"
+          button-class="uid-audio__rate"
+          @select="(_g, v) => ctrl.setRate(Number(v))"
+        >
+          <span class="uid-audio__rate-text">{{ state.rate }}×</span>
+        </UidMediaMenu>
+      </div>
+    </div>
+
+    <ol
+      v-if="isPlaylist && !mini && showPlaylist"
+      class="uid-audio__list"
+      :aria-label="t.playlist"
+    >
+      <li
+        v-for="(tr, i) in playlist"
+        :key="`${i}:${tr.src}`"
+      >
+        <button
+          type="button"
+          class="uid-audio__item"
+          :class="{ 'uid-audio__item--active': i === index }"
+          :aria-current="i === index ? 'true' : undefined"
+          @click="playTrack(i)"
+        >
+          <span
+            class="uid-audio__item-index"
+            aria-hidden="true"
+          >
+            <span
+              v-if="i === index && state.playing"
+              class="uid-audio__eq"
+            ><i /><i /><i /></span>
+            <template v-else>{{ i + 1 }}</template>
+          </span>
+          <span class="uid-audio__item-text">
+            <span class="uid-audio__item-title">{{ tr.title ?? tr.src.split('/').pop() }}</span>
+            <span
+              v-if="tr.artist"
+              class="uid-audio__item-artist"
+            >{{ tr.artist }}</span>
+          </span>
+          <span class="uid-audio__item-time">{{ durations[i] || tr.duration ? formatTime(durations[i] || tr.duration || 0) : '' }}</span>
+        </button>
+      </li>
+    </ol>
+  </div>
+</template>
diff --git a/src/components/Audio/index.ts b/src/components/Audio/index.ts
new file mode 100644
index 0000000..27f8407
--- /dev/null
+++ b/src/components/Audio/index.ts
@@ -0,0 +1,2 @@
+export { default as UidAudio } from './UidAudio.vue'
+export type { UidAudioProps, UidAudioTrack } from './UidAudio.vue'
diff --git a/src/components/Media/UidMedia.css b/src/components/Media/UidMedia.css
new file mode 100644
index 0000000..66a9a72
--- /dev/null
+++ b/src/components/Media/UidMedia.css
@@ -0,0 +1,509 @@
+/* Shared pieces of UidVideo and UidAudio: buttons, scrub bar, menus, volume. */
+
+.uid-media__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--uid-media-button-size, 40px);
+  height: var(--uid-media-button-size, 40px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--uid-radius-md, 8px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color var(--uid-duration-fast, 120ms), color var(--uid-duration-fast, 120ms);
+}
+
+.uid-media__button:hover {
+  background: var(--uid-media-hover-bg, rgb(255 255 255 / 0.16));
+}
+
+.uid-media__button:focus-visible,
+.uid-media-menu__item:focus-visible {
+  outline: 2px solid var(--uid-media-focus, var(--uid-color-focus-ring, currentColor));
+  outline-offset: -2px;
+}
+
+.uid-media__button--active {
+  background: var(--uid-media-hover-bg, rgb(255 255 255 / 0.16));
+}
+
+.uid-media__button--on::after {
+  content: '';
+  position: absolute;
+  left: 30%;
+  right: 30%;
+  bottom: 6px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--uid-media-accent, var(--uid-accent));
+}
+
+.uid-media__button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.uid-media__badge {
+  position: absolute;
+  top: 3px;
+  right: 0;
+  padding: 0 3px;
+  border-radius: 4px;
+  background: var(--uid-media-accent, var(--uid-accent));
+  color: var(--uid-media-accent-contrast, #fff);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 13px;
+  pointer-events: none;
+}
+
+.uid-media__fill {
+  fill: currentColor;
+}
+
+.uid-media__time {
+  flex: none;
+  font-size: var(--uid-font-size-sm, 14px);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.uid-media__spin {
+  animation: uid-media-spin 0.9s linear infinite;
+}
+
+@keyframes uid-media-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Volume: a button, and a range that unfolds on hover / focus. */
+.uid-media__volume {
+  display: flex;
+  align-items: center;
+  flex: none;
+}
+
+.uid-media__volume-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 0;
+  height: 4px;
+  margin: 0;
+  border-radius: 2px;
+  opacity: 0;
+  background: linear-gradient(
+    to right,
+    var(--uid-media-played, var(--uid-accent)) 0 var(--_fill, 0%),
+    var(--uid-media-rail, rgb(255 255 255 / 0.3)) var(--_fill, 0%) 100%
+  );
+  cursor: pointer;
+  transition: width var(--uid-duration-base, 200ms) var(--uid-ease-out, ease-out), opacity var(--uid-duration-base, 200ms), margin var(--uid-duration-base, 200ms);
+}
+
+.uid-media__volume:hover .uid-media__volume-range,
+.uid-media__volume:focus-within .uid-media__volume-range,
+.uid-media__volume--open .uid-media__volume-range {
+  width: var(--uid-media-volume-width, 72px);
+  margin: 0 10px 0 4px;
+  opacity: 1;
+}
+
+.uid-media__volume-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--uid-media-thumb, var(--uid-media-played, var(--uid-accent)));
+}
+
+.uid-media__volume-range::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--uid-media-thumb, var(--uid-media-played, var(--uid-accent)));
+}
+
+.uid-media__volume-range:focus-visible {
+  outline: 2px solid var(--uid-media-focus, var(--uid-color-focus-ring, currentColor));
+  outline-offset: 4px;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .uid-media__volume-range {
+    display: none;
+  }
+
+  .uid-media__button {
+    width: var(--uid-media-button-size-touch, 44px);
+    height: var(--uid-media-button-size-touch, 44px);
+  }
+}
+
+/* Scrub bar */
+.uid-media-scrubber {
+  --_rail-h: var(--uid-media-rail-height, 4px);
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: var(--uid-media-scrubber-height, 18px);
+  cursor: pointer;
+  touch-action: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.uid-media-scrubber--disabled {
+  cursor: default;
+}
+
+.uid-media-scrubber__rail {
+  position: relative;
+  width: 100%;
+  height: var(--_rail-h);
+  border-radius: var(--_rail-h);
+  background: var(--uid-media-rail, rgb(255 255 255 / 0.3));
+  overflow: hidden;
+  transition: height var(--uid-duration-fast, 120ms);
+}
+
+.uid-media-scrubber:hover .uid-media-scrubber__rail,
+.uid-media-scrubber:focus-visible .uid-media-scrubber__rail,
+.uid-media-scrubber--dragging .uid-media-scrubber__rail {
+  height: calc(var(--_rail-h) + 2px);
+}
+
+.uid-media-scrubber__buffered {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--uid-media-buffered, rgb(255 255 255 / 0.45));
+}
+
+.uid-media-scrubber__played {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--_played, 0%);
+  background: var(--uid-media-played, var(--uid-accent));
+}
+
+.uid-media-scrubber__handle {
+  position: absolute;
+  top: 50%;
+  left: var(--_played, 0%);
+  width: 14px;
+  height: 14px;
+  margin: -7px 0 0 -7px;
+  border-radius: 50%;
+  background: var(--uid-media-thumb, var(--uid-media-played, var(--uid-accent)));
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
+  transform: scale(0);
+  transition: transform var(--uid-duration-fast, 120ms);
+  pointer-events: none;
+}
+
+.uid-media-scrubber:hover .uid-media-scrubber__handle,
+.uid-media-scrubber--dragging .uid-media-scrubber__handle,
+.uid-media-scrubber:focus-visible .uid-media-scrubber__handle {
+  transform: scale(1);
+}
+
+.uid-media-scrubber:focus-visible .uid-media-scrubber__handle {
+  box-shadow: 0 0 0 3px var(--uid-media-focus, var(--uid-color-focus-ring, currentColor));
+}
+
+.uid-media-scrubber--disabled .uid-media-scrubber__handle {
+  display: none;
+}
+
+/* Waveform variant: the bars are the scrub bar. */
+.uid-media-scrubber--wave {
+  height: var(--uid-media-wave-height, 40px);
+}
+
+.uid-media-scrubber__wave {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.uid-media-scrubber__wave svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.uid-media-scrubber__wave-base {
+  fill: var(--uid-media-wave, var(--uid-border-default, #c4c4c8));
+}
+
+.uid-media-scrubber__wave-played {
+  fill: var(--uid-media-played, var(--uid-accent));
+  clip-path: inset(0 calc(100% - var(--_played, 0%)) 0 0);
+}
+
+.uid-media-scrubber--wave:focus-visible {
+  outline: 2px solid var(--uid-media-focus, var(--uid-color-focus-ring, currentColor));
+  outline-offset: 2px;
+}
+
+.uid-media-scrubber__hover-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--uid-media-hover-line, var(--uid-text-secondary, #888));
+  pointer-events: none;
+}
+
+.uid-media-scrubber__preview {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.uid-media-scrubber__thumb {
+  border: 2px solid rgb(255 255 255 / 0.9);
+  border-radius: var(--uid-radius-sm, 4px);
+  background-repeat: no-repeat;
+  background-color: #000;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
+}
+
+.uid-media-scrubber__chapter {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 600;
+  color: var(--uid-media-tooltip-color, #fff);
+  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
+}
+
+.uid-media-scrubber__time {
+  padding: 2px 6px;
+  border-radius: var(--uid-radius-sm, 4px);
+  background: var(--uid-media-tooltip-bg, rgb(0 0 0 / 0.75));
+  color: var(--uid-media-tooltip-color, #fff);
+  font-size: var(--uid-font-size-xs, 12px);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* Menus (rendered inside the player so they work in full screen) */
+.uid-media-menu {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+
+.uid-media-menu__panel {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  z-index: 5;
+  min-width: 168px;
+  max-height: var(--uid-media-menu-max-height, 280px);
+  overflow-y: auto;
+  padding: 6px;
+  border-radius: var(--uid-radius-lg, 12px);
+  background: var(--uid-media-menu-bg, rgb(28 28 30 / 0.94));
+  color: var(--uid-media-menu-color, #fff);
+  box-shadow: var(--uid-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.3));
+  border: 1px solid var(--uid-media-menu-border, transparent);
+  font-size: var(--uid-font-size-sm, 14px);
+  animation: uid-media-menu-in var(--uid-duration-fast, 120ms) var(--uid-ease-out, ease-out);
+}
+
+.uid-media-menu__panel--sheet {
+  position: fixed;
+  bottom: auto;
+  right: auto;
+  z-index: var(--uid-z-popover, 1000);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0 10px 8px;
+  overflow-y: auto;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__group {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+  gap: 4px;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__group + .uid-media-menu__group {
+  margin-top: 0;
+  padding-top: 2px;
+  border-top: 0;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__heading {
+  grid-column: 1 / -1;
+  padding: 0 2px;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__item {
+  justify-content: center;
+  min-height: 32px;
+  padding: 2px 6px;
+  border: 1px solid var(--uid-media-menu-divider, rgb(255 255 255 / 0.14));
+  text-align: center;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__check,
+.uid-media-menu__panel--sheet .uid-media-menu__hint {
+  display: none;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__label {
+  flex: none;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__item[aria-checked='true'] {
+  border-color: var(--uid-media-accent, var(--uid-accent));
+  background: color-mix(in srgb, var(--uid-media-accent, var(--uid-accent)) 22%, transparent);
+}
+
+.uid-media-menu__sheet-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 34px;
+  font-weight: 600;
+}
+
+.uid-media-menu__close {
+  --uid-media-button-size: 32px;
+  --uid-media-button-size-touch: 36px;
+  margin-right: -6px;
+}
+
+.uid-media-menu__panel--end {
+  right: 0;
+}
+
+.uid-media-menu__panel--start {
+  left: 0;
+}
+
+@keyframes uid-media-menu-in {
+  from { opacity: 0; transform: translateY(4px); }
+}
+
+.uid-media-menu__group + .uid-media-menu__group {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid var(--uid-media-menu-divider, rgb(255 255 255 / 0.14));
+}
+
+/* Several groups (speed + quality) sit side by side, so nothing hides below a scroll. */
+.uid-media-menu__panel:not(.uid-media-menu__panel--sheet):has(.uid-media-menu__group + .uid-media-menu__group) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(136px, auto);
+}
+
+.uid-media-menu__panel:not(.uid-media-menu__panel--sheet) .uid-media-menu__group + .uid-media-menu__group {
+  margin: 0 0 0 6px;
+  padding: 0 0 0 6px;
+  border-top: 0;
+  border-left: 1px solid var(--uid-media-menu-divider, rgb(255 255 255 / 0.14));
+}
+
+.uid-media-menu__heading {
+  padding: 4px 10px 2px;
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.65;
+}
+
+.uid-media-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  padding: 4px 10px 4px 8px;
+  border: 0;
+  border-radius: var(--uid-radius-md, 8px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.uid-media-menu__item:hover,
+.uid-media-menu__item:focus-visible {
+  background: var(--uid-media-hover-bg, rgb(255 255 255 / 0.12));
+}
+
+.uid-media-menu__check {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  opacity: 0.45;
+}
+
+.uid-media-menu__item[aria-checked='true'] .uid-media-menu__check {
+  border-color: var(--uid-media-accent, var(--uid-accent));
+  background: radial-gradient(circle, var(--uid-media-accent, var(--uid-accent)) 0 3.5px, transparent 4px);
+  opacity: 1;
+}
+
+.uid-media-menu__item[aria-checked='true'] {
+  font-weight: 600;
+}
+
+.uid-media-menu__label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.uid-media-menu__hint {
+  opacity: 0.6;
+  font-size: var(--uid-font-size-xs, 12px);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .uid-media-menu__item {
+    min-height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .uid-media__spin {
+    animation-duration: 2.4s;
+  }
+
+  .uid-media__volume-range,
+  .uid-media-scrubber__rail,
+  .uid-media-scrubber__handle,
+  .uid-media-menu__panel {
+    transition: none;
+    animation: none;
+  }
+}
diff --git a/src/components/Media/UidMediaMenu.vue b/src/components/Media/UidMediaMenu.vue
new file mode 100644
index 0000000..873843c
--- /dev/null
+++ b/src/components/Media/UidMediaMenu.vue
@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'
+
+export interface UidMediaMenuOption {
+  value: string | number
+  label: string
+  hint?: string
+}
+
+export interface UidMediaMenuGroup {
+  id: string
+  label?: string
+  value: string | number | null
+  options: UidMediaMenuOption[]
+}
+
+const props = withDefaults(defineProps<{
+  label: string
+  groups: UidMediaMenuGroup[]
+  align?: 'start' | 'end'
+  buttonClass?: string
+  closeLabel?: string
+}>(), {
+  align: 'end',
+  buttonClass: '',
+  closeLabel: 'Close',
+})
+
+const emit = defineEmits<{
+  select: [group: string, value: string | number]
+  'update:open': [open: boolean]
+}>()
+
+defineSlots<{ default(): unknown }>()
+
+const open = ref(false)
+const root = ref<HTMLElement | null>(null)
+const button = ref<HTMLButtonElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
+const menuId = useId()
+
+watch(open, (v) => emit('update:open', v))
+
+function items(): HTMLElement[] {
+  return Array.from(panel.value?.querySelectorAll<HTMLElement>('[role="menuitemradio"]') ?? [])
+}
+
+async function show(focus: 'checked' | 'first' | 'last' = 'checked'): Promise<void> {
+  open.value = true
+  document.addEventListener('pointerdown', onOutside, true)
+  await nextTick()
+  fitPanel()
+  const list = items()
+  const target = focus === 'last'
+    ? list[list.length - 1]
+    : focus === 'first' ? list[0] : (list.find((el) => el.getAttribute('aria-checked') === 'true') ?? list[0])
+  target?.focus()
+}
+
+const sheet = ref(false)
+
+// In a small player a long menu becomes a sheet over the whole player instead of a scrolling popup.
+function fitPanel(): void {
+  const el = panel.value
+  const host = root.value?.closest<HTMLElement>('[data-media-menu-bounds]')
+  sheet.value = false
+  if (!el || !host || !button.value) return
+  const hostRect = host.getBoundingClientRect()
+  const btn = button.value.getBoundingClientRect()
+  const up = getComputedStyle(el).bottom !== 'auto'
+  const space = up ? btn.top - hostRect.top - 12 : hostRect.bottom - btn.bottom - 12
+  if (el.scrollHeight <= space) return
+  if (space >= 200) {
+    el.style.maxHeight = `${Math.floor(space)}px`
+    return
+  }
+  sheet.value = true
+  Object.assign(el.style, {
+    top: `${hostRect.top + 8}px`,
+    left: `${hostRect.left + 8}px`,
+    width: `${hostRect.width - 16}px`,
+    height: `${hostRect.height - 16}px`,
+    maxHeight: 'none',
+  })
+}
+
+function hide(returnFocus = true): void {
+  if (!open.value) return
+  open.value = false
+  sheet.value = false
+  document.removeEventListener('pointerdown', onOutside, true)
+  if (returnFocus) button.value?.focus()
+}
+
+function onOutside(e: Event): void {
+  if (root.value && !root.value.contains(e.target as Node)) hide(false)
+}
+
+onBeforeUnmount(() => document.removeEventListener('pointerdown', onOutside, true))
+
+function onButtonKeydown(e: KeyboardEvent): void {
+  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+    e.preventDefault()
+    e.stopPropagation()
+    show(e.key === 'ArrowUp' ? 'last' : 'first')
+  }
+}
+
+function onPanelKeydown(e: KeyboardEvent): void {
+  const list = items()
+  const i = list.indexOf(document.activeElement as HTMLElement)
+  let next: HTMLElement | undefined
+  switch (e.key) {
+    case 'ArrowDown':
+      next = list[(i + 1) % list.length]
+      break
+    case 'ArrowUp':
+      next = list[(i - 1 + list.length) % list.length]
+      break
+    case 'Home':
+      next = list[0]
+      break
+    case 'End':
+      next = list[list.length - 1]
+      break
+    case 'Escape':
+      hide()
+      break
+    case 'Tab':
+      hide(false)
+      return
+    case 'Enter':
+    case ' ':
+      // Native button activation picks the item; just keep the key from the player hotkeys.
+      e.stopPropagation()
+      return
+    default:
+      e.stopPropagation()
+      return
+  }
+  e.preventDefault()
+  e.stopPropagation()
+  next?.focus()
+}
+
+function choose(group: string, value: string | number): void {
+  emit('select', group, value)
+  hide()
+}
+
+defineExpose({ show, hide, open })
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="uid-media-menu"
+  >
+    <button
+      ref="button"
+      type="button"
+      class="uid-media__button"
+      :class="[buttonClass, { 'uid-media__button--active': open }]"
+      :aria-label="label"
+      aria-haspopup="menu"
+      :aria-expanded="open"
+      :aria-controls="open ? menuId : undefined"
+      :title="label"
+      @click="open ? hide() : show()"
+      @keydown="onButtonKeydown"
+    >
+      <slot />
+    </button>
+    <div
+      v-if="open"
+      :id="menuId"
+      ref="panel"
+      class="uid-media-menu__panel"
+      :class="[`uid-media-menu__panel--${align}`, { 'uid-media-menu__panel--sheet': sheet }]"
+      role="menu"
+      :aria-label="label"
+      @keydown="onPanelKeydown"
+    >
+      <div
+        v-if="sheet"
+        class="uid-media-menu__sheet-head"
+      >
+        <span>{{ label }}</span>
+        <button
+          type="button"
+          class="uid-media__button uid-media-menu__close"
+          :aria-label="closeLabel"
+          @click="hide()"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="20"
+            height="20"
+            aria-hidden="true"
+          ><path
+            d="M6 6l12 12M18 6L6 18"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          /></svg>
+        </button>
+      </div>
+      <div
+        v-for="g in props.groups"
+        :key="g.id"
+        class="uid-media-menu__group"
+        role="group"
+        :aria-label="g.label"
+      >
+        <div
+          v-if="g.label"
+          class="uid-media-menu__heading"
+          aria-hidden="true"
+        >
+          {{ g.label }}
+        </div>
+        <button
+          v-for="o in g.options"
+          :key="o.value"
+          type="button"
+          class="uid-media-menu__item"
+          role="menuitemradio"
+          tabindex="-1"
+          :aria-checked="o.value === g.value"
+          @click="choose(g.id, o.value)"
+        >
+          <span
+            class="uid-media-menu__check"
+            aria-hidden="true"
+          />
+          <span class="uid-media-menu__label">{{ o.label }}</span>
+          <span
+            v-if="o.hint"
+            class="uid-media-menu__hint"
+          >{{ o.hint }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Media/UidMediaScrubber.vue b/src/components/Media/UidMediaScrubber.vue
new file mode 100644
index 0000000..2c6f7d1
--- /dev/null
+++ b/src/components/Media/UidMediaScrubber.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  clamp, cueAt, formatTime,
+  type UidMediaCue, type UidMediaRange, type UidMediaThumbnail,
+} from './mediaUtils.js'
+import { peaksToPath, resamplePeaks } from './waveform.js'
+
+const props = withDefaults(defineProps<{
+  currentTime: number
+  duration: number
+  buffered?: UidMediaRange[]
+  chapters?: UidMediaCue[]
+  peaks?: number[] | null
+  thumbnailAt?: (time: number) => UidMediaThumbnail | null
+  label: string
+  valueText: (current: string, total: string) => string
+  disabled?: boolean
+  step?: number
+}>(), {
+  buffered: () => [],
+  chapters: () => [],
+  peaks: null,
+  thumbnailAt: undefined,
+  disabled: false,
+  step: 5,
+})
+
+const emit = defineEmits<{
+  seek: [time: number]
+  scrubstart: []
+  scrubend: []
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const width = ref(0)
+const hoverX = ref<number | null>(null)
+const dragTime = ref<number | null>(null)
+let ro: ResizeObserver | null = null
+let pendingSeek: number | null = null
+let raf = 0
+
+onMounted(() => {
+  if (!root.value) return
+  width.value = root.value.clientWidth
+  if (typeof ResizeObserver !== 'undefined') {
+    ro = new ResizeObserver(() => { width.value = root.value?.clientWidth ?? 0 })
+    ro.observe(root.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  if (raf) cancelAnimationFrame(raf)
+})
+
+const hasDuration = computed(() => props.duration > 0 && Number.isFinite(props.duration))
+const shownTime = computed(() => dragTime.value ?? props.currentTime)
+const pct = (t: number): number => (hasDuration.value ? clamp((t / props.duration) * 100, 0, 100) : 0)
+
+const playedPct = computed(() => pct(shownTime.value))
+
+const bufferedSegments = computed(() =>
+  props.buffered.map(([s, e]) => ({ left: pct(s), width: Math.max(0, pct(e) - pct(s)) })),
+)
+
+const chapterMask = computed(() => {
+  if (!hasDuration.value || props.chapters.length < 2) return undefined
+  const stops: string[] = []
+  for (const c of props.chapters.slice(1)) {
+    const p = pct(c.start)
+    if (p <= 0 || p >= 100) continue
+    stops.push(`#000 calc(${p}% - 1.5px)`, `transparent calc(${p}% - 1.5px)`, `transparent calc(${p}% + 1.5px)`, `#000 calc(${p}% + 1.5px)`)
+  }
+  if (!stops.length) return undefined
+  const mask = `linear-gradient(to right, #000 0, ${stops.join(', ')}, #000 100%)`
+  return { maskImage: mask, WebkitMaskImage: mask }
+})
+
+const barCount = computed(() => Math.max(16, Math.floor((width.value || 300) / 3)))
+const waveBars = computed(() => (props.peaks?.length ? resamplePeaks(props.peaks, barCount.value) : null))
+const wavePath = computed(() => (waveBars.value ? peaksToPath(waveBars.value) : ''))
+const waveViewBox = computed(() => `0 0 ${(waveBars.value?.length ?? 0) * 3 - 1} 100`)
+
+function timeAtClientX(clientX: number): number {
+  const el = root.value
+  if (!el || !hasDuration.value) return 0
+  const rect = el.getBoundingClientRect()
+  const ratio = rect.width ? clamp((clientX - rect.left) / rect.width, 0, 1) : 0
+  return ratio * props.duration
+}
+
+const hoverTime = computed(() => {
+  if (hoverX.value === null || !hasDuration.value || !width.value) return null
+  return clamp(hoverX.value / width.value, 0, 1) * props.duration
+})
+
+const previewTime = computed(() => dragTime.value ?? hoverTime.value)
+const previewChapter = computed(() =>
+  previewTime.value === null ? undefined : cueAt(props.chapters, previewTime.value)?.text,
+)
+const previewThumb = computed(() =>
+  previewTime.value === null || !props.thumbnailAt ? null : props.thumbnailAt(previewTime.value),
+)
+
+const previewStyle = computed(() => {
+  if (previewTime.value === null) return undefined
+  const x = (pct(previewTime.value) / 100) * width.value
+  const half = previewThumb.value?.w ? previewThumb.value.w / 2 : 32
+  return { left: `${clamp(x, Math.min(half, width.value / 2), Math.max(width.value - half, width.value / 2))}px` }
+})
+
+const thumbStyle = computed(() => {
+  const t = previewThumb.value
+  if (!t) return undefined
+  if (!t.w) return { backgroundImage: `url("${t.url}")`, backgroundSize: 'cover', width: '160px', height: '90px' }
+  return {
+    backgroundImage: `url("${t.url}")`,
+    backgroundPosition: `-${t.x}px -${t.y}px`,
+    width: `${t.w}px`,
+    height: `${t.h}px`,
+  }
+})
+
+function flushSeek(): void {
+  raf = 0
+  if (pendingSeek !== null) emit('seek', pendingSeek)
+  pendingSeek = null
+}
+
+function queueSeek(t: number): void {
+  pendingSeek = t
+  if (!raf) raf = requestAnimationFrame(flushSeek)
+}
+
+function onPointerDown(e: PointerEvent): void {
+  if (props.disabled || !hasDuration.value || e.button !== 0) return
+  root.value?.setPointerCapture?.(e.pointerId)
+  dragTime.value = timeAtClientX(e.clientX)
+  emit('scrubstart')
+  queueSeek(dragTime.value)
+}
+
+function onPointerMove(e: PointerEvent): void {
+  const rect = root.value?.getBoundingClientRect()
+  if (rect) hoverX.value = e.clientX - rect.left
+  if (dragTime.value !== null) {
+    dragTime.value = timeAtClientX(e.clientX)
+    queueSeek(dragTime.value)
+  }
+}
+
+function onPointerUp(e: PointerEvent): void {
+  if (dragTime.value === null) return
+  root.value?.releasePointerCapture?.(e.pointerId)
+  const t = timeAtClientX(e.clientX)
+  if (raf) cancelAnimationFrame(raf)
+  raf = 0
+  pendingSeek = null
+  emit('seek', t)
+  dragTime.value = null
+  emit('scrubend')
+  if (e.pointerType !== 'mouse') hoverX.value = null
+}
+
+function onPointerLeave(): void {
+  if (dragTime.value === null) hoverX.value = null
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (props.disabled || !hasDuration.value) return
+  const big = props.duration / 10
+  let next: number | null = null
+  switch (e.key) {
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      next = props.currentTime - props.step
+      break
+    case 'ArrowRight':
+    case 'ArrowUp':
+      next = props.currentTime + props.step
+      break
+    case 'PageDown':
+      next = props.currentTime - big
+      break
+    case 'PageUp':
+      next = props.currentTime + big
+      break
+    case 'Home':
+      next = 0
+      break
+    case 'End':
+      next = props.duration
+      break
+  }
+  if (next === null) return
+  e.preventDefault()
+  e.stopPropagation()
+  emit('seek', clamp(next, 0, props.duration))
+}
+
+const ariaValueText = computed(() =>
+  props.valueText(formatTime(props.currentTime), formatTime(props.duration)),
+)
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="uid-media-scrubber"
+    :class="{
+      'uid-media-scrubber--wave': !!waveBars,
+      'uid-media-scrubber--dragging': dragTime !== null,
+      'uid-media-scrubber--disabled': disabled || !hasDuration,
+    }"
+    role="slider"
+    :tabindex="disabled ? -1 : 0"
+    :aria-label="label"
+    :aria-valuemin="0"
+    :aria-valuemax="Math.floor(duration || 0)"
+    :aria-valuenow="Math.floor(currentTime || 0)"
+    :aria-valuetext="ariaValueText"
+    :aria-disabled="disabled || !hasDuration ? 'true' : undefined"
+    :style="{ '--_played': `${playedPct}%` }"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @pointerleave="onPointerLeave"
+    @keydown="onKeydown"
+  >
+    <div
+      v-if="waveBars"
+      class="uid-media-scrubber__wave"
+      aria-hidden="true"
+    >
+      <svg
+        class="uid-media-scrubber__wave-base"
+        :viewBox="waveViewBox"
+        preserveAspectRatio="none"
+      >
+        <path :d="wavePath" />
+      </svg>
+      <svg
+        class="uid-media-scrubber__wave-played"
+        :viewBox="waveViewBox"
+        preserveAspectRatio="none"
+      >
+        <path :d="wavePath" />
+      </svg>
+    </div>
+    <div
+      v-else
+      class="uid-media-scrubber__rail"
+      :style="chapterMask"
+      aria-hidden="true"
+    >
+      <div
+        v-for="(seg, i) in bufferedSegments"
+        :key="i"
+        class="uid-media-scrubber__buffered"
+        :style="{ left: `${seg.left}%`, width: `${seg.width}%` }"
+      />
+      <div class="uid-media-scrubber__played" />
+    </div>
+    <div
+      v-if="!waveBars"
+      class="uid-media-scrubber__handle"
+      aria-hidden="true"
+    />
+    <div
+      v-if="hoverTime !== null && waveBars"
+      class="uid-media-scrubber__hover-line"
+      :style="{ left: `${pct(hoverTime)}%` }"
+      aria-hidden="true"
+    />
+    <div
+      v-if="previewTime !== null"
+      class="uid-media-scrubber__preview"
+      :style="previewStyle"
+      aria-hidden="true"
+    >
+      <div
+        v-if="thumbStyle"
+        class="uid-media-scrubber__thumb"
+        :style="thumbStyle"
+      />
+      <div
+        v-if="previewChapter"
+        class="uid-media-scrubber__chapter"
+      >
+        {{ previewChapter }}
+      </div>
+      <div class="uid-media-scrubber__time">
+        {{ formatTime(previewTime, duration >= 3600) }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Media/__testing__/fakeMedia.ts b/src/components/Media/__testing__/fakeMedia.ts
new file mode 100644
index 0000000..af1d085
--- /dev/null
+++ b/src/components/Media/__testing__/fakeMedia.ts
@@ -0,0 +1,41 @@
+import { vi } from 'vitest'
+
+export interface FakeMedia extends HTMLVideoElement {
+  fire(name: string): void
+  set(props: Partial<Record<'duration' | 'readyState' | 'videoWidth', number>>): void
+}
+
+/** A jsdom media element with a working playback state machine (jsdom has none). */
+export function fakeMedia(el: HTMLMediaElement = document.createElement('video')): FakeMedia {
+  const s = { paused: true, ended: false, currentTime: 0, duration: NaN, volume: 1, muted: false, playbackRate: 1, defaultPlaybackRate: 1, readyState: 0, videoWidth: 0 }
+  const fire = (name: string): void => { el.dispatchEvent(new Event(name)) }
+  for (const key of Object.keys(s) as (keyof typeof s)[]) {
+    Object.defineProperty(el, key, {
+      configurable: true,
+      get: () => s[key],
+      set: (v) => {
+        ;(s as Record<string, unknown>)[key] = v
+        if (key === 'volume' || key === 'muted') fire('volumechange')
+        if (key === 'playbackRate') fire('ratechange')
+        if (key === 'currentTime') fire('seeking')
+      },
+    })
+  }
+  Object.defineProperty(el, 'buffered', { configurable: true, get: () => ({ length: 0, start: () => 0, end: () => 0 }) })
+  Object.defineProperty(el, 'seekable', { configurable: true, get: () => ({ length: 0, start: () => 0, end: () => 0 }) })
+  el.play = vi.fn(async () => {
+    s.paused = false
+    fire('play')
+    fire('playing')
+  })
+  el.pause = vi.fn(() => {
+    if (s.paused) return
+    s.paused = true
+    fire('pause')
+  })
+  el.load = vi.fn()
+  const out = el as FakeMedia
+  out.fire = fire
+  out.set = (props) => Object.assign(s, props)
+  return out
+}
diff --git a/src/components/Media/index.ts b/src/components/Media/index.ts
new file mode 100644
index 0000000..763631c
--- /dev/null
+++ b/src/components/Media/index.ts
@@ -0,0 +1,12 @@
+export { useMediaController } from './useMediaController.js'
+export type {
+  UseMediaControllerOptions, UidMediaController, UidMediaState, UidMediaErrorInfo, UidMediaErrorKind,
+} from './useMediaController.js'
+export {
+  formatTime, parseVtt, cueText, cueAt, parseThumbnail, isHlsSource, orderSources, PLAYBACK_RATES,
+} from './mediaUtils.js'
+export type {
+  UidMediaSource, UidMediaTrack, UidMediaCue, UidMediaRange, UidMediaThumbnail,
+} from './mediaUtils.js'
+export { computePeaks, resamplePeaks, normalizePeaks, peaksToPath, getWaveform, clearWaveformCache } from './waveform.js'
+export type { ComputePeaksOptions, WaveformOptions } from './waveform.js'
diff --git a/src/components/Media/mediaUtils.spec.ts b/src/components/Media/mediaUtils.spec.ts
new file mode 100644
index 0000000..c13d25d
--- /dev/null
+++ b/src/components/Media/mediaUtils.spec.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+import {
+  bufferedEndAt, cueAt, cueText, formatTime, isHlsSource, orderSources, parseThumbnail, parseVtt,
+} from './mediaUtils'
+
+describe('formatTime', () => {
+  it('форматирует минуты и часы', () => {
+    expect(formatTime(0)).toBe('0:00')
+    expect(formatTime(65.9)).toBe('1:05')
+    expect(formatTime(3725)).toBe('1:02:05')
+    expect(formatTime(5, true)).toBe('0:00:05')
+    expect(formatTime(NaN)).toBe('0:00')
+    expect(formatTime(Infinity)).toBe('0:00')
+  })
+})
+
+describe('parseVtt', () => {
+  const vtt = `WEBVTT
+
+1
+00:00:01.000 --> 00:00:04.500 align:start
+Hello <b>world</b>
+second line
+
+00:01:00,250 --> 00:01:02.000
+&lt;tag&gt; &amp; <v Bob>Bob</v>
+`
+  it('разбирает тайминги и многострочный текст', () => {
+    const cues = parseVtt(vtt)
+    expect(cues).toHaveLength(2)
+    expect(cues[0]).toEqual({ start: 1, end: 4.5, text: 'Hello <b>world</b>\nsecond line' })
+    expect(cues[1].start).toBeCloseTo(60.25)
+  })
+
+  it('cueText убирает теги и раскрывает сущности', () => {
+    expect(cueText(parseVtt(vtt)[1].text)).toBe('<tag> & Bob')
+  })
+
+  it('cueAt находит активный cue', () => {
+    const cues = parseVtt(vtt)
+    expect(cueAt(cues, 2)?.start).toBe(1)
+    expect(cueAt(cues, 10)).toBeUndefined()
+  })
+})
+
+describe('parseThumbnail', () => {
+  it('xywh спрайта относительно адреса VTT', () => {
+    expect(parseThumbnail('sprite.jpg#xywh=160,0,160,90', 'https://cdn.test/v/thumbs.vtt')).toEqual({
+      url: 'https://cdn.test/v/sprite.jpg', x: 160, y: 0, w: 160, h: 90,
+    })
+  })
+
+  it('целая картинка без фрагмента', () => {
+    expect(parseThumbnail('/img/1.jpg', 'https://cdn.test/v/thumbs.vtt')?.w).toBe(0)
+    expect(parseThumbnail('  ', 'x')).toBeNull()
+  })
+})
+
+describe('sources', () => {
+  it('isHlsSource по типу и по расширению', () => {
+    expect(isHlsSource({ src: '/a.m3u8?token=1' })).toBe(true)
+    expect(isHlsSource({ src: '/a', type: 'application/x-mpegURL' })).toBe(true)
+    expect(isHlsSource({ src: '/a.mp4', type: 'video/mp4' })).toBe(false)
+  })
+
+  it('orderSources ставит воспроизводимые вперёд и отбрасывает невозможные', () => {
+    const canPlay = (type: string): string => (type.startsWith('video/webm') ? '' : 'maybe')
+    const list = orderSources([
+      { src: 'a.webm', type: 'video/webm' },
+      { src: 'b.mp4', type: 'video/mp4' },
+      { src: 'c.m3u8' },
+      { src: 'd' },
+    ], canPlay, false)
+    expect(list.map((s) => s.src)).toEqual(['b.mp4', 'd'])
+  })
+})
+
+describe('bufferedEndAt', () => {
+  it('конец диапазона с позицией, с допуском на дырку', () => {
+    expect(bufferedEndAt([[0, 5], [5.1, 9]], 2)).toBe(9)
+    expect(bufferedEndAt([[0, 5], [7, 9]], 2)).toBe(5)
+    expect(bufferedEndAt([[3, 5]], 1)).toBe(1)
+  })
+})
diff --git a/src/components/Media/mediaUtils.ts b/src/components/Media/mediaUtils.ts
new file mode 100644
index 0000000..2e21a22
--- /dev/null
+++ b/src/components/Media/mediaUtils.ts
@@ -0,0 +1,153 @@
+export interface UidMediaSource {
+  src: string
+  /** MIME type, e.g. `video/mp4`, `video/webm; codecs="vp9,opus"`, `application/x-mpegURL`. */
+  type?: string
+  /** Quality label shown in the quality menu (`1080p`, `720p`…). */
+  label?: string
+}
+
+export interface UidMediaTrack {
+  src: string
+  kind?: 'subtitles' | 'captions' | 'chapters'
+  srclang?: string
+  label?: string
+  default?: boolean
+}
+
+export interface UidMediaCue {
+  start: number
+  end: number
+  text: string
+}
+
+export type UidMediaRange = [number, number]
+
+export function formatTime(value: number, withHours = false): string {
+  if (!Number.isFinite(value) || value < 0) value = 0
+  const total = Math.floor(value)
+  const h = Math.floor(total / 3600)
+  const m = Math.floor((total % 3600) / 60)
+  const s = total % 60
+  const ss = String(s).padStart(2, '0')
+  if (h > 0 || withHours) return `${h}:${String(m).padStart(2, '0')}:${ss}`
+  return `${m}:${ss}`
+}
+
+export function toRanges(ranges: TimeRanges | null | undefined): UidMediaRange[] {
+  if (!ranges) return []
+  const out: UidMediaRange[] = []
+  for (let i = 0; i < ranges.length; i++) out.push([ranges.start(i), ranges.end(i)])
+  return out
+}
+
+/** End of the buffered range that contains `time` (with a small gap tolerance), or `time` itself. */
+export function bufferedEndAt(ranges: UidMediaRange[], time: number, gap = 0.25): number {
+  let end = time
+  for (const [s, e] of ranges) {
+    if (s - gap <= end && e > end) end = e
+  }
+  return end
+}
+
+const HLS_TYPES = ['application/x-mpegurl', 'application/vnd.apple.mpegurl', 'audio/mpegurl', 'audio/x-mpegurl']
+
+export function isHlsSource(source: UidMediaSource): boolean {
+  const type = source.type?.toLowerCase().split(';')[0].trim()
+  if (type) return HLS_TYPES.includes(type)
+  return /\.m3u8(\?|#|$)/i.test(source.src)
+}
+
+/**
+ * Candidates in the order the browser should try them: the ones `canPlay` vouches for first,
+ * HLS sources count as playable when `hlsPlayable` says so (native or MSE).
+ */
+export function orderSources(
+  sources: UidMediaSource[],
+  canPlay: (type: string) => string,
+  hlsPlayable: boolean,
+): UidMediaSource[] {
+  const score = (s: UidMediaSource): number => {
+    if (isHlsSource(s)) return hlsPlayable ? 2 : 0
+    if (!s.type) return 1
+    const r = canPlay(s.type)
+    return r === 'probably' ? 2 : r === 'maybe' ? 2 : 0
+  }
+  return sources
+    .map((s, i) => ({ s, i, score: score(s) }))
+    .sort((a, b) => b.score - a.score || a.i - b.i)
+    .filter((x) => x.score > 0)
+    .map((x) => x.s)
+}
+
+function parseTimestamp(raw: string): number {
+  const parts = raw.trim().split(':')
+  let sec = 0
+  for (const p of parts) sec = sec * 60 + parseFloat(p.replace(',', '.'))
+  return sec
+}
+
+/** Minimal WebVTT parser: cue timings and text (settings, styles and regions are ignored). */
+export function parseVtt(text: string): UidMediaCue[] {
+  const lines = text.replace(/\r\n?/g, '\n').split('\n')
+  const cues: UidMediaCue[] = []
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (!line.includes('-->')) continue
+    const [a, rest] = line.split('-->')
+    const b = rest.trim().split(/\s+/)[0]
+    const start = parseTimestamp(a)
+    const end = parseTimestamp(b)
+    const body: string[] = []
+    while (i + 1 < lines.length && lines[i + 1].trim() !== '') body.push(lines[++i])
+    if (Number.isFinite(start) && Number.isFinite(end)) cues.push({ start, end, text: body.join('\n') })
+  }
+  return cues
+}
+
+const ENTITIES: Record<string, string> = { amp: '&', lt: '<', gt: '>', nbsp: ' ', quot: '"', apos: "'", lrm: '', rlm: '' }
+
+/** Plain text of a cue: VTT tags (`<v Bob>`, `<i>`, timestamps) dropped, entities decoded. */
+export function cueText(raw: string): string {
+  return raw
+    .replace(/<[^>]*>/g, '')
+    .replace(/&(\w+);/g, (m, name: string) => (name in ENTITIES ? ENTITIES[name] : m))
+}
+
+export function cueAt(cues: UidMediaCue[], time: number): UidMediaCue | undefined {
+  for (const c of cues) if (time >= c.start && time < c.end) return c
+  return undefined
+}
+
+export interface UidMediaThumbnail {
+  url: string
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+/** A thumbnails-VTT cue body: `sprite.jpg#xywh=0,0,160,90` (or a whole image), resolved against `base`. */
+export function parseThumbnail(text: string, base: string): UidMediaThumbnail | null {
+  const value = text.trim()
+  if (!value) return null
+  const [path, hash] = value.split('#')
+  const url = resolveUrl(path, base)
+  const m = hash && /xywh=(\d+),(\d+),(\d+),(\d+)/.exec(hash)
+  if (!m) return { url, x: 0, y: 0, w: 0, h: 0 }
+  return { url, x: +m[1], y: +m[2], w: +m[3], h: +m[4] }
+}
+
+export function resolveUrl(path: string, base: string): string {
+  try {
+    const origin = typeof location !== 'undefined' ? location.href : 'http://localhost/'
+    return new URL(path, new URL(base, origin)).href
+  } catch {
+    return path
+  }
+}
+
+export const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+export function clamp(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v))
+}
diff --git a/src/components/Media/useMediaController.spec.ts b/src/components/Media/useMediaController.spec.ts
new file mode 100644
index 0000000..8382aab
--- /dev/null
+++ b/src/components/Media/useMediaController.spec.ts
@@ -0,0 +1,164 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { defineComponent, h, ref } from 'vue'
+import { useMediaController, type UidMediaController } from './useMediaController'
+import { fakeMedia } from './__testing__/fakeMedia'
+
+function setup(options: Parameters<typeof useMediaController>[1] = {}) {
+  const el = fakeMedia()
+  let ctrl!: UidMediaController
+  const wrapper = mount(defineComponent({
+    setup() {
+      const media = ref<HTMLMediaElement | null>(el)
+      ctrl = useMediaController(media, options)
+      return () => h('div')
+    },
+  }))
+  return { el, ctrl, wrapper }
+}
+
+function key(k: string, extra: KeyboardEventInit = {}): KeyboardEvent {
+  return new KeyboardEvent('keydown', { key: k, ...extra })
+}
+
+describe('useMediaController', () => {
+  afterEach(() => localStorage.clear())
+
+  it('состояние следует событиям элемента', async () => {
+    const { el, ctrl } = setup()
+    el.set({ duration: 120, readyState: 4 })
+    el.fire('loadedmetadata')
+    expect(ctrl.state.duration).toBe(120)
+    expect(ctrl.state.ready).toBe(true)
+    await ctrl.play()
+    expect(ctrl.state.playing).toBe(true)
+    expect(ctrl.state.paused).toBe(false)
+    el.fire('waiting')
+    expect(ctrl.state.waiting).toBe(true)
+    el.fire('playing')
+    expect(ctrl.state.waiting).toBe(false)
+    ctrl.pause()
+    expect(ctrl.state.paused).toBe(true)
+    expect(ctrl.state.playing).toBe(false)
+  })
+
+  it('команды: перемотка с ограничением, громкость, mute, скорость', () => {
+    const { el, ctrl } = setup()
+    el.set({ duration: 100 })
+    el.fire('durationchange')
+    ctrl.seek(150)
+    expect(el.currentTime).toBe(100)
+    ctrl.skip(-500)
+    expect(el.currentTime).toBe(0)
+    ctrl.setVolume(0.3)
+    expect(ctrl.state.volume).toBe(0.3)
+    ctrl.toggleMute()
+    expect(ctrl.state.muted).toBe(true)
+    ctrl.changeVolume(0.2)
+    expect(el.muted).toBe(false)
+    expect(el.volume).toBeCloseTo(0.2)
+    ctrl.setRate(1.5)
+    expect(ctrl.state.rate).toBe(1.5)
+    expect(el.defaultPlaybackRate).toBe(1.5)
+  })
+
+  it('снятие mute при нулевой громкости возвращает слышимую громкость', () => {
+    const { el, ctrl } = setup()
+    el.volume = 0
+    el.muted = true
+    ctrl.setMuted(false)
+    expect(el.volume).toBe(0.5)
+  })
+
+  it('горячие клавиши', async () => {
+    let captions = 0
+    const { el, ctrl } = setup({ onCaptionsToggle: () => captions++ })
+    el.set({ duration: 100 })
+    el.fire('durationchange')
+    el.currentTime = 50
+    expect(ctrl.handleKey(key('k'))).toBe(true)
+    expect(el.play).toHaveBeenCalled()
+    await Promise.resolve()
+    ctrl.handleKey(key(' '))
+    expect(el.pause).toHaveBeenCalled()
+    ctrl.handleKey(key('ArrowRight'))
+    expect(el.currentTime).toBe(55)
+    ctrl.handleKey(key('j'))
+    expect(el.currentTime).toBe(45)
+    ctrl.handleKey(key('L'))
+    expect(el.currentTime).toBe(55)
+    ctrl.handleKey(key('7'))
+    expect(el.currentTime).toBe(70)
+    ctrl.handleKey(key('Home'))
+    expect(el.currentTime).toBe(0)
+    ctrl.handleKey(key('ArrowDown'))
+    expect(el.volume).toBeCloseTo(0.9)
+    ctrl.handleKey(key('m'))
+    expect(el.muted).toBe(true)
+    ctrl.handleKey(key('c'))
+    expect(captions).toBe(1)
+    expect(ctrl.handleKey(key('x'))).toBe(false)
+    expect(ctrl.handleKey(key('k', { ctrlKey: true }))).toBe(false)
+  })
+
+  it('f — только для видео', () => {
+    const audio = fakeMedia(document.createElement('audio'))
+    let ctrl!: UidMediaController
+    mount(defineComponent({ setup() { ctrl = useMediaController(ref(audio)); return () => h('div') } }))
+    expect(ctrl.handleKey(key('f'))).toBe(false)
+  })
+
+  it('запуск одного плеера ставит на паузу остальные; exclusive=false не участвует', async () => {
+    const a = setup()
+    const b = setup()
+    const c = setup({ exclusive: false })
+    await a.ctrl.play()
+    await c.ctrl.play()
+    expect(a.el.paused).toBe(false)
+    await b.ctrl.play()
+    expect(a.el.paused).toBe(true)
+    expect(c.el.paused).toBe(false)
+    a.wrapper.unmount()
+    b.wrapper.unmount()
+    c.wrapper.unmount()
+  })
+
+  it('ошибки элемента переводятся в понятные виды', () => {
+    const { el, ctrl } = setup()
+    Object.defineProperty(el, 'error', { configurable: true, get: () => ({ code: 3, message: 'PIPELINE_ERROR_DECODE' }) })
+    el.fire('error')
+    expect(ctrl.state.error).toEqual({ kind: 'decode', detail: 'PIPELINE_ERROR_DECODE' })
+    ctrl.setError({ kind: 'encrypted' })
+    expect(ctrl.state.error?.kind).toBe('encrypted')
+    ctrl.setError(null)
+    expect(ctrl.state.error).toBeNull()
+  })
+
+  it('resumeKey: сохраняет позицию на паузе и восстанавливает при загрузке', () => {
+    const first = setup({ resumeKey: 'lesson-1' })
+    first.el.set({ duration: 600 })
+    first.el.fire('durationchange')
+    first.el.currentTime = 125.7
+    first.el.fire('timeupdate')
+    first.el.fire('pause')
+    expect(localStorage.getItem('uid-media:lesson-1')).toBe('125')
+    const second = setup({ resumeKey: 'lesson-1' })
+    second.el.set({ duration: 600, readyState: 1 })
+    second.el.fire('loadedmetadata')
+    expect(second.el.currentTime).toBe(125)
+    second.el.fire('ended')
+    expect(localStorage.getItem('uid-media:lesson-1')).toBeNull()
+  })
+
+  it('resumeKey: начало и самый конец не запоминаются', () => {
+    const { el } = setup({ resumeKey: 'k' })
+    el.set({ duration: 100 })
+    el.fire('durationchange')
+    el.currentTime = 3
+    el.fire('pause')
+    expect(localStorage.getItem('uid-media:k')).toBeNull()
+    el.currentTime = 98
+    el.fire('pause')
+    expect(localStorage.getItem('uid-media:k')).toBeNull()
+  })
+})
diff --git a/src/components/Media/useMediaController.ts b/src/components/Media/useMediaController.ts
new file mode 100644
index 0000000..2b75c7e
--- /dev/null
+++ b/src/components/Media/useMediaController.ts
@@ -0,0 +1,506 @@
+import {
+  computed, onBeforeUnmount, reactive, toValue, watch,
+  type MaybeRefOrGetter, type Ref,
+} from 'vue'
+import { bufferedEndAt, clamp, toRanges, type UidMediaRange } from './mediaUtils.js'
+
+export type UidMediaErrorKind =
+  | 'aborted' | 'network' | 'decode' | 'unsupported'
+  | 'mse' | 'manifest' | 'encrypted' | 'codec' | 'unknown'
+
+export interface UidMediaErrorInfo {
+  kind: UidMediaErrorKind
+  /** Technical detail (browser message, HTTP status) — not localised. */
+  detail?: string
+}
+
+export interface UseMediaControllerOptions {
+  /** Starting this player pauses other exclusive players on the page (default `true`). */
+  exclusive?: MaybeRefOrGetter<boolean>
+  /** Element that goes full screen; defaults to the media element. */
+  fullscreenTarget?: Ref<HTMLElement | null>
+  /** localStorage key to remember the playback position under. */
+  resumeKey?: MaybeRefOrGetter<string | undefined>
+  /** Seconds a hotkey arrow moves (default 5); j/l move twice as far. */
+  seekStep?: number
+  onCaptionsToggle?: () => void
+}
+
+export interface UidMediaState {
+  playing: boolean
+  paused: boolean
+  ended: boolean
+  waiting: boolean
+  stalled: boolean
+  seeking: boolean
+  ready: boolean
+  currentTime: number
+  duration: number
+  live: boolean
+  buffered: UidMediaRange[]
+  volume: number
+  muted: boolean
+  rate: number
+  fullscreen: boolean
+  pip: boolean
+  error: UidMediaErrorInfo | null
+}
+
+type WebkitVideo = HTMLVideoElement & {
+  webkitEnterFullscreen?: () => void
+  webkitExitFullscreen?: () => void
+  webkitDisplayingFullscreen?: boolean
+  webkitSupportsFullscreen?: boolean
+  webkitSupportsPresentationMode?: (mode: string) => boolean
+  webkitSetPresentationMode?: (mode: string) => void
+  webkitPresentationMode?: string
+}
+
+type WebkitDocument = Document & {
+  webkitFullscreenElement?: Element | null
+  webkitExitFullscreen?: () => Promise<void> | void
+  webkitFullscreenEnabled?: boolean
+}
+
+type WebkitElement = HTMLElement & { webkitRequestFullscreen?: () => Promise<void> | void }
+
+interface Registered { pause(): void, exclusive(): boolean }
+const players = new Set<Registered>()
+
+const ERROR_KINDS: Record<number, UidMediaErrorKind> = { 1: 'aborted', 2: 'network', 3: 'decode', 4: 'unsupported' }
+
+const RESUME_PREFIX = 'uid-media:'
+
+async function probeStatus(src: string): Promise<number | null> {
+  try {
+    const res = await fetch(src, { headers: { Range: 'bytes=0-1' } })
+    res.body?.cancel().catch(() => {})
+    return res.ok || res.status === 416 ? null : res.status
+  } catch {
+    return null
+  }
+}
+
+function readResume(key: string): number | null {
+  try {
+    const v = localStorage.getItem(RESUME_PREFIX + key)
+    return v === null ? null : Number(v)
+  } catch {
+    return null
+  }
+}
+
+function writeResume(key: string, value: number | null): void {
+  try {
+    if (value === null) localStorage.removeItem(RESUME_PREFIX + key)
+    else localStorage.setItem(RESUME_PREFIX + key, String(Math.floor(value)))
+  } catch {
+    // Storage may be unavailable (private mode, quota) — resuming is best effort.
+  }
+}
+
+export function useMediaController(
+  media: Ref<HTMLMediaElement | null>,
+  options: UseMediaControllerOptions = {},
+) {
+  const state = reactive<UidMediaState>({
+    playing: false,
+    paused: true,
+    ended: false,
+    waiting: false,
+    stalled: false,
+    seeking: false,
+    ready: false,
+    currentTime: 0,
+    duration: 0,
+    live: false,
+    buffered: [],
+    volume: 1,
+    muted: false,
+    rate: 1,
+    fullscreen: false,
+    pip: false,
+    error: null,
+  })
+
+  const seekStep = options.seekStep ?? 5
+  let raf = 0
+  let lastSaved = 0
+  let resumeApplied = false
+
+  const isExclusive = (): boolean => toValue(options.exclusive) !== false
+  const self: Registered = { pause: () => media.value?.pause(), exclusive: isExclusive }
+
+  const bufferedEnd = computed(() => bufferedEndAt(state.buffered, state.currentTime))
+
+  function syncTime(): void {
+    const el = media.value
+    if (!el) return
+    state.currentTime = el.currentTime
+    const d = el.duration
+    state.live = d === Infinity
+    if (state.live && el.seekable.length) {
+      state.duration = el.seekable.end(el.seekable.length - 1)
+    } else {
+      state.duration = Number.isFinite(d) ? d : 0
+    }
+  }
+
+  function loop(): void {
+    syncTime()
+    raf = state.playing ? requestAnimationFrame(loop) : 0
+  }
+
+  function startLoop(): void {
+    if (!raf && typeof requestAnimationFrame === 'function') raf = requestAnimationFrame(loop)
+  }
+
+  function stopLoop(): void {
+    if (raf) cancelAnimationFrame(raf)
+    raf = 0
+  }
+
+  function saveResume(force = false): void {
+    const key = toValue(options.resumeKey)
+    if (!key || state.live || !state.duration) return
+    const now = Date.now()
+    if (!force && now - lastSaved < 3000) return
+    lastSaved = now
+    const t = state.currentTime
+    writeResume(key, t > 5 && t < state.duration - 5 ? t : null)
+  }
+
+  function applyResume(): void {
+    const key = toValue(options.resumeKey)
+    const el = media.value
+    if (!key || !el || resumeApplied || state.live) return
+    resumeApplied = true
+    const t = readResume(key)
+    if (t && Number.isFinite(t) && (!state.duration || t < state.duration - 5)) el.currentTime = t
+  }
+
+  const handlers: Record<string, (e: Event) => void> = {
+    play: () => {
+      state.paused = false
+      state.ended = false
+      if (isExclusive()) {
+        for (const p of players) if (p !== self && p.exclusive()) p.pause()
+      }
+    },
+    playing: () => {
+      state.playing = true
+      state.waiting = false
+      state.stalled = false
+      startLoop()
+    },
+    pause: () => {
+      state.paused = true
+      state.playing = false
+      stopLoop()
+      syncTime()
+      saveResume(true)
+    },
+    waiting: () => { state.waiting = true },
+    stalled: () => { state.stalled = true },
+    canplay: () => { state.waiting = false },
+    seeking: () => { state.seeking = true; syncTime() },
+    seeked: () => { state.seeking = false; state.waiting = false; syncTime() },
+    timeupdate: () => { syncTime(); saveResume() },
+    durationchange: syncTime,
+    loadedmetadata: () => { state.ready = true; syncTime(); applyResume() },
+    progress: () => { state.buffered = toRanges(media.value?.buffered); state.stalled = false },
+    volumechange: () => {
+      const el = media.value
+      if (!el) return
+      state.volume = el.volume
+      state.muted = el.muted
+    },
+    ratechange: () => { state.rate = media.value?.playbackRate ?? 1 },
+    ended: () => {
+      state.ended = true
+      state.playing = false
+      state.paused = true
+      stopLoop()
+      syncTime()
+      const key = toValue(options.resumeKey)
+      if (key) writeResume(key, null)
+    },
+    emptied: () => {
+      state.ready = false
+      state.playing = false
+      state.paused = media.value?.paused ?? true
+      state.buffered = []
+      state.currentTime = 0
+      state.duration = 0
+      resumeApplied = false
+    },
+    error: () => {
+      const el = media.value
+      const err = el?.error
+      if (!el || !err) return
+      state.error = { kind: ERROR_KINDS[err.code] ?? 'unknown', detail: err.message || undefined }
+      state.waiting = false
+      // Browsers report a 404 as "format not supported": ask the server to tell them apart.
+      const src = el.currentSrc
+      if (err.code === 4 && /^https?:/.test(src)) {
+        probeStatus(src).then((status) => {
+          if (status && el.currentSrc === src && state.error?.kind === 'unsupported') {
+            state.error = { kind: 'network', detail: `HTTP ${status}` }
+          }
+        })
+      }
+    },
+    enterpictureinpicture: () => { state.pip = true },
+    leavepictureinpicture: () => { state.pip = false },
+    webkitpresentationmodechanged: () => {
+      state.pip = (media.value as WebkitVideo | null)?.webkitPresentationMode === 'picture-in-picture'
+    },
+    webkitbeginfullscreen: () => { state.fullscreen = true },
+    webkitendfullscreen: () => { state.fullscreen = false },
+  }
+
+  function onFullscreenChange(): void {
+    const doc = document as WebkitDocument
+    const fsEl = doc.fullscreenElement ?? doc.webkitFullscreenElement ?? null
+    const target = options.fullscreenTarget?.value ?? media.value
+    state.fullscreen = !!fsEl && !!target && (fsEl === target || fsEl.contains(target))
+  }
+
+  function snapshot(el: HTMLMediaElement): void {
+    state.volume = el.volume
+    state.muted = el.muted
+    state.rate = el.playbackRate
+    state.paused = el.paused
+    state.playing = !el.paused && !el.ended && el.readyState > 2
+    state.ready = el.readyState >= 1
+    state.buffered = toRanges(el.buffered)
+    syncTime()
+    if (el.error) handlers.error(new Event('error'))
+    if (state.ready) applyResume()
+  }
+
+  watch(media, (el, prev) => {
+    if (prev) for (const [name, fn] of Object.entries(handlers)) prev.removeEventListener(name, fn)
+    if (el) {
+      for (const [name, fn] of Object.entries(handlers)) el.addEventListener(name, fn)
+      snapshot(el)
+    }
+  }, { immediate: true, flush: 'post' })
+
+  players.add(self)
+  if (typeof document !== 'undefined') {
+    document.addEventListener('fullscreenchange', onFullscreenChange)
+    document.addEventListener('webkitfullscreenchange', onFullscreenChange)
+  }
+
+  onBeforeUnmount(() => {
+    saveResume(true)
+    stopLoop()
+    players.delete(self)
+    const el = media.value
+    if (el) for (const [name, fn] of Object.entries(handlers)) el.removeEventListener(name, fn)
+    document.removeEventListener('fullscreenchange', onFullscreenChange)
+    document.removeEventListener('webkitfullscreenchange', onFullscreenChange)
+  })
+
+  async function play(): Promise<void> {
+    const el = media.value
+    if (!el) return
+    if (el.error) {
+      handlers.error(new Event('error'))
+      return
+    }
+    state.error = null
+    try {
+      await el.play()
+    } catch (e) {
+      // A refused start (autoplay policy), an interrupted one, or a source the error event reports anyway.
+      const name = (e as DOMException)?.name
+      if (name !== 'NotAllowedError' && name !== 'AbortError' && name !== 'NotSupportedError') {
+        state.error ??= { kind: 'unknown', detail: (e as Error)?.message }
+      }
+      throw e
+    }
+  }
+
+  function pause(): void {
+    media.value?.pause()
+  }
+
+  function toggle(): void {
+    const el = media.value
+    if (!el) return
+    if (el.paused || el.ended) play().catch(() => {})
+    else el.pause()
+  }
+
+  function seek(time: number): void {
+    const el = media.value
+    if (!el || !Number.isFinite(time)) return
+    const max = state.duration || el.duration
+    const t = Number.isFinite(max) && max > 0 ? clamp(time, 0, max) : Math.max(0, time)
+    el.currentTime = t
+    state.currentTime = t
+  }
+
+  function skip(delta: number): void {
+    seek((media.value?.currentTime ?? state.currentTime) + delta)
+  }
+
+  function setVolume(v: number): void {
+    const el = media.value
+    if (!el) return
+    el.volume = clamp(v, 0, 1)
+    if (el.volume > 0 && el.muted) el.muted = false
+  }
+
+  function changeVolume(delta: number): void {
+    const el = media.value
+    if (!el) return
+    setVolume((el.muted ? 0 : el.volume) + delta)
+  }
+
+  function setMuted(value: boolean): void {
+    const el = media.value
+    if (!el) return
+    el.muted = value
+    if (!value && el.volume === 0) el.volume = 0.5
+  }
+
+  function toggleMute(): void {
+    setMuted(!media.value?.muted)
+  }
+
+  function setRate(rate: number): void {
+    const el = media.value
+    if (!el) return
+    el.playbackRate = rate
+    el.defaultPlaybackRate = rate
+  }
+
+  const canFullscreen = computed(() => {
+    if (typeof document === 'undefined') return false
+    const doc = document as WebkitDocument
+    const el = media.value as WebkitVideo | null
+    return !!(doc.fullscreenEnabled || doc.webkitFullscreenEnabled || el?.webkitSupportsFullscreen || el?.webkitEnterFullscreen)
+  })
+
+  async function toggleFullscreen(): Promise<void> {
+    const doc = document as WebkitDocument
+    const el = media.value as WebkitVideo | null
+    if (state.fullscreen) {
+      if (doc.fullscreenElement) await doc.exitFullscreen()
+      else if (doc.webkitFullscreenElement) await doc.webkitExitFullscreen?.()
+      else el?.webkitExitFullscreen?.()
+      return
+    }
+    const target = (options.fullscreenTarget?.value ?? el) as WebkitElement | null
+    if (!target) return
+    if (target.requestFullscreen && doc.fullscreenEnabled) await target.requestFullscreen()
+    else if (target.webkitRequestFullscreen && doc.webkitFullscreenEnabled) await target.webkitRequestFullscreen()
+    // iPhone: only the video element itself can go full screen (native controls).
+    else el?.webkitEnterFullscreen?.()
+  }
+
+  const canPip = computed(() => {
+    const el = media.value as WebkitVideo | null
+    if (!el || el.tagName !== 'VIDEO' || typeof document === 'undefined') return false
+    if ('pictureInPictureEnabled' in document) return !!document.pictureInPictureEnabled
+    return !!el.webkitSupportsPresentationMode?.('picture-in-picture')
+  })
+
+  async function togglePip(): Promise<void> {
+    const el = media.value as WebkitVideo | null
+    if (!el) return
+    if ('pictureInPictureEnabled' in document && document.pictureInPictureEnabled) {
+      if (document.pictureInPictureElement) await document.exitPictureInPicture()
+      else await el.requestPictureInPicture()
+      return
+    }
+    if (el.webkitSetPresentationMode) {
+      el.webkitSetPresentationMode(el.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture')
+    }
+  }
+
+  function setError(error: UidMediaErrorInfo | null): void {
+    state.error = error
+    if (error) state.waiting = false
+  }
+
+  /** Applies a player hotkey; returns `true` when the key was handled. */
+  function handleKey(e: KeyboardEvent): boolean {
+    if (e.ctrlKey || e.metaKey || e.altKey) return false
+    const key = e.key.length === 1 ? e.key.toLowerCase() : e.key
+    switch (key) {
+      case ' ':
+      case 'k':
+        toggle()
+        return true
+      case 'ArrowLeft':
+        skip(-seekStep)
+        return true
+      case 'ArrowRight':
+        skip(seekStep)
+        return true
+      case 'j':
+        skip(-seekStep * 2)
+        return true
+      case 'l':
+        skip(seekStep * 2)
+        return true
+      case 'ArrowUp':
+        changeVolume(0.1)
+        return true
+      case 'ArrowDown':
+        changeVolume(-0.1)
+        return true
+      case 'm':
+        toggleMute()
+        return true
+      case 'f':
+        if (media.value?.tagName !== 'VIDEO') return false
+        toggleFullscreen().catch(() => {})
+        return true
+      case 'c':
+        if (!options.onCaptionsToggle) return false
+        options.onCaptionsToggle()
+        return true
+      case 'Home':
+        seek(0)
+        return true
+      case 'End':
+        if (!state.duration) return false
+        seek(state.duration)
+        return true
+      default:
+        if (/^[0-9]$/.test(key) && state.duration) {
+          seek((state.duration * Number(key)) / 10)
+          return true
+        }
+        return false
+    }
+  }
+
+  return {
+    state,
+    bufferedEnd,
+    canFullscreen,
+    canPip,
+    play,
+    pause,
+    toggle,
+    seek,
+    skip,
+    setVolume,
+    changeVolume,
+    setMuted,
+    toggleMute,
+    setRate,
+    toggleFullscreen,
+    togglePip,
+    setError,
+    handleKey,
+  }
+}
+
+export type UidMediaController = ReturnType<typeof useMediaController>
diff --git a/src/components/Media/useMediaLocale.ts b/src/components/Media/useMediaLocale.ts
new file mode 100644
index 0000000..7d5d138
--- /dev/null
+++ b/src/components/Media/useMediaLocale.ts
@@ -0,0 +1,14 @@
+import { computed, type ComputedRef } from 'vue'
+import { useLocale } from '../../composables/useLocale.js'
+import { en } from '../../locales/en.js'
+import type { UidMediaLocale } from '../../locales/types.js'
+
+export function useMediaLocale(): ComputedRef<UidMediaLocale> {
+  const locale = useLocale()
+  return computed(() => {
+    const own = locale.value.media
+    const base = en.media as UidMediaLocale
+    if (!own) return base
+    return { ...base, ...own, errors: { ...base.errors, ...own.errors } }
+  })
+}
diff --git a/src/components/Media/waveform.spec.ts b/src/components/Media/waveform.spec.ts
new file mode 100644
index 0000000..f973263
--- /dev/null
+++ b/src/components/Media/waveform.spec.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest'
+import { computePeaks, normalizePeaks, peaksToPath, resamplePeaks } from './waveform'
+
+describe('computePeaks', () => {
+  it('максимум модуля по корзинам, нормированный', async () => {
+    const ch = Float32Array.from([0.1, -0.5, 0.2, 0.25, 0, -0.1, 0.05, 0.1])
+    const peaks = await computePeaks([ch], 4, { yieldFn: async () => {} })
+    expect(peaks.map((p) => Math.round(p * 100) / 100)).toEqual([1, 0.5, 0.2, 0.2])
+  })
+
+  it('берёт максимум по каналам', async () => {
+    const l = Float32Array.from([0.1, 0.1])
+    const r = Float32Array.from([0.4, 0.2])
+    expect(await computePeaks([l, r], 2, { yieldFn: async () => {} })).toEqual([1, 0.5])
+  })
+
+  it('обрабатывает кусками и уступает поток между ними', async () => {
+    const data = new Float32Array(1000).map((_, i) => Math.sin(i / 10))
+    const yieldFn = vi.fn(async () => {})
+    const peaks = await computePeaks([data], 10, { chunkSize: 100, yieldFn })
+    expect(yieldFn).toHaveBeenCalledTimes(9)
+    expect(peaks).toHaveLength(10)
+    expect(Math.max(...peaks)).toBe(1)
+  })
+
+  it('прерывается по AbortSignal', async () => {
+    const ctrl = new AbortController()
+    ctrl.abort()
+    await expect(computePeaks([new Float32Array(10)], 2, { signal: ctrl.signal })).rejects.toThrow('Aborted')
+  })
+
+  it('пустой вход', async () => {
+    expect(await computePeaks([], 3)).toEqual([0, 0, 0])
+  })
+})
+
+describe('resample / path', () => {
+  it('сжимает по максимуму и растягивает', () => {
+    expect(resamplePeaks([0.1, 0.9, 0.3, 0.4], 2)).toEqual([0.9, 0.4])
+    expect(resamplePeaks([0.2, 0.8], 4)).toEqual([0.2, 0.2, 0.8, 0.8])
+    expect(resamplePeaks([], 3)).toEqual([])
+  })
+
+  it('normalizePeaks: тишина остаётся нулём', () => {
+    expect(normalizePeaks([0, 0])).toEqual([0, 0])
+    expect(normalizePeaks([0.25, 0.5])).toEqual([0.5, 1])
+  })
+
+  it('peaksToPath рисует бар на каждый пик с минимальной высотой', () => {
+    const d = peaksToPath([0, 1])
+    expect(d.match(/M/g)).toHaveLength(2)
+    expect(d).toContain('M0 48.0h2v4.0h-2z')
+    expect(d).toContain('M3 0.0h2v100.0h-2z')
+  })
+})
diff --git a/src/components/Media/waveform.ts b/src/components/Media/waveform.ts
new file mode 100644
index 0000000..9b79dce
--- /dev/null
+++ b/src/components/Media/waveform.ts
@@ -0,0 +1,153 @@
+export interface ComputePeaksOptions {
+  /** Samples processed between yields to the event loop. */
+  chunkSize?: number
+  /** Yields between chunks; defaults to requestIdleCallback / setTimeout. */
+  yieldFn?: () => Promise<void>
+  signal?: AbortSignal
+}
+
+export interface WaveformOptions {
+  /** Number of peaks to compute (default 1024). */
+  count?: number
+  /** Skip files larger than this many bytes (default 40 MB). */
+  maxBytes?: number
+  /** Skip audio longer than this many seconds (default 30 min). */
+  maxDuration?: number
+  fetchInit?: RequestInit
+}
+
+export function idleYield(): Promise<void> {
+  return new Promise((resolve) => {
+    const ric = (globalThis as { requestIdleCallback?: (cb: () => void, o?: { timeout: number }) => number }).requestIdleCallback
+    if (ric) ric(() => resolve(), { timeout: 50 })
+    else setTimeout(resolve, 0)
+  })
+}
+
+function abortError(): DOMException {
+  return new DOMException('Aborted', 'AbortError')
+}
+
+/** Max absolute amplitude per bucket across all channels, normalised to 0..1, processed in chunks. */
+export async function computePeaks(
+  channels: ArrayLike<number>[],
+  count: number,
+  options: ComputePeaksOptions = {},
+): Promise<number[]> {
+  const length = channels.length ? channels[0].length : 0
+  const peaks = new Array<number>(count).fill(0)
+  if (!length || count <= 0) return peaks
+  const chunk = options.chunkSize ?? 262144
+  const yieldFn = options.yieldFn ?? idleYield
+  const bucket = length / count
+  let processed = 0
+  for (let start = 0; start < length; start += chunk) {
+    if (options.signal?.aborted) throw abortError()
+    const end = Math.min(length, start + chunk)
+    for (const data of channels) {
+      for (let i = start; i < end; i++) {
+        const v = data[i]
+        const a = v < 0 ? -v : v
+        const b = Math.min(count - 1, Math.floor(i / bucket))
+        if (a > peaks[b]) peaks[b] = a
+      }
+    }
+    processed = end
+    if (processed < length) await yieldFn()
+  }
+  return normalizePeaks(peaks)
+}
+
+export function normalizePeaks(peaks: number[]): number[] {
+  let max = 0
+  for (const p of peaks) if (p > max) max = p
+  if (max <= 0) return peaks.map(() => 0)
+  return peaks.map((p) => Math.min(1, p / max))
+}
+
+/** Reduces (max) or stretches (nearest) peaks to `n` bars for drawing. */
+export function resamplePeaks(peaks: number[], n: number): number[] {
+  if (n <= 0 || !peaks.length) return []
+  if (peaks.length === n) return peaks.slice()
+  const out = new Array<number>(n)
+  const ratio = peaks.length / n
+  for (let i = 0; i < n; i++) {
+    const from = Math.floor(i * ratio)
+    const to = Math.max(from + 1, Math.floor((i + 1) * ratio))
+    let m = 0
+    for (let j = from; j < to && j < peaks.length; j++) if (peaks[j] > m) m = peaks[j]
+    out[i] = m
+  }
+  return out
+}
+
+/** SVG path of centred bars (viewBox `0 0 n*step 100`), heights clamped to a visible minimum. */
+export function peaksToPath(peaks: number[], step = 3, bar = 2, minHeight = 4): string {
+  let d = ''
+  for (let i = 0; i < peaks.length; i++) {
+    const h = Math.max(minHeight, peaks[i] * 100)
+    const y = (100 - h) / 2
+    d += `M${i * step} ${y.toFixed(1)}h${bar}v${h.toFixed(1)}h-${bar}z`
+  }
+  return d
+}
+
+const cache = new Map<string, Promise<number[] | null>>()
+// Decoding is memory- and CPU-heavy: files are processed one after another.
+let chain: Promise<unknown> = Promise.resolve()
+
+type AudioCtor = new (channels: number, length: number, rate: number) => BaseAudioContext
+
+function createDecoder(): BaseAudioContext | null {
+  const g = globalThis as unknown as { OfflineAudioContext?: AudioCtor, webkitOfflineAudioContext?: AudioCtor }
+  const Offline = g.OfflineAudioContext ?? g.webkitOfflineAudioContext
+  if (!Offline) return null
+  // A low sample rate keeps the decoded buffer small; peaks don't need high frequencies.
+  return new Offline(1, 1, 8000)
+}
+
+function decode(ctx: BaseAudioContext, data: ArrayBuffer): Promise<AudioBuffer> {
+  return new Promise((resolve, reject) => {
+    const p = ctx.decodeAudioData(data, resolve, reject)
+    if (p && typeof p.then === 'function') p.then(resolve, reject)
+  })
+}
+
+async function loadPeaks(src: string, count: number, o: WaveformOptions): Promise<number[] | null> {
+  const ctx = createDecoder()
+  if (!ctx) return null
+  const maxBytes = o.maxBytes ?? 40 * 1024 * 1024
+  const res = await fetch(src, o.fetchInit)
+  if (!res.ok) return null
+  const declared = Number(res.headers.get('content-length') ?? 0)
+  if (declared > maxBytes) {
+    res.body?.cancel().catch(() => {})
+    return null
+  }
+  const data = await res.arrayBuffer()
+  if (data.byteLength > maxBytes) return null
+  const audio = await decode(ctx, data)
+  if (audio.duration > (o.maxDuration ?? 1800)) return null
+  const channels: Float32Array[] = []
+  for (let c = 0; c < Math.min(audio.numberOfChannels, 2); c++) channels.push(audio.getChannelData(c))
+  return computePeaks(channels, count)
+}
+
+/** Peaks of an audio file decoded in the browser; `null` when skipped or impossible. Cached per src. */
+export function getWaveform(src: string, options: WaveformOptions = {}): Promise<number[] | null> {
+  const count = options.count ?? 1024
+  const key = `${count}:${src}`
+  const hit = cache.get(key)
+  if (hit) return hit
+  const job = chain.then(() => loadPeaks(src, count, options)).catch(() => {
+    cache.delete(key)
+    return null
+  })
+  cache.set(key, job)
+  chain = job
+  return job
+}
+
+export function clearWaveformCache(): void {
+  cache.clear()
+}
diff --git a/src/components/Video/UidVideo.css b/src/components/Video/UidVideo.css
new file mode 100644
index 0000000..cef36e5
--- /dev/null
+++ b/src/components/Video/UidVideo.css
@@ -0,0 +1,351 @@
+.uid-video {
+  --uid-media-accent: var(--uid-video-accent, var(--uid-accent));
+  --uid-media-played: var(--uid-video-accent, var(--uid-accent));
+  --uid-media-thumb: var(--uid-video-accent, var(--uid-accent));
+  --uid-media-rail: rgb(255 255 255 / 0.28);
+  --uid-media-buffered: rgb(255 255 255 / 0.5);
+  --uid-media-focus: #fff;
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--uid-video-radius, var(--uid-radius-lg, 12px));
+  background: var(--uid-video-bg, #000);
+  color: #fff;
+  font-family: var(--uid-font-family-sans, system-ui, sans-serif);
+  line-height: 1.2;
+  outline: none;
+  isolation: isolate;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.uid-video:focus-visible {
+  box-shadow: 0 0 0 3px var(--uid-color-focus-ring, var(--uid-accent));
+}
+
+.uid-video--fullscreen {
+  border-radius: 0;
+}
+
+.uid-video__media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: transparent;
+}
+
+.uid-video__media::cue {
+  opacity: 0;
+}
+
+.uid-video--bare .uid-video__media::cue {
+  opacity: 1;
+}
+
+.uid-video__surface {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.uid-video--playing.uid-video--controls-hidden,
+.uid-video--playing.uid-video--controls-hidden .uid-video__surface {
+  cursor: none;
+}
+
+/* Controls */
+.uid-video__controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  padding: 32px 12px 6px;
+  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.38) 55%, transparent);
+  transition: opacity var(--uid-duration-base, 200ms), transform var(--uid-duration-base, 200ms);
+}
+
+.uid-video--controls-hidden .uid-video__controls {
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+}
+
+.uid-video__scrubber {
+  margin: 0 4px;
+}
+
+.uid-video__bar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  min-height: 44px;
+}
+
+.uid-video__bar .uid-media__time {
+  margin-left: 6px;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
+}
+
+.uid-video__chapter {
+  min-width: 0;
+  margin-left: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--uid-font-size-sm, 14px);
+  opacity: 0.85;
+}
+
+.uid-video__chapter::before {
+  content: '·';
+  margin-right: 6px;
+}
+
+.uid-video__spacer {
+  flex: 1;
+}
+
+.uid-video__live {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  margin-left: 6px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 0.14);
+  color: inherit;
+  font: inherit;
+  font-size: var(--uid-font-size-xs, 12px);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.uid-video__live-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.6);
+}
+
+.uid-video__live--edge .uid-video__live-dot {
+  background: var(--uid-color-rose-500, #f43f5e);
+}
+
+.uid-video__live:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+/* Overlays */
+.uid-video__big-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 68px;
+  height: 68px;
+  margin: -34px 0 0 -34px;
+  padding: 0 0 0 4px;
+  border: 0;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.55);
+  color: #fff;
+  cursor: pointer;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  transition: background-color var(--uid-duration-fast, 120ms), transform var(--uid-duration-fast, 120ms);
+}
+
+.uid-video__big-play:has(.uid-video__big-icon--pause) {
+  padding: 0;
+}
+
+.uid-video--controls-hidden .uid-video__big-play {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.uid-video--paused .uid-video__big-play {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.uid-video__big-play:hover {
+  background: rgb(0 0 0 / 0.72);
+  transform: scale(1.06);
+}
+
+.uid-video__big-play:focus-visible {
+  outline: 3px solid #fff;
+  outline-offset: 3px;
+}
+
+.uid-video--started .uid-video__big-play {
+  width: 60px;
+  height: 60px;
+  margin: -30px 0 0 -30px;
+}
+
+.uid-video__loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  margin: -22px 0 0 -22px;
+  color: #fff;
+  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.5));
+  pointer-events: none;
+  animation: uid-video-fade-in 0.2s 0.35s both;
+}
+
+@keyframes uid-video-fade-in {
+  from { opacity: 0; }
+}
+
+.uid-video__flash {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 0.55);
+  font-size: var(--uid-font-size-sm, 14px);
+  font-weight: 600;
+  transform: translateY(-50%);
+  pointer-events: none;
+  animation: uid-video-fade-in 0.12s both;
+}
+
+.uid-video__flash--left {
+  left: 12%;
+}
+
+.uid-video__flash--right {
+  right: 12%;
+}
+
+.uid-video__captions {
+  position: absolute;
+  left: 5%;
+  right: 5%;
+  bottom: 18px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  text-align: center;
+  pointer-events: none;
+  transition: bottom var(--uid-duration-base, 200ms);
+}
+
+.uid-video:not(.uid-video--controls-hidden) .uid-video__captions {
+  bottom: 96px;
+}
+
+.uid-video__caption-line {
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: rgb(0 0 0 / 0.75);
+  color: #fff;
+  font-size: var(--uid-video-caption-size, clamp(14px, 2.6cqw, 28px));
+  line-height: 1.35;
+  white-space: pre-wrap;
+}
+
+.uid-video {
+  container-type: inline-size;
+}
+
+.uid-video__error {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 24px;
+  background: rgb(0 0 0 / 0.78);
+  text-align: center;
+}
+
+.uid-video__error-text {
+  max-width: 420px;
+  margin: 0;
+  font-size: var(--uid-font-size-sm, 14px);
+  line-height: 1.45;
+}
+
+.uid-video__retry {
+  height: 34px;
+  padding: 0 16px;
+  border: 1px solid rgb(255 255 255 / 0.4);
+  border-radius: var(--uid-radius-md, 8px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--uid-font-size-sm, 14px);
+  cursor: pointer;
+}
+
+.uid-video__retry:hover {
+  background: rgb(255 255 255 / 0.12);
+}
+
+.uid-video__retry:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+/* Narrow players: drop the secondary items first. */
+@container (max-width: 480px) {
+  .uid-video__chapter {
+    display: none;
+  }
+
+  .uid-video__controls {
+    padding: 24px 6px 2px;
+  }
+
+  .uid-video:not(.uid-video--controls-hidden) .uid-video__captions {
+    bottom: 84px;
+  }
+}
+
+@container (max-width: 360px) {
+  .uid-video__pip {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .uid-video__controls,
+  .uid-video__captions,
+  .uid-video__big-play {
+    transition: none;
+  }
+
+  .uid-video--controls-hidden .uid-video__controls {
+    transform: none;
+  }
+}
+
+/* Scrub preview (thumbnail, chapter, time) takes the captions' place while it is shown. */
+.uid-video:has(.uid-media-scrubber__preview) .uid-video__captions {
+  opacity: 0;
+}
diff --git a/src/components/Video/UidVideo.spec.ts b/src/components/Video/UidVideo.spec.ts
new file mode 100644
index 0000000..c6b5c9e
--- /dev/null
+++ b/src/components/Video/UidVideo.spec.ts
@@ -0,0 +1,181 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { h } from 'vue'
+import UidVideo from './UidVideo.vue'
+import UidLocaleProvider from '../LocaleProvider/UidLocaleProvider.vue'
+import { en } from '../../locales/en'
+import { fakeMedia } from '../Media/__testing__/fakeMedia'
+
+const proto = HTMLMediaElement.prototype as unknown as Record<string, unknown>
+const original = { canPlayType: proto.canPlayType, load: proto.load, play: proto.play, pause: proto.pause }
+
+beforeEach(() => {
+  proto.canPlayType = function (type: string) {
+    if (type.includes('mpegurl') || type.includes('mpegURL')) return ''
+    return type.includes('webm') ? '' : 'maybe'
+  }
+  proto.load = vi.fn()
+  proto.play = vi.fn(async () => {})
+  proto.pause = vi.fn()
+  global.fetch = vi.fn(async () => new Response('WEBVTT\n\n00:00:00.000 --> 00:00:05.000\nIntro\n\n00:00:05.000 --> 00:00:10.000\nPart 2\n')) as never
+})
+
+const mounted: { unmount(): void }[] = []
+
+afterEach(() => {
+  mounted.splice(0).forEach((w) => w.unmount())
+  Object.assign(proto, original)
+  document.body.innerHTML = ''
+})
+
+function mountVideo(props: Record<string, unknown>) {
+  const w = mount(UidLocaleProvider, {
+    props: { locale: en },
+    slots: { default: () => h(UidVideo, props) },
+    attachTo: document.body,
+  })
+  mounted.push(w)
+  return w
+}
+
+describe('UidVideo', () => {
+  it('рисует панель управления с доступными подписями', () => {
+    const w = mountVideo({ src: '/a.mp4', title: 'Lesson' })
+    expect(w.find('.uid-video').attributes('aria-label')).toBe('Lesson')
+    expect(w.find('[aria-label="Play"]').exists()).toBe(true)
+    expect(w.find('[aria-label="Mute"]').exists()).toBe(true)
+    expect(w.find('[aria-label="Volume"]').attributes('type')).toBe('range')
+    expect(w.find('[role="slider"][aria-label="Seek"]').exists()).toBe(true)
+    expect(w.find('[aria-label="Settings"]').attributes('aria-haspopup')).toBe('menu')
+    expect(w.find('video').attributes('playsinline')).toBeDefined()
+    expect((w.find('video').element as HTMLVideoElement).src).toContain('/a.mp4')
+  })
+
+  it('выбирает первый воспроизводимый источник', () => {
+    const w = mountVideo({ sources: [{ src: '/a.webm', type: 'video/webm' }, { src: '/a.mp4', type: 'video/mp4' }] })
+    expect((w.find('video').element as HTMLVideoElement).src).toContain('/a.mp4')
+  })
+
+  it('без воспроизводимых источников показывает ошибку', async () => {
+    const w = mountVideo({ sources: [{ src: '/a.webm', type: 'video/webm' }] })
+    await flushPromises()
+    expect(w.find('[role="alert"]').text()).toContain('not supported')
+  })
+
+  it('controls=false — голый элемент с родными контролами', () => {
+    const w = mountVideo({ src: '/a.mp4', controls: false })
+    expect(w.find('.uid-video__controls').exists()).toBe(false)
+    expect(w.find('video').attributes('controls')).toBeDefined()
+  })
+
+  it('меню скорости меняет playbackRate', async () => {
+    const w = mountVideo({ src: '/a.mp4' })
+    const v = w.find('video').element as HTMLVideoElement
+    await w.find('[aria-label="Settings"]').trigger('click')
+    const items = w.findAll('[role="menuitemradio"]')
+    expect(items.map((i) => i.text())).toEqual(['0.5×', '0.75×', 'Normal', '1.25×', '1.5×', '1.75×', '2×'])
+    expect(items[2].attributes('aria-checked')).toBe('true')
+    await items[4].trigger('click')
+    expect(v.playbackRate).toBe(1.5)
+    expect(w.find('[role="menu"]').exists()).toBe(false)
+  })
+
+  it('качество из подписанных источников', async () => {
+    const w = mountVideo({ sources: [{ src: '/hd.mp4', type: 'video/mp4', label: '720p' }, { src: '/sd.mp4', type: 'video/mp4', label: '360p' }] })
+    await w.find('[aria-label="Settings"]').trigger('click')
+    const labels = w.findAll('[role="menuitemradio"]').map((i) => i.text())
+    expect(labels).toContain('720p')
+    expect(labels).toContain('360p')
+    await w.findAll('[role="menuitemradio"]').find((i) => i.text() === '360p')!.trigger('click')
+    expect((w.find('video').element as HTMLVideoElement).src).toContain('/sd.mp4')
+  })
+
+  it('HLS-адаптер подгружается лениво и наполняет меню качества', async () => {
+    const setLevel = vi.fn()
+    const attachHls = vi.fn((_el: HTMLMediaElement, _url: string, opts: { onLevels: (l: unknown[]) => void, onLevelSwitched: (i: number) => void }) => {
+      opts.onLevels([{ index: 0, bandwidth: 5e5, height: 360, label: '360p' }, { index: 1, bandwidth: 2e6, height: 720, label: '720p' }])
+      opts.onLevelSwitched(0)
+      return { native: false, live: false, levels: [], level: 0, autoLevel: true, bandwidth: 0, setLevel, destroy: vi.fn() }
+    })
+    const hlsLoader = vi.fn(async () => ({ attachHls }) as never)
+    ;(window as unknown as { MediaSource: unknown }).MediaSource = function () {}
+    const w = mountVideo({ src: '/live/master.m3u8', hlsLoader, hlsOptions: { maxBufferAhead: 10 } })
+    await flushPromises()
+    expect(hlsLoader).toHaveBeenCalled()
+    expect(attachHls.mock.calls[0][1]).toBe('/live/master.m3u8')
+    expect(attachHls.mock.calls[0][2]).toMatchObject({ maxBufferAhead: 10 })
+    await w.find('[aria-label="Settings"]').trigger('click')
+    const items = w.findAll('[role="menuitemradio"]').map((i) => i.text())
+    expect(items).toEqual(expect.arrayContaining(['Auto360p', '720p', '360p']))
+    await w.findAll('[role="menuitemradio"]').find((i) => i.text() === '720p')!.trigger('click')
+    expect(setLevel).toHaveBeenCalledWith(1)
+    delete (window as unknown as { MediaSource?: unknown }).MediaSource
+  })
+
+  it('ошибка HLS показывается локализованным текстом', async () => {
+    const attachHls = vi.fn((_el: HTMLMediaElement, _url: string, opts: { onError: (e: { code: string, message: string }) => void }) => {
+      opts.onError({ code: 'encrypted', message: 'SAMPLE-AES' })
+      return { destroy: vi.fn(), setLevel: vi.fn() }
+    })
+    ;(window as unknown as { MediaSource: unknown }).MediaSource = function () {}
+    const w = mountVideo({ src: '/x.m3u8', hlsLoader: async () => ({ attachHls }) as never })
+    await flushPromises()
+    expect(w.find('[role="alert"]').text()).toContain('Encrypted streams')
+    delete (window as unknown as { MediaSource?: unknown }).MediaSource
+  })
+
+  it('субтитры: меню, дорожки track, главы из VTT', async () => {
+    const w = mountVideo({
+      src: '/a.mp4',
+      tracks: [
+        { src: '/en.vtt', srclang: 'en', label: 'English', default: true },
+        { src: '/de.vtt', srclang: 'de', label: 'Deutsch' },
+        { src: '/ch.vtt', kind: 'chapters' },
+      ],
+    })
+    await flushPromises()
+    const tracks = w.findAll('track')
+    expect(tracks).toHaveLength(2)
+    expect(tracks[0].attributes('kind')).toBe('subtitles')
+    expect(fetch).toHaveBeenCalledWith('/ch.vtt', expect.anything())
+    await w.find('[aria-label="Subtitles"]').trigger('click')
+    const items = w.findAll('[role="menuitemradio"]')
+    expect(items.map((i) => i.text())).toEqual(['Off', 'English', 'Deutsch'])
+    expect(items[1].attributes('aria-checked')).toBe('true')
+    await items[0].trigger('click')
+    await w.find('[aria-label="Subtitles"]').trigger('click')
+    expect(w.findAll('[role="menuitemradio"]')[0].attributes('aria-checked')).toBe('true')
+  })
+
+  it('горячие клавиши на корне и стрелки в меню не уходят в плеер', async () => {
+    const w = mountVideo({ src: '/a.mp4' })
+    const v = fakeMedia(w.find('video').element as HTMLVideoElement)
+    v.set({ duration: 100 })
+    v.fire('durationchange')
+    await w.find('.uid-video').trigger('keydown', { key: 'm' })
+    expect(v.muted).toBe(true)
+    await w.find('.uid-video').trigger('keydown', { key: '5' })
+    expect(v.currentTime).toBe(50)
+    await w.find('[aria-label="Settings"]').trigger('click')
+    await w.find('[role="menu"]').trigger('keydown', { key: 'ArrowRight' })
+    expect(v.currentTime).toBe(50)
+  })
+
+  it('кнопка play запускает воспроизведение и эмитит play', async () => {
+    const w = mountVideo({ src: '/a.mp4' })
+    await flushPromises()
+    const v = fakeMedia(w.find('video').element as HTMLVideoElement)
+    await w.find('.uid-video__big-play').trigger('click')
+    await flushPromises()
+    expect(v.play).toHaveBeenCalled()
+    expect(w.findComponent(UidVideo).emitted('play')).toHaveLength(1)
+    expect(w.find('.uid-video__big-play').exists()).toBe(false)
+  })
+
+  it('autoplay запускается без звука', async () => {
+    const w = mountVideo({ src: '/a.mp4', autoplay: true })
+    await flushPromises()
+    expect((w.find('video').element as HTMLVideoElement).muted).toBe(true)
+    expect(HTMLMediaElement.prototype.play).toHaveBeenCalled()
+  })
+})
diff --git a/src/components/Video/UidVideo.stories.ts b/src/components/Video/UidVideo.stories.ts
new file mode 100644
index 0000000..12d46aa
--- /dev/null
+++ b/src/components/Video/UidVideo.stories.ts
@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import UidVideo from './UidVideo.vue'
+
+const MDN = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos'
+const FLOWER_MP4 = `${MDN}/flower.mp4`
+const FLOWER_WEBM = `${MDN}/flower.webm`
+const HLS_TS = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
+const SUBTITLES = 'data:text/vtt;charset=utf-8,' + encodeURIComponent(
+  'WEBVTT\n\n00:00:00.500 --> 00:00:02.500\nA flower in the wind\n\n00:00:02.800 --> 00:00:05.000\n<i>Subtitles are drawn by the player</i>\n',
+)
+const CHAPTERS = 'data:text/vtt;charset=utf-8,' + encodeURIComponent(
+  'WEBVTT\n\n00:00:00.000 --> 00:00:02.000\nOpening\n\n00:00:02.000 --> 00:00:04.000\nBloom\n\n00:00:04.000 --> 00:00:06.000\nEnding\n',
+)
+
+const meta: Meta<typeof UidVideo> = {
+  title: 'Media/Video',
+  component: UidVideo,
+  tags: ['autodocs'],
+  argTypes: {
+    preload: { control: 'select', options: ['none', 'metadata', 'auto'] },
+    autoplay: { control: 'boolean' },
+    loop: { control: 'boolean' },
+    controls: { control: 'boolean' },
+    exclusive: { control: 'boolean' },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof UidVideo>
+
+const frame = (template: string) => `<div style="width:min(720px, 92vw)">${template}</div>`
+
+export const Playground: Story = {
+  args: { src: FLOWER_MP4, title: 'Flower', preload: 'metadata' },
+  render: (args: Record<string, unknown>) => ({
+    components: { UidVideo },
+    setup: () => ({ args }),
+    template: frame('<UidVideo v-bind="args" />'),
+  }),
+}
+
+export const Sources: Story = {
+  name: 'Несколько источников и качество',
+  render: () => ({
+    components: { UidVideo },
+    setup: () => ({
+      sources: [
+        { src: FLOWER_WEBM, type: 'video/webm', label: 'WebM' },
+        { src: FLOWER_MP4, type: 'video/mp4', label: 'MP4' },
+      ],
+    }),
+    template: frame('<UidVideo :sources="sources" title="Quality menu" />'),
+  }),
+}
+
+export const Tracks: Story = {
+  name: 'Субтитры и главы',
+  render: () => ({
+    components: { UidVideo },
+    setup: () => ({
+      src: FLOWER_MP4,
+      tracks: [
+        { src: SUBTITLES, srclang: 'en', label: 'English', default: true },
+        { src: CHAPTERS, kind: 'chapters' },
+      ],
+    }),
+    template: frame('<UidVideo :src="src" :tracks="tracks" />'),
+  }),
+}
+
+export const Hls: Story = {
+  name: 'HLS',
+  render: () => ({
+    components: { UidVideo },
+    setup: () => ({ HLS_TS }),
+    template: frame('<UidVideo :src="HLS_TS" title="HLS stream" />'),
+  }),
+}
+
+export const Resume: Story = {
+  name: 'Продолжить с места',
+  render: () => ({
+    components: { UidVideo },
+    setup: () => ({ src: FLOWER_MP4 }),
+    template: frame('<UidVideo :src="src" resume-key="storybook-flower" />'),
+  }),
+}
+
+export const Errors: Story = {
+  name: 'Ошибки',
+  render: () => ({
+    components: { UidVideo },
+    template: `
+      <div style="display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));width:min(720px, 92vw)">
+        <UidVideo src="/missing.mp4" />
+        <UidVideo :sources="[{ src: '/a.mkv', type: 'video/x-matroska; codecs=theora' }]" />
+      </div>
+    `,
+  }),
+}
diff --git a/src/components/Video/UidVideo.vue b/src/components/Video/UidVideo.vue
new file mode 100644
index 0000000..54894b6
--- /dev/null
+++ b/src/components/Video/UidVideo.vue
@@ -0,0 +1,778 @@
+<script setup lang="ts">
+import '../Media/UidMedia.css'
+import './UidVideo.css'
+import {
+  computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch,
+} from 'vue'
+import {
+  Captions, CircleAlert, LoaderCircle, Maximize, Minimize, Pause, PictureInPicture2, Play,
+  RotateCcw, Settings, Volume1, Volume2, VolumeX,
+} from 'lucide-vue-next'
+import UidIcon from '../../icons/UidIcon.vue'
+import UidMediaScrubber from '../Media/UidMediaScrubber.vue'
+import UidMediaMenu, { type UidMediaMenuGroup } from '../Media/UidMediaMenu.vue'
+import { useMediaController, type UidMediaErrorInfo } from '../Media/useMediaController.js'
+import { useMediaLocale } from '../Media/useMediaLocale.js'
+import { useLocale } from '../../composables/useLocale.js'
+import {
+  PLAYBACK_RATES, cueAt, cueText, formatTime, isHlsSource, orderSources, parseThumbnail, parseVtt,
+  type UidMediaCue, type UidMediaSource, type UidMediaTrack,
+} from '../Media/mediaUtils.js'
+import type { HlsLevel, HlsOptions, HlsSession } from '../../hls/index.js'
+
+export type UidHlsModule = typeof import('../../hls/index.js')
+
+export interface UidVideoProps {
+  src?: string
+  /** Alternatives in order of preference; labelled ones form the quality menu. */
+  sources?: UidMediaSource[]
+  poster?: string
+  /** WebVTT subtitles, captions and chapters. */
+  tracks?: UidMediaTrack[]
+  /** WebVTT with sprite thumbnails (`sprite.jpg#xywh=x,y,w,h`) shown over the scrub bar. */
+  thumbnails?: string
+  /** Starts playing muted as soon as possible (browsers block unmuted autoplay). */
+  autoplay?: boolean
+  muted?: boolean
+  loop?: boolean
+  preload?: 'none' | 'metadata' | 'auto'
+  /** `false` hides the kit's controls (the element stays bare). */
+  controls?: boolean
+  crossorigin?: '' | 'anonymous' | 'use-credentials'
+  /** Starting this player pauses the other exclusive players on the page. */
+  exclusive?: boolean
+  /** Remembers the position in localStorage under this key and resumes from it. */
+  resumeKey?: string
+  rates?: number[]
+  hotkeys?: boolean
+  /** Box ratio before the video size is known, e.g. `16 / 9`. */
+  aspectRatio?: string
+  /** Accessible name of the player. */
+  title?: string
+  /** Milliseconds of inactivity before the controls hide while playing. */
+  autoHide?: number
+  hlsOptions?: Omit<HlsOptions, 'onLevels' | 'onLevelSwitched' | 'onError'>
+  /** Loads the HLS adapter; defaults to the lazily imported `@dskripchenko/ui/hls`. */
+  hlsLoader?: () => Promise<UidHlsModule>
+}
+
+const props = withDefaults(defineProps<UidVideoProps>(), {
+  src: undefined,
+  sources: undefined,
+  poster: undefined,
+  tracks: () => [],
+  thumbnails: undefined,
+  autoplay: false,
+  muted: false,
+  loop: false,
+  preload: 'metadata',
+  controls: true,
+  crossorigin: undefined,
+  exclusive: true,
+  resumeKey: undefined,
+  rates: () => PLAYBACK_RATES,
+  hotkeys: true,
+  aspectRatio: '16 / 9',
+  title: undefined,
+  autoHide: 2500,
+  hlsOptions: undefined,
+  hlsLoader: undefined,
+})
+
+const emit = defineEmits<{
+  play: []
+  pause: []
+  ended: []
+  error: [error: UidMediaErrorInfo]
+  qualitychange: [label: string]
+}>()
+
+const t = useMediaLocale()
+const uidLocale = useLocale()
+const root = ref<HTMLElement | null>(null)
+const video = ref<HTMLVideoElement | null>(null)
+const trackEls = ref<HTMLTrackElement[]>([])
+
+const captionIndex = ref(-1)
+let lastCaption = 0
+
+const ctrl = useMediaController(video, {
+  exclusive: () => props.exclusive,
+  fullscreenTarget: root,
+  resumeKey: () => props.resumeKey,
+  onCaptionsToggle: () => toggleCaptions(),
+})
+const { state } = ctrl
+
+// ---- sources ----
+
+const allSources = computed<UidMediaSource[]>(() =>
+  props.sources?.length ? props.sources : props.src ? [{ src: props.src }] : [],
+)
+const candidates = shallowRef<UidMediaSource[]>([])
+const active = ref(-1)
+const hls = shallowRef<HlsSession | null>(null)
+const hlsLevels = ref<HlsLevel[]>([])
+const hlsLevel = ref(-1)
+const hlsAuto = ref(true)
+let loadToken = 0
+
+function hlsPlayable(el: HTMLVideoElement): boolean {
+  const w = typeof window !== 'undefined' ? (window as unknown as Record<string, unknown>) : {}
+  return !!el.canPlayType('application/vnd.apple.mpegurl') || !!w.MediaSource || !!w.ManagedMediaSource
+}
+
+function teardownHls(): void {
+  hls.value?.destroy()
+  hls.value = null
+  hlsLevels.value = []
+  hlsLevel.value = -1
+}
+
+async function load(index: number, resume?: { time: number, play: boolean }): Promise<void> {
+  const el = video.value
+  if (!el) return
+  const token = ++loadToken
+  teardownHls()
+  ctrl.setError(null)
+  active.value = index
+  const source = candidates.value[index]
+  if (!source) {
+    if (allSources.value.length) ctrl.setError({ kind: 'unsupported' })
+    return
+  }
+  if (resume) {
+    el.addEventListener('loadedmetadata', () => {
+      if (resume.time) ctrl.seek(resume.time)
+      if (resume.play) ctrl.play().catch(() => {})
+    }, { once: true })
+  }
+  if (isHlsSource(source)) {
+    try {
+      const mod = await (props.hlsLoader ?? (() => import('../../hls/index.js')))()
+      if (token !== loadToken) return
+      hls.value = mod.attachHls(el, source.src, {
+        ...props.hlsOptions,
+        onLevels: (levels) => { hlsLevels.value = levels },
+        onLevelSwitched: (i) => { hlsLevel.value = i },
+        onError: (e) => ctrl.setError({ kind: e.code, detail: e.message }),
+      })
+    } catch (e) {
+      ctrl.setError({ kind: 'unknown', detail: (e as Error).message })
+    }
+  } else {
+    el.src = source.src
+    el.load()
+  }
+  if (props.autoplay && !resume) {
+    el.muted = true
+    ctrl.play().catch(() => {})
+  }
+}
+
+function reset(): void {
+  const el = video.value
+  if (!el) return
+  candidates.value = orderSources(allSources.value, (type) => el.canPlayType(type), hlsPlayable(el))
+  load(0)
+}
+
+watch(allSources, reset)
+
+watch(() => state.error, (err) => {
+  if (!err) return
+  // A source the browser turned down: fall back to the next candidate.
+  if ((err.kind === 'unsupported' || err.kind === 'decode') && active.value + 1 < candidates.value.length && !hls.value) {
+    load(active.value + 1)
+    return
+  }
+  emit('error', err)
+})
+
+const errorMessage = computed(() => {
+  const err = state.error
+  if (!err) return ''
+  return t.value.errors[err.kind] ?? t.value.errors.unknown
+})
+
+function retry(): void {
+  const time = state.currentTime
+  load(Math.max(0, active.value), { time, play: true })
+}
+
+// ---- quality ----
+
+const labelledSources = computed(() => candidates.value.filter((s) => s.label && !isHlsSource(s)))
+
+const qualityGroup = computed<UidMediaMenuGroup | null>(() => {
+  if (hlsLevels.value.length > 1) {
+    const current = hlsLevels.value[hlsLevel.value]?.label
+    const options = [
+      { value: -1, label: t.value.auto, hint: hlsAuto.value && current ? current : undefined },
+      ...hlsLevels.value.slice().reverse().map((l) => ({ value: l.index, label: l.label })),
+    ]
+    return { id: 'quality', label: t.value.quality, value: hlsAuto.value ? -1 : hlsLevel.value, options }
+  }
+  if (labelledSources.value.length > 1) {
+    const cur = candidates.value[active.value]
+    return {
+      id: 'quality',
+      label: t.value.quality,
+      value: cur ? candidates.value.indexOf(cur) : null,
+      options: labelledSources.value.map((s) => ({ value: candidates.value.indexOf(s), label: s.label as string })),
+    }
+  }
+  return null
+})
+
+function setQuality(value: number): void {
+  if (hlsLevels.value.length > 1) {
+    hlsAuto.value = value < 0
+    hls.value?.setLevel(value)
+    emit('qualitychange', value < 0 ? 'auto' : hlsLevels.value[value]?.label ?? '')
+    return
+  }
+  if (value === active.value) return
+  load(value, { time: state.currentTime, play: !state.paused })
+  emit('qualitychange', candidates.value[value]?.label ?? '')
+}
+
+// ---- tracks: captions, chapters, thumbnails ----
+
+const textTracks = computed(() => props.tracks.filter((tr) => tr.kind !== 'chapters'))
+const chapterTrack = computed(() => props.tracks.find((tr) => tr.kind === 'chapters'))
+const chapters = ref<UidMediaCue[]>([])
+const thumbCues = ref<UidMediaCue[]>([])
+const captionLines = ref<string[]>([])
+
+async function fetchCues(url: string | undefined): Promise<UidMediaCue[]> {
+  if (!url || typeof fetch === 'undefined') return []
+  try {
+    const res = await fetch(url, { credentials: props.crossorigin === 'use-credentials' ? 'include' : 'same-origin' })
+    return res.ok ? parseVtt(await res.text()) : []
+  } catch {
+    return []
+  }
+}
+
+watch(() => chapterTrack.value?.src, async (url) => { chapters.value = await fetchCues(url) }, { immediate: true })
+watch(() => props.thumbnails, async (url) => { thumbCues.value = await fetchCues(url) }, { immediate: true })
+
+function thumbnailAt(time: number) {
+  const cue = cueAt(thumbCues.value, time)
+  return cue && props.thumbnails ? parseThumbnail(cue.text, props.thumbnails) : null
+}
+
+const currentChapter = computed(() => cueAt(chapters.value, state.currentTime)?.text)
+
+watch(textTracks, (list) => {
+  const def = list.findIndex((tr) => tr.default)
+  captionIndex.value = def
+  if (def >= 0) lastCaption = def
+}, { immediate: true })
+
+let cueTrack: TextTrack | null = null
+
+function onCueChange(): void {
+  const cues = cueTrack?.activeCues
+  const lines: string[] = []
+  if (cues) {
+    for (let i = 0; i < cues.length; i++) {
+      const text = (cues[i] as VTTCue).text
+      if (text) lines.push(...cueText(text).split('\n'))
+    }
+  }
+  captionLines.value = lines
+}
+
+function applyCaptionModes(): void {
+  cueTrack?.removeEventListener('cuechange', onCueChange)
+  cueTrack = null
+  captionLines.value = []
+  const nativeFs = (video.value as { webkitDisplayingFullscreen?: boolean } | null)?.webkitDisplayingFullscreen
+  trackEls.value.forEach((el, i) => {
+    const tt = el.track
+    if (!tt) return
+    if (i === captionIndex.value) {
+      // Hidden: the browser keeps cues current, the kit draws them; iOS native full screen shows its own.
+      tt.mode = nativeFs ? 'showing' : 'hidden'
+      cueTrack = tt
+    } else {
+      tt.mode = 'disabled'
+    }
+  })
+  const active = cueTrack as TextTrack | null
+  if (active) {
+    active.addEventListener('cuechange', onCueChange)
+    onCueChange()
+  }
+}
+
+watch([captionIndex, () => textTracks.value.length], () => nextTick(applyCaptionModes))
+watch(() => state.fullscreen, () => nextTick(applyCaptionModes))
+
+function toggleCaptions(): void {
+  if (!textTracks.value.length) return
+  if (captionIndex.value >= 0) {
+    lastCaption = captionIndex.value
+    captionIndex.value = -1
+  } else {
+    captionIndex.value = Math.min(lastCaption, textTracks.value.length - 1)
+  }
+}
+
+const captionsGroup = computed<UidMediaMenuGroup>(() => ({
+  id: 'captions',
+  label: t.value.captions,
+  value: captionIndex.value,
+  options: [
+    { value: -1, label: t.value.captionsOff },
+    ...textTracks.value.map((tr, i) => ({ value: i, label: tr.label ?? tr.srclang ?? `#${i + 1}` })),
+  ],
+}))
+
+// ---- settings menu ----
+
+const rateGroup = computed<UidMediaMenuGroup>(() => ({
+  id: 'rate',
+  label: t.value.speed,
+  value: state.rate,
+  options: props.rates.map((r) => ({ value: r, label: r === 1 ? t.value.normalSpeed : `${r}×` })),
+}))
+
+const settingsGroups = computed(() => (qualityGroup.value ? [rateGroup.value, qualityGroup.value] : [rateGroup.value]))
+
+function onMenuSelect(group: string, value: string | number): void {
+  if (group === 'rate') ctrl.setRate(Number(value))
+  else if (group === 'quality') setQuality(Number(value))
+  else if (group === 'captions') {
+    captionIndex.value = Number(value)
+    if (captionIndex.value >= 0) lastCaption = captionIndex.value
+  }
+}
+
+// ---- controls visibility and gestures ----
+
+const controlsVisible = ref(true)
+const menuOpen = ref(false)
+const scrubbing = ref(false)
+const started = ref(false)
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+function clearHide(): void {
+  if (hideTimer) clearTimeout(hideTimer)
+  hideTimer = null
+}
+
+function scheduleHide(delay = props.autoHide): void {
+  clearHide()
+  if (!state.playing || menuOpen.value || scrubbing.value) return
+  hideTimer = setTimeout(() => {
+    if (state.playing && !menuOpen.value && !scrubbing.value) controlsVisible.value = false
+  }, delay)
+}
+
+function poke(): void {
+  controlsVisible.value = true
+  scheduleHide()
+}
+
+watch(() => state.playing, (playing) => {
+  if (playing) {
+    started.value = true
+    scheduleHide()
+    emit('play')
+  } else {
+    controlsVisible.value = true
+    clearHide()
+  }
+})
+watch(() => state.paused, (p) => { if (p && started.value && !state.ended) emit('pause') })
+watch(() => state.ended, (e) => { if (e) emit('ended') })
+watch([menuOpen, scrubbing], ([m, s]) => (m || s ? (clearHide(), (controlsVisible.value = true)) : scheduleHide()))
+
+const flash = ref<{ side: 'left' | 'right', seconds: number } | null>(null)
+let flashTimer: ReturnType<typeof setTimeout> | null = null
+let lastTap = { time: 0, side: '' as 'left' | 'right' | 'center' | '' }
+let tapTimer: ReturnType<typeof setTimeout> | null = null
+
+function showFlash(side: 'left' | 'right', seconds: number): void {
+  const accumulate = flash.value && flash.value.side === side
+  flash.value = { side, seconds: accumulate ? (flash.value as { seconds: number }).seconds + seconds : seconds }
+  if (flashTimer) clearTimeout(flashTimer)
+  flashTimer = setTimeout(() => { flash.value = null }, 700)
+}
+
+function onSurfaceUp(e: PointerEvent): void {
+  if (e.button !== 0 || state.error) return
+  if (e.pointerType === 'mouse') {
+    ctrl.toggle()
+    poke()
+    return
+  }
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const x = (e.clientX - rect.left) / (rect.width || 1)
+  const side = x < 0.35 ? 'left' : x > 0.65 ? 'right' : 'center'
+  const now = Date.now()
+  if (now - lastTap.time < 300 && side === lastTap.side && side !== 'center') {
+    if (tapTimer) clearTimeout(tapTimer)
+    tapTimer = null
+    ctrl.skip(side === 'left' ? -10 : 10)
+    showFlash(side, 10)
+    lastTap = { time: now, side }
+    return
+  }
+  lastTap = { time: now, side }
+  if (tapTimer) clearTimeout(tapTimer)
+  tapTimer = setTimeout(() => {
+    tapTimer = null
+    if (!started.value || state.paused) {
+      ctrl.toggle()
+      poke()
+    } else if (controlsVisible.value) {
+      controlsVisible.value = false
+    } else {
+      poke()
+    }
+  }, 260)
+}
+
+function onSurfaceDblClick(e: MouseEvent): void {
+  if ((e as PointerEvent).pointerType && (e as PointerEvent).pointerType !== 'mouse') return
+  ctrl.toggleFullscreen().catch(() => {})
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (!props.hotkeys || !props.controls) return
+  const target = e.target as HTMLElement
+  const tag = target.tagName
+  if ((tag === 'BUTTON' || tag === 'A') && (e.key === ' ' || e.key === 'Enter')) return
+  if (tag === 'INPUT' && e.key.startsWith('Arrow')) return
+  if (tag === 'INPUT' && (target as HTMLInputElement).type !== 'range') return
+  if (ctrl.handleKey(e)) {
+    e.preventDefault()
+    poke()
+    if (e.key === 'ArrowLeft' || e.key === 'j') showFlash('left', e.key === 'j' ? 10 : 5)
+    if (e.key === 'ArrowRight' || e.key === 'l') showFlash('right', e.key === 'l' ? 10 : 5)
+  }
+}
+
+// ---- derived UI ----
+
+const volumeIcon = computed(() => (state.muted || state.volume === 0 ? VolumeX : state.volume < 0.5 ? Volume1 : Volume2))
+const showHours = computed(() => state.duration >= 3600)
+const timeText = computed(() => `${formatTime(state.currentTime, showHours.value)} / ${formatTime(state.duration, showHours.value)}`)
+const atLiveEdge = computed(() => state.live && state.duration - state.currentTime < 8)
+const loadingVisible = computed(() => !state.error && (state.waiting || (state.seeking && !state.paused)))
+const coarse = ref(false)
+// Desktop: the centre button only invites the first start (and a replay); on touch it is the
+// play / pause toggle shown together with the controls, as phone players do.
+const bigPlayVisible = computed(() => {
+  if (state.error || loadingVisible.value) return false
+  if (!started.value || state.ended) return true
+  return coarse.value ? controlsVisible.value : false
+})
+const hasVideoSize = ref(false)
+
+function goLive(): void {
+  ctrl.seek(state.duration - 1)
+  if (state.paused) ctrl.play().catch(() => {})
+}
+
+function onVolumeInput(e: Event): void {
+  ctrl.setVolume(Number((e.target as HTMLInputElement).value))
+}
+
+function onMeta(): void {
+  hasVideoSize.value = !!video.value?.videoWidth
+}
+
+onMounted(() => {
+  coarse.value = typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches
+  if (props.muted && video.value) video.value.muted = true
+  reset()
+  applyCaptionModes()
+})
+
+onBeforeUnmount(() => {
+  clearHide()
+  if (flashTimer) clearTimeout(flashTimer)
+  if (tapTimer) clearTimeout(tapTimer)
+  cueTrack?.removeEventListener('cuechange', onCueChange)
+  teardownHls()
+})
+
+defineExpose({
+  play: ctrl.play,
+  pause: ctrl.pause,
+  toggle: ctrl.toggle,
+  seek: ctrl.seek,
+  state,
+  media: video,
+})
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="uid-video"
+    :class="{
+      'uid-video--controls-hidden': controls && !controlsVisible,
+      'uid-video--playing': state.playing,
+      'uid-video--fullscreen': state.fullscreen,
+      'uid-video--started': started,
+      'uid-video--paused': state.paused,
+      'uid-video--bare': !controls,
+    }"
+    :style="{ aspectRatio: state.fullscreen ? undefined : aspectRatio }"
+    role="region"
+    data-media-menu-bounds
+    :aria-label="title ?? t.play"
+    tabindex="0"
+    @keydown="onKeydown"
+    @pointermove="(e) => e.pointerType === 'mouse' && poke()"
+    @pointerleave="(e) => e.pointerType === 'mouse' && scheduleHide(600)"
+    @focusin="poke"
+  >
+    <video
+      ref="video"
+      class="uid-video__media"
+      :poster="poster"
+      :preload="preload"
+      :loop="loop"
+      :crossorigin="crossorigin"
+      :controls="!controls"
+      playsinline
+      webkit-playsinline
+      :title="title"
+      @loadedmetadata="onMeta"
+    >
+      <track
+        v-for="(tr, i) in textTracks"
+        :key="`${i}:${tr.src}`"
+        ref="trackEls"
+        :kind="tr.kind ?? 'subtitles'"
+        :src="tr.src"
+        :srclang="tr.srclang"
+        :label="tr.label"
+      >
+    </video>
+
+    <template v-if="controls">
+      <div
+        class="uid-video__surface"
+        aria-hidden="true"
+        @pointerup="onSurfaceUp"
+        @dblclick="onSurfaceDblClick"
+      />
+
+      <div
+        v-if="captionLines.length"
+        class="uid-video__captions"
+      >
+        <span
+          v-for="(line, i) in captionLines"
+          :key="i"
+          class="uid-video__caption-line"
+        >{{ line }}</span>
+      </div>
+
+      <div
+        v-if="flash"
+        class="uid-video__flash"
+        :class="`uid-video__flash--${flash.side}`"
+        aria-hidden="true"
+      >
+        {{ flash.side === 'left' ? '−' : '+' }}{{ flash.seconds }} s
+      </div>
+
+      <div
+        v-if="loadingVisible"
+        class="uid-video__loading"
+        role="status"
+        :aria-label="t.loading"
+      >
+        <UidIcon
+          :icon="LoaderCircle"
+          :size="44"
+          class="uid-media__spin"
+        />
+      </div>
+
+      <button
+        v-if="bigPlayVisible"
+        type="button"
+        class="uid-video__big-play"
+        :aria-label="state.ended ? t.replay : state.paused ? t.play : t.pause"
+        @click="ctrl.toggle(); poke()"
+      >
+        <UidIcon
+          :icon="state.ended ? RotateCcw : state.paused ? Play : Pause"
+          :size="32"
+          :class="{ 'uid-media__fill': !state.ended, 'uid-video__big-icon--pause': !state.paused }"
+        />
+      </button>
+
+      <div
+        v-if="state.error"
+        class="uid-video__error"
+        role="alert"
+      >
+        <UidIcon
+          :icon="CircleAlert"
+          :size="28"
+        />
+        <p class="uid-video__error-text">
+          {{ errorMessage }}
+        </p>
+        <button
+          type="button"
+          class="uid-video__retry"
+          @click="retry"
+        >
+          {{ t.retry }}
+        </button>
+      </div>
+
+      <div
+        class="uid-video__controls"
+        @pointermove.stop="poke"
+      >
+        <UidMediaScrubber
+          class="uid-video__scrubber"
+          :current-time="state.currentTime"
+          :duration="state.duration"
+          :buffered="state.buffered"
+          :chapters="chapters"
+          :thumbnail-at="thumbCues.length ? thumbnailAt : undefined"
+          :label="t.seek"
+          :value-text="t.timeOf"
+          :disabled="!!state.error"
+          @seek="ctrl.seek"
+          @scrubstart="scrubbing = true"
+          @scrubend="scrubbing = false"
+        />
+        <div class="uid-video__bar">
+          <button
+            type="button"
+            class="uid-media__button"
+            :aria-label="state.playing || !state.paused ? t.pause : t.play"
+            :title="state.playing || !state.paused ? t.pause : t.play"
+            @click="ctrl.toggle"
+          >
+            <UidIcon
+              :icon="!state.paused ? Pause : state.ended ? RotateCcw : Play"
+              :size="20"
+              :class="{ 'uid-media__fill': !state.ended || !state.paused }"
+            />
+          </button>
+          <div class="uid-media__volume">
+            <button
+              type="button"
+              class="uid-media__button"
+              :aria-label="state.muted ? t.unmute : t.mute"
+              :title="state.muted ? t.unmute : t.mute"
+              @click="ctrl.toggleMute"
+            >
+              <UidIcon
+                :icon="volumeIcon"
+                :size="20"
+              />
+            </button>
+            <input
+              class="uid-media__volume-range"
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              :value="state.muted ? 0 : state.volume"
+              :aria-label="t.volume"
+              :aria-valuetext="`${Math.round((state.muted ? 0 : state.volume) * 100)}%`"
+              :style="{ '--_fill': `${(state.muted ? 0 : state.volume) * 100}%` }"
+              @input="onVolumeInput"
+            >
+          </div>
+          <button
+            v-if="state.live"
+            type="button"
+            class="uid-video__live"
+            :class="{ 'uid-video__live--edge': atLiveEdge }"
+            :aria-label="t.goLive"
+            @click="goLive"
+          >
+            <span
+              class="uid-video__live-dot"
+              aria-hidden="true"
+            />{{ t.live }}
+          </button>
+          <span
+            v-else
+            class="uid-media__time"
+          >{{ timeText }}</span>
+          <span
+            v-if="currentChapter"
+            class="uid-video__chapter"
+            :title="currentChapter"
+          >{{ currentChapter }}</span>
+          <span class="uid-video__spacer" />
+          <UidMediaMenu
+            v-if="textTracks.length"
+            :close-label="uidLocale.common.close"
+            :label="t.captions"
+            :groups="[captionsGroup]"
+            :button-class="captionIndex >= 0 ? 'uid-media__button--on' : ''"
+            @select="onMenuSelect"
+            @update:open="menuOpen = $event"
+          >
+            <UidIcon
+              :icon="Captions"
+              :size="20"
+            />
+          </UidMediaMenu>
+          <UidMediaMenu
+            :label="t.settings"
+            :close-label="uidLocale.common.close"
+            :groups="settingsGroups"
+            @select="onMenuSelect"
+            @update:open="menuOpen = $event"
+          >
+            <UidIcon
+              :icon="Settings"
+              :size="20"
+            />
+            <span
+              v-if="state.rate !== 1"
+              class="uid-media__badge"
+            >{{ state.rate }}×</span>
+          </UidMediaMenu>
+          <button
+            v-if="ctrl.canPip.value && hasVideoSize"
+            type="button"
+            class="uid-media__button uid-video__pip"
+            :aria-label="state.pip ? t.exitPip : t.pip"
+            :title="state.pip ? t.exitPip : t.pip"
+            @click="ctrl.togglePip().catch(() => {})"
+          >
+            <UidIcon
+              :icon="PictureInPicture2"
+              :size="20"
+            />
+          </button>
+          <button
+            v-if="ctrl.canFullscreen.value"
+            type="button"
+            class="uid-media__button"
+            :aria-label="state.fullscreen ? t.exitFullscreen : t.fullscreen"
+            :title="state.fullscreen ? t.exitFullscreen : t.fullscreen"
+            @click="ctrl.toggleFullscreen().catch(() => {})"
+          >
+            <UidIcon
+              :icon="state.fullscreen ? Minimize : Maximize"
+              :size="20"
+            />
+          </button>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/components/Video/index.ts b/src/components/Video/index.ts
new file mode 100644
index 0000000..57a14b7
--- /dev/null
+++ b/src/components/Video/index.ts
@@ -0,0 +1,2 @@
+export { default as UidVideo } from './UidVideo.vue'
+export type { UidVideoProps, UidHlsModule } from './UidVideo.vue'
diff --git a/src/hls/__fixtures__/tiny-init.mp4 b/src/hls/__fixtures__/tiny-init.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..4d61a42f90b943c9a0ce4a254905f771d5fca0df
GIT binary patch
literal 1352
zcmb_cy^hmB5T3n|2qBPy2;zzqAv&Zhj#F|!L87t*MG87Zq!XNklXZx7c5Hb!)&UYq
zNx>WN1PC4?1r<C2B|=mbh>B~_@y*)Cj=4KgF!JvFeLEh{&X|arWBoLARj^C6Ld>yx
zez?;ms&4o}5EGH-#}f%&ph4Rxf(TDeOA5>--O7<CNh`>qr6c<Q&PV#dyt7gOmZF{E
zDIqO}^44L2I*!x|eBJSsHWvPPx_tW>l;?at&0oCorE3G%@@2UW>*n}__lDh^NH0p`
zQS3@5lbH{o2Yq`gJ%=&kmhVo-5E`*>f)-O=lZme>BZo0e?7ujRyjCjzRC?$^eyg;~
zE{8F%?RbRCGgOS3SS*yF50Mv>Xxsz7x4qfj>~^+Vo;y6;>g^=HWM4%|h<1UxBP3lo
z{!FV+z~6nk`&`tCD#V+xezf-<3#v`Nefij4{5m?~!}ZWsAvmYOtFE-EJ48d!)hJWI
z8_=H>bQXab1-VUpKchczhkubUH7FONq+83!PU(+JrT)O7B>2PA`y-i?llnsivuW|Q
z_o2%|f7H_csH>zuGVH(f#)q^wUX*%ciov$iKzRuSUm+T_Z9F|kNgfWW%;)nPn2U4Z
z*Q~3?xxXOVUsPeKUU@nAN;OD=%ib93C>^B)1KWSNZtDB7bBI{@Ef@~b6g|(LEz5q+
yr|h?9QuCMZ`Htay=6Z2lafOi`hCES!Xv0nZ4{L99z&+TMwmEEqV{XRT-24U>tg=l2

literal 0
HcmV?d00001

diff --git a/src/hls/__fixtures__/tiny-seg.m4s b/src/hls/__fixtures__/tiny-seg.m4s
new file mode 100644
index 0000000000000000000000000000000000000000..32742c124ee8bd2e349f2c6089dc26194f9b8058
GIT binary patch
literal 5750
zcmcIoc{r5syMKqWB-s<f82dhq5tFe+i+$h17-ldrmYI<~d~MMpM5vIE5<-$CL?TH<
zmJ)>sA=zWhc_+>}zw2DTbN)N`HP`#OpU?B$_w%{$=Y8L~W&i*<My7-Y5Xm@i05m!h
z$%GKlRU;E{ArLwV03gWhc>v2k0&06a-#UFRdXN3r7zO~agYD7ms6G691#{73oM6#=
z!$zXNzbEK&5<R_ff2qIw0r?aXmd+oi(0K+x1N6bz10Wo9hU^LBrFh~fd+vTD0C-bK
zL4E*m=pe`(0z+PbLO?s{4D4xt0RX&oLU4b4m_7gvM0#!@XMg_K|1uBOP45BZz`xN4
zZuK|E$ljj7zth*fr;m{?n;!sJ+5a<UA6xe^cpnq@G4p@$Pxr?$`xvp0@%xyxk8%5W
zbsy9A5j^9+S`+s1&OYYv<E4Ep*hkVng83L=pms11FN%o6Qo!+Jrh_zE$*AG%i|LWG
zwV4XT&=K*)r4UthHK-!g!=HqQs;DEOB!sG}D%2f;REHz6;KW%aaDlR^h2a@RHK?B5
zDR3nY?*UGn@(&30#d}hqs&F_$Q5CL=1W9iSB><(Y92^|1bdi9=`}<=3l>A9v%Jf~7
zyeULqaE*Teh2ZZ;MnOHW?pP1B3Y3KRL?fU$yt}WzhYwl>1xLZ5SU;?9C>f82hagb!
z5ET^!l!!-r<3ph2Aa~F^0SzFBf}!9QL&Bj|l;B_xc!3fLA$S~yo>2viz>u(hUU;;M
zI@H6P<WIz6z)%$^g@pI@C6GZ+BSZt|K>;0)Kq49rO2Fd6{QdA~RTTvl6{shcOu+<@
zeFy>c6?+K+12F!co@6`)t*8p6c$2^gdLmzce;=$jIKccjNA@LnfLi{OfJ6OAfA{bp
z5U~`x4uT&APx8fri$LDpH;9A{#d!D=1F#fu>;bk2ym<+JU<z;{2}@t&Nx~BGWUyK8
zn1E2wC*aWFSz)j^YyiCqcZ@p$OQvr^AmRVk6^ti%c~jiMIsX8>AI8f+0G!<;1He!p
zd?=V3tpeZoFhqhMxR&gJ_rrSxQP65|x=0e1-cS;r><tE!JTU)NEIp9qf%YJILW%BR
zSLsE81GFka2@VaUmx6{Xse^6+J?~${hM?6oL4r)d2cXrUgaGh}z}o>lL2xf@Ab9%p
zvjn2S`?UmrIS$BMz+e8^-?z)=IK0ciD&HJ)zkg1nJg%3AnFhbazF3_8adttD$*RQR
z_~q7@>P48>s)@QrjGpQIPakN!7qLJb^PQGo%gS$UFv_{xeo2kbuZWn@O3@K)=`<O2
zsFXKk{#<l%ka%Ac*Pb90b6AGUQjGUP59K*2z0Iq(tV9(OU7TEq(fgcj>%H?M?h<qI
zgDNuI!hfgj>`eQ&)@9pK0Nyk6h7%?o;og=c)5Lr4>#+PL``hJ7^LuVDi&bo7X~QLF
z>S~#X-<}J5aIjT}$)-zfHe~3WT4Q_n3)*VY5>E8~w?EFbqwyR9&{BLcdrG6i?F-z7
zk5X(U(Fz=cOn=JRH8fR4Z&lCBw}e+(SBi^<#=Hrumu(GkXt28?J<P_P9cOkK)et*y
z`S!qL2V1RUZ$FrR5?fUv$PS!(RQO~~MCi3##Hq#1j1O4Jo8|oCT|E@svG=#-DTys9
z*_|@sKNYVJB%U4S;Sg)&;rG#`n!`2Ji%I7h`~}cv8_m2=nTzv=6AtrdipBq4x8~A1
z-z|f`BI5Vj>`kN7QV{EfsIK|bIXua|8|cyux5}Wh<@R_r?w!uy3ssdPiEIs{3J%wC
zc^4I05rLH_PGk$&UjpJzU$Sl*=OENi_-%_+t1`5HZymiz`Q73jqmlSTOF>@ZXwfj@
zpN(0sBwr%&b=IiAsXuXBy4O(e+Hva3w7i-O=R`+NKSu6rkI2d)2JQ(d?z|P*uS#Ux
zpY&X;F5TqU(wtPCyu#f)?j+34wgkBb=vB7*5K-z<DumrCPNay2zQWxJ6UbeHJXd}V
z@65~UcV}vgJYD9p>U7@;CJymTj|-ZAd9}Ra9*<5i1(rsab+mV`OWFjTn~o4JPzPVQ
ze5a>-W~DQ@QyYdqmXD63Bf<A<onDTFuR+vdQ(agX?JM8p8QN3~N4GxzcNS_?M|s>@
z1?6UN)8H&OPlQX_@Xir<jiWZrw8Xe%n(}(fW@Yzbv1@x-{6tQgTuPz@EuZPomwS$-
z(l>luwB2)|S;F!$%KGc0nF11dPp<w7t$Q#j8+5Nt&*j!(q{7ugg&e8Ay0~I-??8#8
z*BM-29DDZM3mMF~h#VesSayVtN{wf>V?NpI-yi08sH$AQ4Rx4#K@`<fejfCv`K4D2
zDE_Eku71dMTJ)sO3+C7yVUJjr!o`Qo*5C{aBo|B3$B=dRe2)vDuLt^>dO6<bO7y(5
zO<0x$<EmfeZ7g`#g|4}tdBv4#Cfi$>EnPKg<=6N`T5fBb^))1+vGn||G~;=z2?a#L
zkt{(s<T(rV<7S}&es^M!>j*oRsavrlUr3&lFOLKv`t;Aj*4H<pk_Q4f<OgJh`mU5+
zzL69XLk)!-*4TRBS?|^0)aPoZ$l<WnR0KF))4kB4#C*J+;g$6=sEk)HH^GogAvk(w
zfiKvrkol2|RJZ7!`XYKIboF3W59pQXf<9a?=OI{$FIb5&P1;cMjW2FM%XKxULC}vO
zZ9^v4cur^Z^GJ!|*Rh*VZu$LQDjx+*uopel5lSjbDsWYR!TXWThegEdWKZCHp6H~#
z)P-PzM4F$0frAjT-QDYf{sA$MLQLVsMQh=cl1Y=l#>;*?mS<#r|M+QOA-P)8F)flP
zIP&Pe{MDO9R_R8zvTBFfi(>vyE6Q}l|37>}Alx~hx`N8zgyR}MNWBT8{fVOPqCSq@
ze>5{gn~z#r8{!We=-;MMF}s(jfe{#v6EsnpJ*~FGX<*Lz$-;t^0Mmb2ZnHJtPwAsA
zSFgGwxh%`&v{NltlT(TpCH0zeHecbX$nVLqeuLW1M)9|28)n%p;oX1ySW65JyB+aE
z>PYw-xk(M2##vU$j3u8a;4tL<HdAmVU#qhKG7W{=iG<kQ<T8JKm8qVGPiy797EQ?y
zucMKzPl)~sQCJgTKnd8Jh~d61Ei|v~YDMj!ONXpYl|D=irfHm|0PnJa(wF1R+Vxhn
z%^ePbCscERYm$&_g5Au`b%*l+uMM&EN%;FEmZ+~U$3srhm>9=6X>D%dH$(;g3CD9x
zb@S(P1_S5xnGdzPKqFdvt5%YUJv+cpB+H<CSX}3+KIp3HclQTTv<uB^RIJ8W!_$~h
zdpoME-bvieMi`R$<bjL4O=jG2j~QcQa+msxa>C#8-!blS7AU&BXyn48U=<xVZiTMC
zvF%2Br*#^rsnF>>cF8aLVKi2}$t2w2MPcsQ_^>kVqKQ`;9d6(8(44QqGxK+0Ro=y<
zNo9yO5`djo*`h7pX^Wz2N3Br9JnJUIioRIN%6+8VW*O5Npd@_~oYHR^@k}~i#rXYz
zFyd}M>YX$ZpIQx5^f6K&d|GqY4`~eRr+rC7CCKZ?Un~7A|E|rIWhyHhSHIiYv>x&F
z*@$#R*PN4mjdeK9dfJ$Qt1aD0<<9e}n{yFQo)t+764r*1>hD<Bhs!cAvKU&50INur
zb*s?(270|E6ypxfoC>P;_|nd@RP||}TzPr>`m{VgS;+CubB0{)7u(7rJyEP)D3*Li
zmI4Dyw#(cGmro}hQ+@@N&cvz66dOvaqS+YD1iE=+vP%i$KMx3BgV=r|cT1uSW}^{Y
zgL9#h0k)?Yai62<&5-d?(KPv|_g>!a2CiZ^&!5`dBNqPLb&a>ao?xSl{h32}A?f+{
z57x!udbH!bMTI28SB8@O*9FNk`2!YiHSwL<*BIUz9!9m?yHsXjzL7Mq9QNEX$(svO
zP_6XbXM+?R)RM}dQI@4qlDM7O+~6|BR)DwfvAba!+#x80Y-!lMEa}vuX%AU^%%kOW
zXj{BIf_tcH1v~!WFs_U${|f@35gJ<(5A9nGpH`}WCb|N@>8(n=Wgym@PdRgUd+-D;
z<^3-0`s4E2_x2gcv5K7DKiQcv9D!Tn%AGcEoZD%SIv50enT;9Q^OQ5Yo*8gndB*#a
z^NX61Xq*EKBA~Z27xha(zl}DWP$Vz)GRQYHt#)2L<RRsu<IlD08Wou#rDqi(vY~QU
zH6C|;yHP(%Z<@q;m2m@)KAm07iAU8m@FChBBRGwpPf8DSHM*vdF$~eoQ@K%K>3&~7
z1IkcatXIq{rah#8edt0+<|N)KA(8iSZ$m<QeSggltvpNi?oT{y$2BR+9Mx_^W<um7
z#iYBwn@K+AdJW4+^@qVe_afrGE**pALt21Edhvnzu>}@CEKpKQA8IQwG`^^<2pi|C
zK9VMNs^ZJ%ED$9#S}WCIUK*@&){Nsr1CD~DGr2*s)^~QFd~}|6Y!z26ytA|>d?wPg
z@LA3{ca6h`%o=3<b*ZtGv%M7@Qv*#jQEo#=!mwzm(3jIv&&lz8+>(mQ#a1hilI|Qu
zjC}>>{yxd~4PyIFIDWF%*&U^AQu$ymHn*y3R7Ky|-OH9Y7EuvAh-6hbfgUhCl;z8q
zB|@#7$>Q!fISlhSIh-oPp*6`9{8aYz87tVqU!#S+Vs46%sts}vM=5dIIPMDL+4d`C
z@=pBr)<@H;eW&CR=-SH@=yBQaopnVqJFfkvj`H=~KQw@KdN&9~jDNc!eSGjl5Uqce
zwoE<8>)J3GwjIe*+aPDdCNAvST<Cjb`|D#)OzIicyUx1eVXI*s^RW&Vyq@vG*712A
z1pz@+ldAeZtjTN7z2x~mWLAdT>xsU4$!yt~mLZ@rbn84??{3ZS1=L24lKUW6ZbAP1
z8A>tx6Y1!GX$GQw+J#K}wnfYP^U3aExHBw`W1z?aApkoWryWSdj$z(yTVw?4GU>yv
zG~ALf6f;PSjpyNl>Mn+J*PlM%9X3^M7+KfQEr0B`ye=<8wY{2oQ!3m>oCk4;kGJyH
zL9_Pa)d9UP=zN&EUFr6%QHB9iXhyzRSs`)mVT;R;Lv<~n7Rk6ZSq_7k-u$QXGm(Rv
zYqXA8TJ!cfr?>NM#zlq(It1>xRxSw>6XG;+M6_i$j;62g!h7s3k`2jJkon_WG+e~X
z;CD+C+3<X8qqES@te3$^CRQ7}cDARoHd@7jr?HKBM=d9Cxl8rvVt3{3QW4A-eB7{o
zCH$JHo>4)n#q^i4^{JtbuRPv`6N<Ibd-tnunZ9@*Cj}<V6Ld+{l(u;(YHKIpovW*1
zdj!?CRB_$yNE<h2O6td=TY*u?1^3=5TZO}_?fl%bdBR<%TWwF&rx=n}3RN$lQL}pC
zuScLIZvrQJQXRv*llqx7Oms6htX6MHp>Qs&2OYP*Io!Lx8M1dO?x`Gwx<9hBGenvf
zwxd>d=89`W8oGK|Pdqg5ekjLghFjUXnvwJ=hrv!ydWy?9TFXLzqkneQX+xm;NF?Q8
z#o53QM-wkA9AfAGcuORgN6o5>T%Ur=z5RvHUIw!|SN}L|^16VYS$xUDAbL|_gmq#v
zkb@d1lzD%$pPP`P6Ak<V9~5lZ1O2$(QfbW&G;MW@_IpQe&UURnsg6r-cEeUF)=}=x
z$~`On!USHS+d<WT!YpHt&@NI}H~g(HZRc-@p`20>zTRaErW246^-Au0oHc3(#ZNf7
zyj?I35qcjfC8yvl>1$oAw2@Q5sGd>K^}3SOY0qtk6nt^z=$qIAJH*(t#gMQ&pBw$t
z9bv-n?!t}Ko;gu{gP#LGki6?wVfj59gBv;TF;q?3!Wz-ard%%HbgsrRlz92WkYRaU
zRXARgU0D_~H?8X}qxGutrz>mlQ79`A`qo<h@nLuS<gwI2iwE_e;|31gHes>4u!84B
zNfe}6J1}xOkDNgNTr#jDBksz497z~WZu@7Y>RpueoypSJqpu^mSFR?X8V*?gtW?a}
zii-SkF{13`4@~7yf8fsm7GCJr{cpqyeOPaLPIn`%e}VRS+4k`V|K!q?C{%Z<ZEerZ
zBYp2N6_3=JQ1H@#>;s1=tah)Mu*c`Lz6u-Pi!?oW+V*42IN#IWMx)ZXn7)6CKa5ff
z8{ExYervZF);xVE%iBwA&AfXtdSGE$(Z)&NjjP^k_?l9;>jZl_{T**`URKfSRPVh5
z=CnkG$z~cyEzQ5ZuUYf4ZMH(}S)&#K{-yOkX7ALuyVN@p+|{=k<08kKFiqx$qk61M
zuNUXbnUAI$OIX^t+=#w$(I`HxOyvoiET26*NlUVUxBxpFjS~5UFn({5ZYVfY7cX#d
z(0#slL?%DHPL(t}HQ$=^&yR`TvUWRdesZm({o~1r^Gg+Ghq{Cctt5%E=FxxqW0{?9
zfbG3ZG5)gIl}<DNyi1$@7=*OXnrOOIfiQ}&DB(0N^U2@p5V{xSrfG9(mDP>YcZ8Vw
ztPA$6bEKvkpUHKG@9tuL)2a9zRi~Y+=AUN6+670mY7$NkX_axCP?q#JUMX`_DWQKf
z{tkc`AO+sIs2&U+-1>$Yn%Rw*54L|TK?qeUKRcO0_{nE$YXgIw+-bs4x1**mK=j2G
zs@}f+n0aQD{sRJ%pvXbD^TXf(co6XG*RPfNK+t6p9)th-wf^NNCrAg2fVK$!qYA(m
zC)?WIH#CCo5fPEdQ4j&h*cb$bWSi-|G5Vc<=yT-w_@mt6JGg5$4+CM71<>Gex{Z0Q
zc=f6=?`msn3w7Vw1#L=n6SQu|rrq5?VjMdW5fR6jBdOFD2rVV{*n#cs?N;E;@~>ea
ze0w{Zxuc`a4dhw@=FLrCNZ$AuCnHT%l!@^xfTmJAfvA*(7Dk;$C?tLI+Y?}8qp#&Z
E0LDb66#xJL

literal 0
HcmV?d00001

diff --git a/src/hls/__fixtures__/tiny-ts.bin b/src/hls/__fixtures__/tiny-ts.bin
new file mode 100644
index 0000000000000000000000000000000000000000..12faacf88e695a2bc480d4e2f1b5000a3370368d
GIT binary patch
literal 11656
zcmdT}c{r3`-=85Qi5VlI7^LiG>|`+3vhN}_27`&QjIpm36)ln|WDOA#lA<3HktErb
zB};^CS&MPM_vrUN{hmLbuIG>Udas<zb<erac7M+Ke$M%RzK5O$j2)u6APj-NfIt8!
z0D*2sB96nMjJmocZ-Ohc1%d2ObRwY80ijwgz@L@$G$8B{$RpNm>=5VzM67gI*`EdR
zKcdky1+mjT;@ZYO0$G6Y(jIIh;4GxIpQZlCet$xR9u|UPGKD}w_J%_s5a=feB(iP~
z8p2F~!XQk2cv>0r0`2MQ4B1oEuN?vf%|uVL6+KjAQP9?bR_8V|_C~M{%rG(lK>mQv
z)L#?*$19U0`jGuXbMt{R3UWwEq>~q!fJ7_EBgwKdGBQX<S$PGNJRYn#E(JD_HZs-G
zlaxbZt+l|G&IBj0Ld(lL$b;ZQLCT;|vXU|=8F{eKjY9EOk(Le!2$0f)LSX(xXM&dp
z-c!np>?%$Bl9U^T<N>zx@}>~IJbhJ=PIyPW69$bW6I?K|NN0khhnJH(2CafpK_T&;
zc#j}o0tOW*tAYwdqh*mK0>+IHi1hVy1apc=Z{HxWEBM5boiS)B6xa!TAW6hPf-{ab
zA{y+0BjY_?2^h2j(#ehNMZ)92u4p8MOz`j^`hq#7KqY4<3Yc;7Az@G;1iW)Fh#l_b
zNx;aUCD3T33*MK4^Y(Qoded6{9K^>P=jGz!OQ2vRWsnp%GT4hYn1`2_JKha^!Tl=p
z^#Hf^uL2a(lf3;MCn5<?p<y9<QV3)ZJlF^<cl7Wh<AZQcUL<ck1$=h`mx)5g6FtEp
zz=mWzt&IyAPa^nYKs({QgTOq|c{`7H#(Psh>>S{rjyOjm-k0_vBAKu~zW@T!)s5l^
z)_HjoJaMjG-eB#|LT|9UJ0S=hAA?5yox_oco?u&FCxR!z$&Z4OL(zbe@w9~{6MWsk
z&SWRtza~uUNOr<FkzJ4^M{sp%69Zo`GO|)Aqz`R67?hL(nDwTOyZws~#3(3(1-=x5
zH%1Og^u~eM5oA0_4bYn4_wYU-6KHmYM1u4sT#kZd%n~kt?R>w*V%xVx$1GlZ?q27#
z(!;2B4kiE<&N`Qu&^<LP#%P{@^5EtA7Yez!S2CA0^yys^xE|kEddFufd%$BteC1AN
zeYJi{T4T5zr)MrHv7VyNQ`c-baI#cfhv{Rke-G)NvUB4_-gA3JU}ge{vu%{8<b;>5
zmBslo(8#>l931vzvX$HBm#A>2*!yL^C{wS^m&Yd?LF}9(^@~;m5LDabYj(k-p^h(O
zL~0OOpZdhtS>G&<nPfS<$U|F-0)6><&nlVv-kb=&&rq+<XxSn+71(=1?s;SDU%+zi
zyfgp3kstQJ{%AICWFaAsHSW1Y>RGtXgE%W;j09T`<Bx}|O3E_)x65b5>q1H`N`?4?
z&b<z<60HwBS#5pgXdeqaIm-C5O7(@V%c)&OC#_Tuyy-CdAh3)kigsx|$a%EF$NNew
zRBJ9Nu>&uB>mip=OB;xNKgIdLyHs(?rMkG}W|5GulGnQ~9q;2{6L`+S<*rOMK`ANZ
zkx$Wiabt|vY7vi_@-q4^?&V4ni2k-}0aHEIDnhuz=lRO`^>e#<KjyO$Ei<|)9I@?d
zn8HMdQorKG#%MYCW^=&VveN!bEY$-NC$Bqa_)FBw`jjdvCiB{aL!xxUEoz3@h*hJW
z8+_$5boHO>2mC4D>fFvLU3#P{A%1v&ZlCP=wJFya4-)CsodGW+FVe=*b{#B;U6Bv+
z+td2mLF$W}85N24mu%TR>EYKN_(}(AJ6?=)M3f{q<cl~yYV$8IT<20%9+Mfn0<Rsm
zJH*N|54{G#me#wIR1}V&iCbmt@_b5~5^1A`&@`erEVBYJ`J()-US+P!>FGPqG~V)D
z>gAXi<}n#;SX^?9##}Ul%nvN8t8HEvw)8tO5qc<F0X)Gubtl@UjwZt6tNXei4h&<$
zK)(vx!G0CCgZ-)!6X+$cX8xOBWl>y&L74eUX<qZEU&W>fc^CnE%*+K`Bif3NJu?BC
z?Xd9i&cjocWG(jC^36}Tx_@-fm!wW}Wlou$*=TMUJ~;QVQ1@Vtgsdc2C1b}()yliR
zi9ie>@x5=5p~OBNfak`z^QfPix%1-4kV%T&vS4G0P3NxK#|yWDXVB|%qDl_$bubR3
zYID6DW8D#{RAb?mt`f5oDfGcBT-hI&Ux0j9&iFmwf4dp}KPoRw>0O_DVk-EE&Oqu!
z`myX0{B6_wV)rvazQcDg-{Cu$?<zMzzNgED|4GaNx7nxvm9&Ls;MOBR|FQMbv4K(Q
z?pTmB96OjZ96OjZ$7q}>Y5rq5vzP^PrqJvcXQ1hhXEkxY8X#v7JD4+w9n2Y3nqPfk
z|8IVkb<YTBsKu;bhQg+}oXE$zB^&N8fvukR0tO78=PIitd0$y-D7rd?Fl^%oD(4W^
zp2#-G_16l0l-8}#(K-n-PXWf*`CKr=z70>~D-iW7mjeQ%MRbcto$`PzrVxck&AgMY
zVVxs!=Rbu;r3^Z@aOVhJ<L=WsqJDRk?zuU;j;pS~*Nh;k!6(_yC%a|Nx-Tm?Tz}9c
z@%dhdc^~LkG39^K>G)qdYKY{MEIkbvYzN;haqi%~%DIF0s@e^3uXZf_LFfBF6ah;(
z76t(o`9BVg^e7#ega80)0xT2-)c_mUG4Mu4G6+DJwQYe#dyRwqn*$I-yuXuztQ1-b
zjgo=TxjnG#n3G)|Yx9}O;2*O&ayEc?_@<|}_DNp(Mn~8Cn!5y?a&S5Ra~6k=3CD~r
z3>Sa1eVBOXbN7d?+1PSn+nZq|p8f~-#IN4UHBZpD5|!J_ntSfIDL2WM@Vh@fC=~Yl
z7XPs}kTyqd^-U-|<wJ|#!`C6s)g4D(2LnGMs9P%CL-!s`P69I#^DDhv!Cjpj02Q|t
zPW1`Ju_*%lfDKUDWY;xq|7dph2sh)uQhKcg=hvhA>#kmPl!uu;6jO^gTaJy(n-j*?
zq^vg(sPdm<FL?H-+3QEAPE}8V*x{^ZsMa5z%=y}T9rk(3s~`5#cR13e>ugpgG8C(r
z&8CAGnasYDsoI<koj@Y3`2wwP!AxFVWvt@hR9$+f3P^bp)RmGoiIJaZlVKa)gi5S%
z)2VRV7z#L#%+J=YY^g?UVhVdLjHEh7du}Qnr$F8&LkeFEGpSXX1M8b?+>fXx+}DJm
z*LYf)YM<@RfVi#+B#fcn&F_x*^kO(r3t*%lVh3J2gxuigJ|9A08*k-GXAgj!0I_pu
zGVQ59jSQ`CFI$QwwQbT6z=k&=U*&iAI0i>GYrRJ<8+~@X9|4@LU7_NYhN>T*3$n4M
zieisB-+C@6&va~;KcdDM9#uqt;avKBXKqT!8?L(sZT8%`m*@0P@0Ku+j2bq_l;7BJ
zAiq`Bg;bQNHy;T1j4X)63)L8goct>%{djb6v0CnEgHn^jX96<iQ^4d*nqZk*9(hcf
zhK8ed6RIW;5j=(d4$R$s89`NxSfU2IfY=ew#)5MP%|ykzDXF`M)VnA#A9%(!Yx-Sc
z4wlh>-gQVetyAUgQ4%4(Tu{<oU!mu5MVhC)fnX;vcvIz~xMuXV!jIx_U!K`Leka+v
zYOA?sHT3b5{-dES({?r$79oJegaIAwWr7|0?$fec)1i-^<O=f;SNh}?-ZHQD6({-c
z)-mJz+hCAo`Q5ALLHD$=?fDdgCgqe8s@m}U=HiiZUH5cxahs}}8JwcfgUu&&V2%DS
zi$Uz1VJ<4nt}44T>33&qo3UJmYhTulIUwDDJeuT;7Rl2Qmcg*l8*{fJ&LtNThrjMR
zbPa0t!M9adMSChz7S=NzB<yXaMeqDEl7@gQVta{1+|kO0=i9R~w$_|Wwlch^wQT|+
zPtU9%s;Y>V()h0_#J_}H-u%FyK6yRTcE+?snC=r@e&(y}Sdq*wQ-_M^=HzR1Z*}&n
z)MbSio0_b}%t!}6wT*FuL9@%Hp1QA*1N`dZxj^ju6N~RC<zL!Js;xdf&XP^AX|ujz
z6wt)OD_>W=ep%SAPT2-JSHz)ew`W7>VJN(}YzaSnf3I^fReS*y6tYU+4;R?f>pU)1
z_((dl%{Tr{$T!*o#^2T!XwRhRrET;m0&(xQfa^sME8p29$`6&KwEsv>I>+YoT}Zmw
z^0j><@Sur~+k?q~o;5={spW|_`;{k%7wm&_`utHR1)<#7rRj(TZq1iK-^E<<BQN|s
zf^JsMD1g`%@BYbpCa{1~VEc9Dx>89}VBv8|sA!PbRi&bqksDP5pnl)KgEhha9jpn|
zX))h;)E}e?0N|ghpdlVq1>x9VssNgvON;qv_XJ!!m@`~Em@_CLkTa_Xe$SbI7?E}G
zJ!r&+_+LiErWAnjpa&Qa8UROesc#GPE>4)`CziYNkRLF6TuIyacsJ2dkmCDY3<&Q^
zM%*N?eoLifN7Enw_B2+CyIgL(VcJ+nGSnr3{phZU@Pv>U)@4USts566S+p94SBDIQ
zt>-)S5S`6~Pq^*{J}&P4A!@!`uz(xn%z+)unFBkRGiWgOfHD>Ro-_Yt2>gH3?4JZR
zL&G58t;IhGn%<<tNsB!+z}Q3SXY8@->~`$Iaw37|*x7&TlEbIa!`e>o)wh&KACv>2
zp4}KC+6|wINeDipe@!B>52}%YzL9O_cuzACNmrSN%|i&N^=e-4JsX%bMlip42~pHu
zeKDb`v*L?th8b(?2M(5l$`om~a)(}HUf&qWm^6>|7<UtF^`g8&L4bQ!XtZni0l`dY
z-L|&K*o4f{w1rRRg>2I=rYc9~J1R?X0B6MaP)qx(?!urZ;5K|FBeZzJR5pK7b*Vhq
zRf$>5f_}KS%a&(gGTl$q;_lX?Zu<$_dLfydyYnlD^ummCo}>)JD^7MKRmfLeKQa_|
zyuE~NysHM_hwIo9`}hla2X&7;^^N9)3rkApnJ+zvxw~I>Xj|RGL9H{rt*!5AUwE%*
z`@u$iYXDfMatfZdyj@ly!~fbkD_Put56#0M&n%&c>C)MA$AkV3AGLJy4!r4DpP<vR
zzIYKf)iI8M$D$y19$h_iL578aoOS^RNod)cZyQ@7X~H1t3jOiME5+h=Ts9W_6Usft
z#bq&-mq#(fqMw_e<(}I-(`jTYUIqW6w7o_Vn~+u78WD5px7X<C!5&3FpmP~mq@F;W
zsU8d72-{s*EoR9gbm&ZNj>o=@Petswcs-dkdkvxB<>0273nxtxF42c9qBEMZz5S?$
zWmP|zV^^NKigR`(m4?`0`5Rs^nKj=`<VN@2K83-iReYNTvGb~|rARsUz|ylbXY?p}
ztdEXvt64Y*=hqU+Hcp)O1xCID89zQ)7lhag-el{_HI?NSJQk(qL&6W?-foyC`e-m}
z3SOzceOO08`_hGI4j58nE(BhsyUQ(jyj&;jS#_)UfmCq~1YNm}oJmbQ%2J3!b`K|_
z^frTWW8QKXb`X;(s9;^VaeIKS%Ltj6DNvk4nl7k2{bkRyZ5DB;(;x{)t%$N|pKH$q
zu^)UaJ{i`tz5+B&0ks<^?B2}0G|1J_Rwu%v>S2cs4M`KEe*U_xC_q#5G~&P;c@}xb
z?4&OzB2j#<+TZGGe05IMKey-odgn!eJR`HEbtB7TQA^c4A6@+OjQwV#&gt`2m^?@6
zjY2-$AR(&HrWAF}2&<nRZ#pqJv^w6~^oheQXH>Fsd%f6zzbUR!tSR)Kog#RM!!KOM
z2v`q~_`d1=_RJZb#!#wNq2#K=zL#)z5c{FH`0m`>J`wV>j_u=C5_@GDx!|H1hgx*&
ztrV-`bjV9NGG{R=Q`nGK{mA^+KBH~%w!v;Oos3F`8cA#B%eRlHIG<)_u>C%AGVA*K
zb^s2m{o7=Y@oYI7Uy_p(`D$l3B9=C%^C|<YTiTcv3rt!I#8`}-m%d+3jQNm4XN^5N
z4l{^UHPu|}oLaV9<1XJ9Mqwy9?$fdV(q)M~tnlvJeCZr=<}JQean9+fgPb-ZxMdK#
zTH+t6->0jJZjN2&#u`WG&-P%}CHk31$9&kRKD<fy#ya7|IQ2--uX68TzskLX{i+P8
z-=W+Ze~@4OH~r3f`yA+5&CtI*D>VJf&;QwAq3VD8)kE8UmDTty?Z8HWC*%U?MDW4)
zHKW=Kk197|faUMNw@tBWtCgylXE3p;H7ltLwqkdevdlGeE+TkS{mOp?n_buk_*0kH
zyez^uGS>uD?BZlS+=^$7Mxp%*rSL5F3ONQLMZ42)W(@*)--R6!ldu=|u*j2IOUb5J
zNX%||RZ4EQfm_S-{B>pj>kHY|vO`bi0)y{<eD0NCD|qN_8cJX8i5=A=;ORC*aIdn1
z2h$gM#Hx94X4_iNTFN^dRT-FFA(>k~6w5T4uCNUvUGC`BdHAd>grLkSEef5U&~Ot`
zZ7BVEhB;tAk{J^8#zMSkucJ-uP<)T+{i=^qUAs~ZcblJGA|O-_XWz6qNzZQIuZa0N
zuWjusn<moTe{mr8<@u$uw-FY1#|kg(e-#E_x*Dt1=e_t*Dv!BdCG3lTXz{TxxYFKE
zpReA#5y)+q%nlx2Kksi!GzHreQd*yb*kM5DEbwvBs;I*&wlFS2r8VBFvhCKs_wR5e
z4-^<xP=(&fyY^6+ts5Be2d7m(9WuxYGh)!S>OMEj`MCYLe&O`F_viCE2B<mJj>f0I
zsnzLJJT4GLw3F(S()=U4W)~$b?KB-=Rjz&4q*~96vOc7(8K?U8HIDWvQAu;H_N-kd
zz$J;XT7az*@M?Ttt6XH2EOFtuejPX0{OWrqxA-?()Vqh_<*D>hVZ$}J8WWuXEc5&;
z5IcNs<{{Jm1cSq7mZxt--tgCtzFCZZ#3IURgNjiVt|rY29*<Pv`ygxZ&NM-XXYyGz
zH$#u(OnbjbX2>%c^3?cDeaiVSqwU3w)@oe7mBKbfW22|$ON{rl@aC8clSEB^dL8wj
zt7ev*pp9?8OfeW-Z%F`5K5hXM-G1^mcSdW%OJwy!P4n3eirq86H}PiqIVf9dEi*f?
zd-RjypR@=*Y3{EmCnUl2IMe1bYqX+MWI*g3cAHmCK1>BS@(kRmxOl8rwHR(lnb%xv
zkY+2B!hCuD&HHb~0@ar1etlYoA)x2`2(EW>D|9Bn=G9?hkkrHDV~NDCoK{wrf`Z33
zYjD(!i1D*fO(BW0H*dO=^aeC&`|P458!esc179Hby%!c1mS%jwEaRae)WX8*;8!qu
zyC1*@rnyzH7&SNc^5whg=U{dpA79u2_zQs!4bh;0(g3O=&oT*OmlON%eN+35fzMpM
zAH#-+AEfu)b-rd<;3GJejSLv3r6JcP*LFFkEj2YY-qyQYU>fIN2U9D3&DPcr0k+N1
z(9i=+VN_}z6o|WUVAsaRMm^;9;zA!JWMd<esj2Cu16WoMVOn4JfMyI2vC{+m{EYOU
dAQ&pO84?k9v5sE-ITD&MHu4Cvw)Vd6e*jub(K!GB

literal 0
HcmV?d00001

diff --git a/src/hls/abr.spec.ts b/src/hls/abr.spec.ts
new file mode 100644
index 0000000..f5ec8a1
--- /dev/null
+++ b/src/hls/abr.spec.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest'
+import { BandwidthEstimator, chooseLevel } from './abr'
+
+const levels = [
+  { bandwidth: 400_000, height: 360 },
+  { bandwidth: 1_200_000, height: 540 },
+  { bandwidth: 2_500_000, height: 720 },
+  { bandwidth: 5_000_000, height: 1080 },
+]
+
+describe('BandwidthEstimator', () => {
+  it('без замеров — начальная оценка', () => {
+    const e = new BandwidthEstimator(800_000)
+    expect(e.estimate).toBe(800_000)
+    expect(e.hasSamples).toBe(false)
+  })
+
+  it('сходится к измеренной скорости и игнорирует мелкие загрузки', () => {
+    const e = new BandwidthEstimator()
+    e.sample({ bytes: 100, ms: 1 })
+    expect(e.hasSamples).toBe(false)
+    for (let i = 0; i < 20; i++) e.sample({ bytes: 500_000, ms: 1000 })
+    expect(e.estimate).toBeGreaterThan(3_900_000)
+    expect(e.estimate).toBeLessThan(4_100_000)
+  })
+
+  it('падение скорости быстро снижает оценку (минимум из быстрой и медленной)', () => {
+    const e = new BandwidthEstimator()
+    for (let i = 0; i < 10; i++) e.sample({ bytes: 1_000_000, ms: 1000 })
+    const before = e.estimate
+    for (let i = 0; i < 5; i++) e.sample({ bytes: 100_000, ms: 1000 })
+    expect(e.estimate).toBeLessThan(before / 2)
+  })
+})
+
+describe('chooseLevel', () => {
+  it('лучший уровень в пределах запаса', () => {
+    expect(chooseLevel(levels, 3_500_000)).toBe(2)
+    expect(chooseLevel(levels, 100_000)).toBe(0)
+    expect(chooseLevel(levels, 50_000_000)).toBe(3)
+    expect(chooseLevel([], 1)).toBe(-1)
+  })
+
+  it('тонкий буфер делает выбор осторожнее', () => {
+    expect(chooseLevel(levels, 3_500_000, { bufferAhead: 2 })).toBe(1)
+  })
+
+  it('не выше, чем нужно для размера плеера', () => {
+    expect(chooseLevel(levels, 50_000_000, { maxHeight: 500 })).toBe(1)
+    expect(chooseLevel(levels, 50_000_000, { maxHeight: 720 })).toBe(2)
+  })
+
+  it('вверх — не больше чем на одну ступень за раз', () => {
+    expect(chooseLevel(levels, 50_000_000, { current: 0 })).toBe(1)
+    expect(chooseLevel(levels, 100_000, { current: 3 })).toBe(0)
+  })
+})
diff --git a/src/hls/abr.ts b/src/hls/abr.ts
new file mode 100644
index 0000000..61d95b2
--- /dev/null
+++ b/src/hls/abr.ts
@@ -0,0 +1,76 @@
+export interface BandwidthSample {
+  bytes: number
+  /** Download time in milliseconds. */
+  ms: number
+}
+
+/** Two exponentially weighted moving averages (fast and slow); the estimate is the lower one. */
+export class BandwidthEstimator {
+  private fast: number
+  private slow: number
+  private fastWeight = 0
+  private slowWeight = 0
+  private readonly defaultEstimate: number
+
+  constructor(defaultEstimate = 1_000_000, private readonly fastHalfLife = 3, private readonly slowHalfLife = 9, private readonly minBytes = 16_000) {
+    this.defaultEstimate = defaultEstimate
+    this.fast = 0
+    this.slow = 0
+  }
+
+  sample({ bytes, ms }: BandwidthSample): void {
+    if (bytes < this.minBytes || ms <= 0) return
+    const bps = (bytes * 8 * 1000) / ms
+    const seconds = Math.max(ms / 1000, 0.05)
+    const af = Math.exp(Math.log(0.5) / this.fastHalfLife * seconds)
+    const as = Math.exp(Math.log(0.5) / this.slowHalfLife * seconds)
+    this.fast = bps * (1 - af) + af * this.fast
+    this.fastWeight = (1 - af) + af * this.fastWeight
+    this.slow = bps * (1 - as) + as * this.slow
+    this.slowWeight = (1 - as) + as * this.slowWeight
+  }
+
+  get hasSamples(): boolean {
+    return this.fastWeight > 0
+  }
+
+  /** Bits per second. */
+  get estimate(): number {
+    if (!this.fastWeight) return this.defaultEstimate
+    return Math.min(this.fast / this.fastWeight, this.slow / this.slowWeight)
+  }
+}
+
+export interface AbrLevel {
+  bandwidth: number
+  height?: number
+}
+
+export interface ChooseLevelOptions {
+  /** Share of the estimate a level may use (default 0.8). */
+  safety?: number
+  /** Player height in device pixels: the smallest level covering it is the tallest considered. */
+  maxHeight?: number
+  /** Seconds buffered ahead: a healthy buffer allows a step up, a thin one forces caution. */
+  bufferAhead?: number
+  current?: number
+}
+
+/** Index of the best level for the bandwidth; levels must be sorted by bandwidth ascending. */
+export function chooseLevel(levels: AbrLevel[], bandwidth: number, options: ChooseLevelOptions = {}): number {
+  if (!levels.length) return -1
+  let safety = options.safety ?? 0.8
+  if (options.bufferAhead !== undefined && options.bufferAhead < 4) safety *= 0.7
+  const budget = bandwidth * safety
+  let best = 0
+  for (let i = 0; i < levels.length; i++) {
+    const l = levels[i]
+    const prev = levels[i - 1]
+    if (options.maxHeight && prev?.height && prev.height >= options.maxHeight) break
+    if (l.bandwidth <= budget) best = i
+  }
+  // Step up at most one level at a time to avoid oscillation.
+  const cur = options.current
+  if (cur !== undefined && cur >= 0 && best > cur + 1) best = cur + 1
+  return best
+}
diff --git a/src/hls/aes.ts b/src/hls/aes.ts
new file mode 100644
index 0000000..aa37cd7
--- /dev/null
+++ b/src/hls/aes.ts
@@ -0,0 +1,33 @@
+import { sequenceIv, type HlsKey } from './playlist.js'
+
+const keyCache = new Map<string, Promise<CryptoKey>>()
+
+export function aesSupported(): boolean {
+  return typeof crypto !== 'undefined' && !!crypto.subtle
+}
+
+export function importKey(uri: string, load: (uri: string) => Promise<ArrayBuffer>): Promise<CryptoKey> {
+  let p = keyCache.get(uri)
+  if (!p) {
+    p = load(uri).then((raw) => {
+      if (raw.byteLength !== 16) throw new Error(`AES-128 key must be 16 bytes, got ${raw.byteLength}`)
+      return crypto.subtle.importKey('raw', raw, { name: 'AES-CBC' }, false, ['decrypt'])
+    })
+    p.catch(() => keyCache.delete(uri))
+    keyCache.set(uri, p)
+  }
+  return p
+}
+
+/** AES-128-CBC with PKCS#7 padding, as HLS full-segment encryption uses. */
+export async function decryptSegment(
+  data: ArrayBuffer,
+  key: HlsKey,
+  sn: number,
+  load: (uri: string) => Promise<ArrayBuffer>,
+): Promise<ArrayBuffer> {
+  if (!key.uri) throw new Error('EXT-X-KEY without URI')
+  const cryptoKey = await importKey(key.uri, load)
+  const iv = key.iv ?? sequenceIv(sn)
+  return crypto.subtle.decrypt({ name: 'AES-CBC', iv: iv as BufferSource }, cryptoKey, data)
+}
diff --git a/src/hls/engine.ts b/src/hls/engine.ts
new file mode 100644
index 0000000..18cb490
--- /dev/null
+++ b/src/hls/engine.ts
@@ -0,0 +1,699 @@
+import { BandwidthEstimator, chooseLevel } from './abr.js'
+import { aesSupported, decryptSegment } from './aes.js'
+import { fragmentStart, isFmp4, isMpegTs, parseInit, type Mp4TrackInfo } from './mp4.js'
+import {
+  HlsParseError, parsePlaylist,
+  type HlsByteRange, type HlsInitSection, type HlsMediaPlaylist, type HlsSegment, type HlsVariant,
+} from './playlist.js'
+import { TransmuxError, type SegmentTransmuxer, type TransmuxerFactory } from './transmux.js'
+import { createTsTransmuxer } from './ts/transmuxer.js'
+
+export type HlsErrorCode = 'mse' | 'manifest' | 'network' | 'encrypted' | 'codec'
+
+export class HlsError extends Error {
+  constructor(readonly code: HlsErrorCode, message: string) {
+    super(message)
+    this.name = 'HlsError'
+  }
+}
+
+export interface HlsLevel {
+  index: number
+  bandwidth: number
+  width?: number
+  height?: number
+  codecs?: string
+  /** `720p`, or the bitrate when the resolution is unknown. */
+  label: string
+}
+
+export interface HlsOptions {
+  /** Use the browser's own HLS (Safari, iOS) when it has one (default `true`). */
+  preferNative?: boolean
+  /** Starting level index; `-1` (default) lets ABR choose. */
+  startLevel?: number
+  /** Seconds to buffer ahead of the playhead (default 30). */
+  maxBufferAhead?: number
+  /** Seconds kept behind the playhead before eviction (default 30). */
+  maxBufferBehind?: number
+  /** Attempts per request after the first failure (default 3). */
+  retries?: number
+  /** Initial bandwidth estimate in bits per second (default 1 Mbit/s). */
+  initialBandwidth?: number
+  /** ABR never picks levels much taller than the player (default `true`). */
+  capToPlayerSize?: boolean
+  /** Converts non-fMP4 segments; defaults to the built-in MPEG-TS transmuxer, `null` disables it. */
+  transmuxer?: TransmuxerFactory | null
+  fetch?: typeof fetch
+  onLevels?: (levels: HlsLevel[]) => void
+  onLevelSwitched?: (index: number) => void
+  onError?: (error: HlsError) => void
+}
+
+export interface HlsSession {
+  readonly native: boolean
+  readonly live: boolean
+  readonly levels: HlsLevel[]
+  /** Level currently being loaded; `-1` before the first one. */
+  readonly level: number
+  readonly autoLevel: boolean
+  /** Bandwidth estimate, bits per second. */
+  readonly bandwidth: number
+  setLevel(index: number): void
+  destroy(): void
+}
+
+type Op =
+  | { kind: 'append', data: Uint8Array }
+  | { kind: 'remove', start: number, end: number }
+  | { kind: 'offset', value: number }
+  | { kind: 'changeType', mime: string }
+  | { kind: 'eos' }
+
+interface QueuedOp { op: Op, resolve: () => void, reject: (e: unknown) => void }
+
+interface Level {
+  variant: HlsVariant
+  info: HlsLevel
+  playlist?: HlsMediaPlaylist
+  loading?: Promise<HlsMediaPlaylist>
+}
+
+type MediaSourceCtor = typeof MediaSource
+
+export function getMediaSource(): MediaSourceCtor | undefined {
+  if (typeof window === 'undefined') return undefined
+  const w = window as unknown as { MediaSource?: MediaSourceCtor, ManagedMediaSource?: MediaSourceCtor }
+  return w.MediaSource ?? w.ManagedMediaSource
+}
+
+export function canPlayNativeHls(media: HTMLMediaElement): boolean {
+  return !!media.canPlayType('application/vnd.apple.mpegurl') || !!media.canPlayType('application/x-mpegURL')
+}
+
+export function isHlsSupported(media?: HTMLMediaElement): boolean {
+  return !!getMediaSource() || (!!media && canPlayNativeHls(media))
+}
+
+function levelLabel(v: HlsVariant): string {
+  if (v.height) return `${v.height}p`
+  if (v.name) return v.name
+  return `${Math.round(v.bandwidth / 1000)} kbps`
+}
+
+const RETRYABLE = (status: number): boolean => status >= 500 || status === 429 || status === 0
+
+function sleep(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const t = setTimeout(resolve, ms)
+    signal?.addEventListener('abort', () => {
+      clearTimeout(t)
+      reject(new DOMException('Aborted', 'AbortError'))
+    }, { once: true })
+  })
+}
+
+function rangesOf(media: HTMLMediaElement): [number, number][] {
+  const out: [number, number][] = []
+  const b = media.buffered
+  for (let i = 0; i < b.length; i++) out.push([b.start(i), b.end(i)])
+  return out
+}
+
+function bufferedEnd(media: HTMLMediaElement, t: number): number {
+  let end = t
+  for (const [s, e] of rangesOf(media)) if (s - 0.3 <= end && e > end) end = e
+  return end
+}
+
+function isAbort(e: unknown): boolean {
+  return (e as DOMException)?.name === 'AbortError'
+}
+
+class HlsEngine implements HlsSession {
+  readonly native = false
+  live = false
+  levels: HlsLevel[] = []
+  level = -1
+  autoLevel = true
+
+  private readonly opts: Required<Pick<HlsOptions, 'maxBufferAhead' | 'maxBufferBehind' | 'retries'>> & HlsOptions
+  private readonly abort = new AbortController()
+  private readonly est: BandwidthEstimator
+  private readonly fetchFn: typeof fetch
+  private all: Level[] = []
+  private ms: MediaSource | null = null
+  private objectUrl = ''
+  private sb: SourceBuffer | null = null
+  private mime = ''
+  private queue: QueuedOp[] = []
+  private running: QueuedOp | null = null
+  private loading = false
+  private segmentAbort: AbortController | null = null
+  private last: { level: number, sn: number, cc: number } | null = null
+  private appendedInit = ''
+  private tracks: Mp4TrackInfo[] = []
+  private offsets = new Map<number, number>()
+  private transmuxer: SegmentTransmuxer | null = null
+  private timer: ReturnType<typeof setInterval> | null = null
+  private reloadTimer: ReturnType<typeof setTimeout> | null = null
+  private ended = false
+  private destroyed = false
+  private failed = false
+  private startPositioned = false
+
+  constructor(private readonly media: HTMLMediaElement, private readonly url: string, options: HlsOptions) {
+    this.opts = { maxBufferAhead: 30, maxBufferBehind: 30, retries: 3, ...options }
+    this.est = new BandwidthEstimator(options.initialBandwidth ?? 1_000_000)
+    this.fetchFn = options.fetch ?? ((...args) => fetch(...args))
+    this.media.addEventListener('seeking', this.onSeeking)
+    this.start().catch((e) => this.fail(e))
+  }
+
+  get bandwidth(): number {
+    return this.est.estimate
+  }
+
+  // ---- lifecycle ----
+
+  private async start(): Promise<void> {
+    const MS = getMediaSource()
+    if (!MS) throw new HlsError('mse', 'MediaSource is not available')
+    const text = await this.fetchText(this.url)
+    const parsed = parsePlaylist(text, this.url)
+    if (parsed.type === 'master') {
+      const variants = parsed.variants
+        .filter((v) => !v.codecs || MS.isTypeSupported(`video/mp4; codecs="${v.codecs}"`) || MS.isTypeSupported(`audio/mp4; codecs="${v.codecs}"`))
+        .sort((a, b) => a.bandwidth - b.bandwidth)
+      if (!variants.length) throw new HlsError('codec', 'No variant has codecs this browser supports')
+      this.all = variants.map((variant, index) => ({
+        variant,
+        info: { index, bandwidth: variant.bandwidth, width: variant.width, height: variant.height, codecs: variant.codecs, label: levelLabel(variant) },
+      }))
+    } else {
+      const variant: HlsVariant = { uri: this.url, bandwidth: 0 }
+      this.all = [{ variant, playlist: parsed, info: { index: 0, bandwidth: 0, label: 'auto' } }]
+    }
+    this.levels = this.all.map((l) => l.info)
+    this.opts.onLevels?.(this.levels)
+
+    const start = this.opts.startLevel ?? -1
+    this.autoLevel = start < 0
+    this.level = start >= 0 && start < this.all.length ? start : this.pickLevel()
+
+    const ms = new MS()
+    this.ms = ms
+    if ('disableRemotePlayback' in this.media && (window as unknown as { ManagedMediaSource?: unknown }).ManagedMediaSource === MS) {
+      this.media.disableRemotePlayback = true
+    }
+    this.objectUrl = URL.createObjectURL(ms)
+    const opened = new Promise<void>((resolve) => ms.addEventListener('sourceopen', () => resolve(), { once: true }))
+    this.media.src = this.objectUrl
+    await opened
+    if (this.destroyed) return
+
+    const pl = await this.loadPlaylist(this.level)
+    this.live = !pl.endList
+    if (!this.live) ms.duration = pl.totalDuration
+    this.opts.onLevelSwitched?.(this.level)
+    if (this.live) this.scheduleReload(pl.targetDuration)
+    this.timer = setInterval(() => this.tick(), 250)
+    this.tick()
+  }
+
+  destroy(): void {
+    if (this.destroyed) return
+    this.destroyed = true
+    this.abort.abort()
+    this.segmentAbort?.abort()
+    if (this.timer) clearInterval(this.timer)
+    if (this.reloadTimer) clearTimeout(this.reloadTimer)
+    this.media.removeEventListener('seeking', this.onSeeking)
+    for (const q of this.queue) q.reject(new DOMException('Aborted', 'AbortError'))
+    this.queue = []
+    if (this.objectUrl) {
+      this.media.removeAttribute('src')
+      this.media.load()
+      URL.revokeObjectURL(this.objectUrl)
+    }
+    this.sb = null
+    this.ms = null
+  }
+
+  private fail(e: unknown): void {
+    if (this.destroyed || isAbort(e) || this.failed) return
+    this.failed = true
+    let err: HlsError
+    if (e instanceof HlsError) err = e
+    else if (e instanceof HlsParseError) err = new HlsError('manifest', e.message)
+    else if (e instanceof TransmuxError) err = new HlsError('codec', e.message)
+    else if ((e as DOMException)?.name === 'NotSupportedError') err = new HlsError('codec', (e as Error).message)
+    else err = new HlsError('network', (e as Error)?.message ?? String(e))
+    if (this.timer) clearInterval(this.timer)
+    if (this.reloadTimer) clearTimeout(this.reloadTimer)
+    this.opts.onError?.(err)
+  }
+
+  // ---- networking ----
+
+  private async request(url: string, range: HlsByteRange | undefined, signal: AbortSignal): Promise<Response> {
+    const headers: Record<string, string> = {}
+    if (range) headers.Range = `bytes=${range.offset}-${range.offset + range.length - 1}`
+    let attempt = 0
+    for (;;) {
+      try {
+        const res = await this.fetchFn(url, { headers, signal })
+        if (res.ok) return res
+        if (!RETRYABLE(res.status) || attempt >= this.opts.retries) {
+          throw new HlsError('network', `HTTP ${res.status} for ${url}`)
+        }
+      } catch (e) {
+        if (isAbort(e) || e instanceof HlsError || attempt >= this.opts.retries) throw e
+      }
+      await sleep(500 * 2 ** attempt, signal)
+      attempt++
+    }
+  }
+
+  private async fetchText(url: string): Promise<string> {
+    return (await this.request(url, undefined, this.abort.signal)).text()
+  }
+
+  private async fetchBytes(url: string, range: HlsByteRange | undefined, signal: AbortSignal): Promise<{ data: Uint8Array, ms: number }> {
+    const t0 = performance.now()
+    const res = await this.request(url, range, signal)
+    const buf = await res.arrayBuffer()
+    let data = new Uint8Array(buf)
+    // A server that ignores Range sends the whole file.
+    if (range && res.status === 200 && data.length > range.length) data = data.subarray(range.offset, range.offset + range.length)
+    return { data, ms: performance.now() - t0 }
+  }
+
+  private loadKey = async (uri: string): Promise<ArrayBuffer> => {
+    const { data } = await this.fetchBytes(uri, undefined, this.abort.signal)
+    return data.slice().buffer
+  }
+
+  // ---- playlists ----
+
+  private loadPlaylist(index: number, force = false): Promise<HlsMediaPlaylist> {
+    const level = this.all[index]
+    if (level.playlist && !force) return Promise.resolve(level.playlist)
+    if (level.loading) return level.loading
+    level.loading = this.fetchText(level.variant.uri)
+      .then((text) => {
+        const parsed = parsePlaylist(text, level.variant.uri)
+        if (parsed.type !== 'media') throw new HlsParseError('Expected a media playlist')
+        const reference = level.playlist ?? this.all[this.level]?.playlist
+        if (reference && reference !== parsed) alignTimes(reference, parsed)
+        level.playlist = parsed
+        return parsed
+      })
+      .finally(() => { level.loading = undefined })
+    return level.loading
+  }
+
+  private scheduleReload(seconds: number): void {
+    if (this.destroyed) return
+    this.reloadTimer = setTimeout(async () => {
+      try {
+        const before = this.all[this.level].playlist
+        const pl = await this.loadPlaylist(this.level, true)
+        const changed = !before || pl.segments[pl.segments.length - 1]?.sn !== before.segments[before.segments.length - 1]?.sn
+        if (pl.endList) {
+          this.live = false
+          return
+        }
+        this.updateSeekable(pl)
+        this.scheduleReload(changed ? pl.targetDuration : pl.targetDuration / 2)
+        this.tick()
+      } catch (e) {
+        this.fail(e)
+      }
+    }, Math.max(1, seconds) * 1000)
+  }
+
+  private updateSeekable(pl: HlsMediaPlaylist): void {
+    const ms = this.ms as (MediaSource & { setLiveSeekableRange?: (s: number, e: number) => void }) | null
+    if (!ms || ms.readyState !== 'open' || !pl.segments.length) return
+    const first = pl.segments[0]
+    const last = pl.segments[pl.segments.length - 1]
+    try {
+      if (ms.duration !== Infinity && !this.sb?.updating) ms.duration = Infinity
+      ms.setLiveSeekableRange?.(first.start, last.start + last.duration)
+    } catch {
+      // Not every implementation accepts the change while updating.
+    }
+  }
+
+  // ---- ABR ----
+
+  private pickLevel(): number {
+    const levels = this.all.map((l) => l.info)
+    const maxHeight = this.opts.capToPlayerSize === false
+      ? undefined
+      : Math.round((this.media.clientHeight || 0) * (window.devicePixelRatio || 1)) || undefined
+    const ahead = bufferedEnd(this.media, this.media.currentTime) - this.media.currentTime
+    return chooseLevel(levels, this.est.estimate, {
+      maxHeight,
+      bufferAhead: this.est.hasSamples ? ahead : undefined,
+      current: this.level >= 0 ? this.level : undefined,
+    })
+  }
+
+  setLevel(index: number): void {
+    if (index < 0) {
+      this.autoLevel = true
+      return
+    }
+    if (index >= this.all.length) return
+    this.autoLevel = false
+    if (index === this.level) return
+    this.switchTo(index, true)
+  }
+
+  private switchTo(index: number, flush: boolean): void {
+    this.level = index
+    this.opts.onLevelSwitched?.(index)
+    if (flush) {
+      this.segmentAbort?.abort()
+      const keepUntil = this.media.currentTime + 1
+      if (bufferedEnd(this.media, this.media.currentTime) > keepUntil) {
+        this.enqueue({ kind: 'remove', start: keepUntil, end: Infinity }).catch(() => {})
+      }
+      this.last = null
+    }
+    this.loadPlaylist(index).then(() => this.tick(), (e) => this.fail(e))
+  }
+
+  // ---- source buffer ----
+
+  private ensureBuffer(mime: string): void {
+    if (!this.ms) return
+    if (!this.sb) {
+      try {
+        this.sb = this.ms.addSourceBuffer(mime)
+      } catch (e) {
+        throw new HlsError('codec', `${mime}: ${(e as Error).message}`)
+      }
+      this.mime = mime
+      this.sb.addEventListener('updateend', this.onUpdateEnd)
+      this.sb.addEventListener('error', this.onBufferError)
+      return
+    }
+    if (mime !== this.mime) {
+      this.mime = mime
+      if (typeof this.sb.changeType === 'function') this.enqueue({ kind: 'changeType', mime }).catch(() => {})
+    }
+  }
+
+  private enqueue(op: Op): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.queue.push({ op, resolve, reject })
+      this.pump()
+    })
+  }
+
+  private onUpdateEnd = (): void => {
+    const done = this.running
+    this.running = null
+    done?.resolve()
+    this.pump()
+  }
+
+  private onBufferError = (): void => {
+    const done = this.running
+    this.running = null
+    done?.reject(new HlsError('codec', 'SourceBuffer error'))
+  }
+
+  private pump(): void {
+    const sb = this.sb
+    const ms = this.ms
+    if (!sb || !ms || this.running || sb.updating) return
+    while (this.queue.length) {
+      const item = this.queue.shift() as QueuedOp
+      const { op } = item
+      try {
+        if (op.kind === 'append') {
+          this.running = item
+          sb.appendBuffer(op.data as BufferSource)
+          return
+        }
+        if (op.kind === 'remove') {
+          const end = Math.min(op.end, Number.isFinite(ms.duration) ? ms.duration : op.end)
+          if (end > op.start) {
+            this.running = item
+            sb.remove(op.start, op.end)
+            return
+          }
+          item.resolve()
+        } else if (op.kind === 'offset') {
+          sb.timestampOffset = op.value
+          item.resolve()
+        } else if (op.kind === 'changeType') {
+          sb.changeType(op.mime)
+          item.resolve()
+        } else if (op.kind === 'eos') {
+          if (ms.readyState === 'open') ms.endOfStream()
+          item.resolve()
+        }
+      } catch (e) {
+        this.running = null
+        if ((e as DOMException)?.name === 'QuotaExceededError' && op.kind === 'append') {
+          const behind = this.media.currentTime - 5
+          if (behind > 0) {
+            this.queue.unshift({ op: { kind: 'remove', start: 0, end: behind }, resolve: () => {}, reject: () => {} }, item)
+            continue
+          }
+        }
+        item.reject(e)
+      }
+    }
+  }
+
+  // ---- loading loop ----
+
+  private onSeeking = (): void => {
+    const t = this.media.currentTime
+    if (bufferedEnd(this.media, t) - t > 0.1) return
+    this.segmentAbort?.abort()
+    this.last = null
+    this.ended = false
+    setTimeout(() => this.tick(), 0)
+  }
+
+  private nextSegment(pl: HlsMediaPlaylist): HlsSegment | undefined {
+    const segs = pl.segments
+    if (!segs.length) return undefined
+    if (this.last && this.last.level === this.level) {
+      const next = segs.find((s) => s.sn === (this.last as { sn: number }).sn + 1)
+      if (next) return next
+      if (segs[segs.length - 1].sn <= this.last.sn) return undefined
+    }
+    if (this.live && !this.startPositioned && !this.last) {
+      return segs[Math.max(0, segs.length - 3)]
+    }
+    const t = bufferedEnd(this.media, this.media.currentTime)
+    if (t < segs[0].start) return segs[0]
+    return segs.find((s) => t >= s.start - 0.05 && t < s.start + s.duration - 0.05)
+  }
+
+  private tick(): void {
+    if (this.destroyed || this.failed || this.loading || !this.ms) return
+    const level = this.all[this.level]
+    const pl = level?.playlist
+    if (!pl) return
+    const pos = this.media.currentTime
+    this.jumpGap(pos)
+    this.evict(pos)
+    const ahead = bufferedEnd(this.media, pos) - pos
+    if (ahead >= this.opts.maxBufferAhead) return
+    const seg = this.nextSegment(pl)
+    if (!seg) {
+      if (pl.endList && !this.ended && this.last) {
+        this.ended = true
+        this.enqueue({ kind: 'eos' }).catch(() => {})
+      }
+      return
+    }
+    this.loading = true
+    this.loadSegment(seg, this.level)
+      .catch((e) => {
+        if (!isAbort(e)) this.fail(e)
+      })
+      .finally(() => {
+        this.loading = false
+        if (!this.destroyed) setTimeout(() => this.tick(), 0)
+      })
+  }
+
+  private stallPos = -1
+  private stallSince = 0
+
+  private jumpGap(pos: number): void {
+    const ranges = rangesOf(this.media)
+    if (!ranges.length || this.media.seeking) return
+    const current = ranges.find(([s, e]) => pos >= s && pos < e)
+    const ahead = ranges.find(([s]) => s > pos)
+    if (!current) {
+      // The first append of a live window, or the playhead sits in a hole between fragments.
+      if (ahead && (ahead[0] - pos < 1 || (!this.startPositioned && this.live))) this.media.currentTime = ahead[0] + 0.01
+      return
+    }
+    // Stuck just before the end of a range with the next one right after it (timestamp jitter at a discontinuity).
+    const stuck = !this.media.paused && this.media.readyState < 3
+    if (!stuck) {
+      this.stallPos = -1
+      return
+    }
+    if (this.stallPos !== pos) {
+      this.stallPos = pos
+      this.stallSince = performance.now()
+      return
+    }
+    if (performance.now() - this.stallSince < 500) return
+    if (ahead && current[1] - pos < 0.5 && ahead[0] - current[1] < 1) this.media.currentTime = ahead[0] + 0.01
+  }
+
+  private evict(pos: number): void {
+    const ranges = rangesOf(this.media)
+    if (!ranges.length || !this.sb || this.queue.some((q) => q.op.kind === 'remove')) return
+    const limit = pos - this.opts.maxBufferBehind
+    if (ranges[0][0] < limit - 1) this.enqueue({ kind: 'remove', start: 0, end: limit }).catch(() => {})
+  }
+
+  private async loadInit(map: HlsInitSection, levelIndex: number, signal: AbortSignal): Promise<void> {
+    const key = `${levelIndex}|${map.uri}|${map.byteRange?.offset ?? ''}`
+    if (key === this.appendedInit) return
+    let { data } = await this.fetchBytes(map.uri, map.byteRange, signal)
+    if (map.key?.method === 'AES-128' && !isFmp4(data)) {
+      data = new Uint8Array(await decryptSegment(data.slice().buffer, map.key, 0, this.loadKey))
+    }
+    this.tracks = parseInit(data)
+    const variantCodecs = this.all[levelIndex].variant.codecs
+    const codecs = this.tracks.map((t) => t.codec).filter(Boolean).join(',') || variantCodecs || ''
+    const kind = this.tracks.some((t) => t.kind === 'video') || !this.tracks.length ? 'video' : 'audio'
+    this.ensureBuffer(`${kind}/mp4; codecs="${codecs}"`)
+    await this.enqueue({ kind: 'append', data })
+    this.appendedInit = key
+  }
+
+  private async loadSegment(seg: HlsSegment, levelIndex: number): Promise<void> {
+    const ctrl = new AbortController()
+    this.segmentAbort = ctrl
+    const abortAll = (): void => ctrl.abort()
+    this.abort.signal.addEventListener('abort', abortAll, { once: true })
+    try {
+      if (seg.key && seg.key.method !== 'AES-128') {
+        throw new HlsError('encrypted', `${seg.key.method} encryption is not supported`)
+      }
+      if (seg.key && !aesSupported()) throw new HlsError('encrypted', 'WebCrypto is not available')
+      if (seg.map) await this.loadInit(seg.map, levelIndex, ctrl.signal)
+
+      const { data: raw, ms } = await this.fetchBytes(seg.uri, seg.byteRange, ctrl.signal)
+      this.est.sample({ bytes: raw.length, ms })
+      let data = raw
+      if (seg.key) data = new Uint8Array(await decryptSegment(raw.slice().buffer, seg.key, seg.sn, this.loadKey))
+      if (ctrl.signal.aborted) return
+
+      const sequential = !!this.last && this.last.level === levelIndex && this.last.sn + 1 === seg.sn && this.last.cc === seg.cc
+      let startTime: number | null
+      if (isMpegTs(data)) {
+        if (this.opts.transmuxer === null) throw new HlsError('codec', 'MPEG-TS segments need a transmuxer')
+        this.transmuxer ??= (this.opts.transmuxer ?? createTsTransmuxer)()
+        const out = this.transmuxer.push(data, { discontinuity: !sequential })
+        if (out.init) {
+          this.ensureBuffer(out.mimeType)
+          await this.enqueue({ kind: 'append', data: out.init })
+          this.appendedInit = ''
+        }
+        this.tracks = out.tracks
+        data = out.data
+        startTime = out.startTime
+      } else if (isFmp4(data)) {
+        if (!this.sb) throw new HlsError('codec', 'fMP4 segment without an initialization section')
+        startTime = fragmentStart(data, this.tracks)
+      } else {
+        throw new HlsError('codec', 'Unknown segment container')
+      }
+
+      // One offset per discontinuity domain maps media time onto the playlist timeline.
+      if (startTime !== null) {
+        let offset = this.offsets.get(seg.cc)
+        if (offset === undefined) {
+          offset = seg.start - startTime
+          this.offsets.set(seg.cc, offset)
+        }
+        if (this.sb && Math.abs(this.sb.timestampOffset - offset) > 1e-3) await this.enqueue({ kind: 'offset', value: offset })
+      }
+      if (ctrl.signal.aborted) return
+      await this.enqueue({ kind: 'append', data })
+      this.last = { level: levelIndex, sn: seg.sn, cc: seg.cc }
+
+      if (!this.startPositioned) {
+        this.startPositioned = true
+        if (this.live) this.media.currentTime = seg.start + 0.01
+        if (this.live) this.updateSeekable(this.all[levelIndex].playlist as HlsMediaPlaylist)
+      }
+
+      if (this.autoLevel && this.all.length > 1) {
+        const next = this.pickLevel()
+        if (next !== this.level) this.switchTo(next, false)
+      }
+    } finally {
+      this.abort.signal.removeEventListener('abort', abortAll)
+      if (this.segmentAbort === ctrl) this.segmentAbort = null
+    }
+  }
+}
+
+/** Keeps playlist times stable across reloads and renditions by matching media sequence numbers. */
+export function alignTimes(reference: HlsMediaPlaylist, next: HlsMediaPlaylist): void {
+  if (!reference.segments.length || !next.segments.length) return
+  const byId = new Map(reference.segments.map((s) => [s.sn, s]))
+  let shift: number | null = null
+  for (const s of next.segments) {
+    const ref = byId.get(s.sn)
+    if (ref) {
+      shift = ref.start - s.start
+      break
+    }
+  }
+  if (shift === null) {
+    const last = reference.segments[reference.segments.length - 1]
+    const first = next.segments[0]
+    if (first.sn <= last.sn) return
+    const gap = (first.sn - last.sn - 1) * (next.targetDuration || last.duration)
+    shift = last.start + last.duration + gap - first.start
+  }
+  if (!shift) return
+  for (const s of next.segments) s.start += shift
+}
+
+/** Plays an HLS stream in `media`: natively where the browser can, otherwise through MediaSource. */
+export function attachHls(media: HTMLMediaElement, url: string, options: HlsOptions = {}): HlsSession {
+  if (options.preferNative !== false && canPlayNativeHls(media)) {
+    media.src = url
+    return {
+      native: true,
+      get live() { return media.duration === Infinity },
+      levels: [],
+      level: -1,
+      autoLevel: true,
+      bandwidth: 0,
+      setLevel: () => {},
+      destroy: () => {
+        media.removeAttribute('src')
+        media.load()
+      },
+    }
+  }
+  if (!getMediaSource()) {
+    const err = new HlsError('mse', 'MediaSource is not available')
+    queueMicrotask(() => options.onError?.(err))
+    return { native: false, live: false, levels: [], level: -1, autoLevel: true, bandwidth: 0, setLevel: () => {}, destroy: () => {} }
+  }
+  const absolute = typeof location !== 'undefined' ? new URL(url, location.href).href : url
+  return new HlsEngine(media, absolute, options)
+}
diff --git a/src/hls/index.ts b/src/hls/index.ts
new file mode 100644
index 0000000..16f3c52
--- /dev/null
+++ b/src/hls/index.ts
@@ -0,0 +1,14 @@
+export {
+  attachHls, canPlayNativeHls, isHlsSupported, getMediaSource, alignTimes, HlsError,
+} from './engine.js'
+export type { HlsErrorCode, HlsLevel, HlsOptions, HlsSession } from './engine.js'
+export { parsePlaylist, parseAttributes, sequenceIv, HlsParseError } from './playlist.js'
+export type {
+  HlsPlaylist, HlsMasterPlaylist, HlsMediaPlaylist, HlsVariant, HlsSegment, HlsKey, HlsByteRange, HlsInitSection, HlsRendition,
+} from './playlist.js'
+export { BandwidthEstimator, chooseLevel } from './abr.js'
+export type { AbrLevel, ChooseLevelOptions, BandwidthSample } from './abr.js'
+export { TsTransmuxer, createTsTransmuxer } from './ts/transmuxer.js'
+export { TransmuxError } from './transmux.js'
+export type { SegmentTransmuxer, TransmuxerFactory, TransmuxResult, TransmuxContext } from './transmux.js'
+export { isFmp4, isMpegTs, parseInit, fragmentStart } from './mp4.js'
diff --git a/src/hls/mp4.spec.ts b/src/hls/mp4.spec.ts
new file mode 100644
index 0000000..e5da86e
--- /dev/null
+++ b/src/hls/mp4.spec.ts
@@ -0,0 +1,132 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { findBoxes, fragmentStart, isFmp4, isMpegTs, parseInit, readBoxes } from './mp4'
+import { TsTransmuxer } from './ts/transmuxer'
+import { demuxTs, readTimestamp } from './ts/demux'
+import { parseAdts, audioSpecificConfig } from './ts/adts'
+import { BitReader, parseSps, splitNals, toAvcc, unescapeRbsp } from './ts/h264'
+import { TransmuxError } from './transmux'
+
+const fixture = (name: string): Uint8Array => new Uint8Array(readFileSync(resolve(process.cwd(), 'src/hls/__fixtures__', name)))
+
+describe('mp4 reader', () => {
+  it('распознаёт контейнеры', () => {
+    expect(isFmp4(fixture('tiny-init.mp4'))).toBe(true)
+    expect(isFmp4(fixture('tiny-seg.m4s'))).toBe(true)
+    expect(isMpegTs(fixture('tiny-ts.bin'))).toBe(true)
+    expect(isMpegTs(fixture('tiny-seg.m4s'))).toBe(false)
+  })
+
+  it('дорожки и кодеки из init-сегмента', () => {
+    const tracks = parseInit(fixture('tiny-init.mp4'))
+    expect(tracks.map((t) => t.kind).sort()).toEqual(['audio', 'video'])
+    expect(tracks.find((t) => t.kind === 'video')?.codec).toMatch(/^avc1\.[0-9a-f]{6}$/)
+    expect(tracks.find((t) => t.kind === 'audio')).toMatchObject({ codec: 'mp4a.40.2', timescale: 22050 })
+  })
+
+  it('время начала фрагмента из tfdt', () => {
+    const tracks = parseInit(fixture('tiny-init.mp4'))
+    const start = fragmentStart(fixture('tiny-seg.m4s'), tracks)
+    expect(start).not.toBeNull()
+    expect(start as number).toBeLessThan(0.5)
+  })
+
+  it('readBoxes не выходит за границы обрезанных данных', () => {
+    const d = fixture('tiny-init.mp4').subarray(0, 30)
+    expect(() => readBoxes(d)).not.toThrow()
+    expect(findBoxes(d, ['moov', 'trak'])).toEqual([])
+  })
+})
+
+describe('H.264 / ADTS helpers', () => {
+  it('splitNals по стартовым кодам 3 и 4 байта', () => {
+    const d = Uint8Array.from([0, 0, 0, 1, 0x67, 1, 2, 0, 0, 1, 0x68, 3, 0, 0, 1, 0x65, 4, 5])
+    const nals = splitNals(d)
+    expect(nals.map((n) => n[0])).toEqual([0x67, 0x68, 0x65])
+    expect(Array.from(toAvcc([nals[1]]))).toEqual([0, 0, 0, 2, 0x68, 3])
+  })
+
+  it('unescapeRbsp и экспоненциальный код Голомба', () => {
+    expect(Array.from(unescapeRbsp(Uint8Array.from([0, 0, 3, 1, 0, 0, 3])))).toEqual([0, 0, 1, 0, 0])
+    const r = new BitReader(Uint8Array.from([0b10100110, 0b11000000]))
+    expect([r.ue(), r.ue(), r.ue(), r.se()]).toEqual([0, 1, 2, -1])
+  })
+
+  it('PES-время 33 бита без потери точности', () => {
+    // PTS = 2^32 + 90000
+    const v = 4294967296 + 90000
+    const b = new Uint8Array(5)
+    b[0] = 0x20 | ((Math.floor(v / 2 ** 30) & 7) << 1) | 1
+    b[1] = Math.floor(v / 2 ** 22) & 0xff
+    b[2] = ((Math.floor(v / 2 ** 15) & 0x7f) << 1) | 1
+    b[3] = Math.floor(v / 2 ** 7) & 0xff
+    b[4] = ((v % 128) << 1) | 1
+    expect(readTimestamp(b, 0)).toBe(v)
+  })
+
+  it('ADTS: кадры, конфигурация, хвост', () => {
+    const frame = (len: number): number[] => [0xff, 0xf1, 0x50, 0x80, (len >> 3) & 0xff, ((len & 7) << 5) | 0x1f, 0xfc, ...new Array(len - 7).fill(0x11)]
+    const d = Uint8Array.from([...frame(10), ...frame(12), 0xff, 0xf1])
+    const res = parseAdts(d)
+    expect(res.frames.map((f) => f.length)).toEqual([3, 5])
+    expect(res.config).toMatchObject({ objectType: 2, sampleRate: 44100, channels: 2 })
+    expect(res.rest.length).toBe(2)
+    expect(Array.from(audioSpecificConfig(res.config!))).toEqual([0x12, 0x10])
+  })
+})
+
+describe('TS → fMP4', () => {
+  it('демультиплексирует видео и аудио PES', () => {
+    const res = demuxTs(fixture('tiny-ts.bin'))
+    expect(res.videoType).toBe(0x1b)
+    expect(res.audioType).toBe(0x0f)
+    expect(res.video.length).toBe(10)
+    expect(res.audio.length).toBeGreaterThan(0)
+    expect(res.video[0].pts).toBeGreaterThanOrEqual(res.video[0].dts as number)
+  })
+
+  it('SPS: профиль и размер кадра', () => {
+    const nal = splitNals(demuxTs(fixture('tiny-ts.bin')).video[0].data).find((n) => (n[0] & 0x1f) === 7)
+    const sps = parseSps(nal as Uint8Array)
+    expect(sps).toMatchObject({ profile: 100, width: 64, height: 48 })
+  })
+
+  it('выдаёт init + фрагменты, которые снова читаются как fMP4', () => {
+    const tx = new TsTransmuxer()
+    const out = tx.push(fixture('tiny-ts.bin'), { discontinuity: true })
+    expect(out.mimeType).toMatch(/^video\/mp4; codecs="avc1\.64[0-9a-f]{4},mp4a\.40\.2"$/)
+    expect(out.init && isFmp4(out.init)).toBe(true)
+    const tracks = parseInit(out.init as Uint8Array)
+    expect(tracks.map((t) => t.codec)).toEqual([expect.stringMatching(/^avc1\.64/), 'mp4a.40.2'])
+    expect(findBoxes(out.data, ['moof'])).toHaveLength(2)
+    expect(findBoxes(out.data, ['mdat'])).toHaveLength(2)
+    const trun = findBoxes(out.data, ['moof', 'traf', 'trun'])[0]
+    const count = new DataView(out.data.buffer, out.data.byteOffset + trun.data + 4, 4).getUint32(0)
+    expect(count).toBe(10)
+    expect(out.startTime).toBeGreaterThan(1)
+    expect(fragmentStart(out.data, tracks)).toBeCloseTo(out.startTime, 2)
+  })
+
+  it('следующий сегмент продолжает шкалу и не повторяет init', () => {
+    const tx = new TsTransmuxer()
+    const a = tx.push(fixture('tiny-ts.bin'), { discontinuity: true })
+    const b = tx.push(fixture('tiny-ts.bin'), { discontinuity: false })
+    expect(b.init).toBeUndefined()
+    expect(b.startTime).toBeCloseTo(a.startTime, 3)
+  })
+
+  it('не-H.264 видео — понятная ошибка', () => {
+    const d = fixture('tiny-ts.bin').slice()
+    // Patch the PMT stream type of the first elementary stream from 0x1b (H.264) to 0x24 (HEVC).
+    for (let o = 0; o < d.length; o += 188) {
+      const pid = ((d[o + 1] & 0x1f) << 8) | d[o + 2]
+      if (pid === 0x1000) {
+        const i = d.indexOf(0x1b, o + 5)
+        d[i] = 0x24
+        break
+      }
+    }
+    expect(() => new TsTransmuxer().push(d, { discontinuity: true })).toThrow(TransmuxError)
+  })
+})
diff --git a/src/hls/mp4.ts b/src/hls/mp4.ts
new file mode 100644
index 0000000..248cc99
--- /dev/null
+++ b/src/hls/mp4.ts
@@ -0,0 +1,156 @@
+export interface Mp4Box {
+  type: string
+  start: number
+  /** First byte after the header. */
+  data: number
+  end: number
+}
+
+function u32(d: Uint8Array, o: number): number {
+  return ((d[o] << 24) >>> 0) + (d[o + 1] << 16) + (d[o + 2] << 8) + d[o + 3]
+}
+
+function fourcc(d: Uint8Array, o: number): string {
+  return String.fromCharCode(d[o], d[o + 1], d[o + 2], d[o + 3])
+}
+
+export function readBoxes(d: Uint8Array, start = 0, end = d.length): Mp4Box[] {
+  const out: Mp4Box[] = []
+  let o = start
+  while (o + 8 <= end) {
+    let size = u32(d, o)
+    const type = fourcc(d, o + 4)
+    let header = 8
+    if (size === 1) {
+      size = u32(d, o + 8) * 4294967296 + u32(d, o + 12)
+      header = 16
+    } else if (size === 0) {
+      size = end - o
+    }
+    if (size < header || o + size > end) break
+    out.push({ type, start: o, data: o + header, end: o + size })
+    o += size
+  }
+  return out
+}
+
+/** Boxes at a path like `['moov', 'trak', 'mdia']`, descending through every match. */
+export function findBoxes(d: Uint8Array, path: string[], start = 0, end = d.length): Mp4Box[] {
+  if (!path.length) return []
+  const [head, ...rest] = path
+  const matches = readBoxes(d, start, end).filter((b) => b.type === head)
+  if (!rest.length) return matches
+  return matches.flatMap((b) => findBoxes(d, rest, b.data, b.end))
+}
+
+const FMP4_FIRST = ['ftyp', 'styp', 'moof', 'sidx', 'moov', 'emsg', 'prft', 'free']
+
+export function isFmp4(d: Uint8Array): boolean {
+  return d.length >= 8 && FMP4_FIRST.includes(fourcc(d, 4))
+}
+
+export function isMpegTs(d: Uint8Array): boolean {
+  if (d.length < 188 || d[0] !== 0x47) return false
+  return d.length < 376 || d[188] === 0x47
+}
+
+export interface Mp4TrackInfo {
+  id: number
+  timescale: number
+  kind: 'video' | 'audio' | 'other'
+  codec?: string
+}
+
+function hex2(n: number): string {
+  return n.toString(16).padStart(2, '0')
+}
+
+function descriptor(d: Uint8Array, o: number): { tag: number, data: number, end: number } {
+  const tag = d[o]
+  let len = 0
+  let p = o + 1
+  for (let i = 0; i < 4; i++) {
+    const b = d[p++]
+    len = (len << 7) | (b & 0x7f)
+    if (!(b & 0x80)) break
+  }
+  return { tag, data: p, end: p + len }
+}
+
+function esdsObjectType(d: Uint8Array, start: number, end: number): number | undefined {
+  const es = descriptor(d, start)
+  if (es.tag !== 0x03 || es.end > end) return undefined
+  const flags = d[es.data + 2]
+  let o = es.data + 3
+  if (flags & 0x80) o += 2
+  if (flags & 0x40) o += d[o] + 1
+  if (flags & 0x20) o += 2
+  const dc = descriptor(d, o)
+  if (dc.tag !== 0x04) return undefined
+  const objectType = d[dc.data]
+  if (objectType !== 0x40) return undefined
+  const dsi = descriptor(d, dc.data + 13)
+  if (dsi.tag !== 0x05) return undefined
+  const aot = d[dsi.data] >> 3
+  return aot > 0 && aot < 31 ? aot : undefined
+}
+
+function sampleEntryCodec(d: Uint8Array, entry: Mp4Box): string | undefined {
+  const type = entry.type
+  if (type === 'avc1' || type === 'avc3') {
+    const avcC = readBoxes(d, entry.data + 78, entry.end).find((b) => b.type === 'avcC')
+    if (avcC) return `${type}.${hex2(d[avcC.data + 1])}${hex2(d[avcC.data + 2])}${hex2(d[avcC.data + 3])}`
+    return `${type}.42e01e`
+  }
+  if (type === 'mp4a') {
+    const esds = readBoxes(d, entry.data + 28, entry.end).find((b) => b.type === 'esds')
+    const aot = esds ? esdsObjectType(d, esds.data + 4, esds.end) : undefined
+    if (aot) return `mp4a.40.${aot}`
+    return 'mp4a.40.2'
+  }
+  if (type === 'hvc1' || type === 'hev1') return `${type}.1.6.L93.B0`
+  if (type === 'Opus') return 'opus'
+  if (type === 'fLaC') return 'flac'
+  if (type === 'vp09') return 'vp09.00.10.08'
+  if (type === 'av01') return 'av01.0.04M.08'
+  if (type === 'ac-3') return 'ac-3'
+  if (type === 'ec-3') return 'ec-3'
+  return undefined
+}
+
+export function parseInit(d: Uint8Array): Mp4TrackInfo[] {
+  return findBoxes(d, ['moov', 'trak']).map((trak) => {
+    const tkhd = findBoxes(d, ['tkhd'], trak.data, trak.end)[0]
+    const mdhd = findBoxes(d, ['mdia', 'mdhd'], trak.data, trak.end)[0]
+    const hdlr = findBoxes(d, ['mdia', 'hdlr'], trak.data, trak.end)[0]
+    const stsd = findBoxes(d, ['mdia', 'minf', 'stbl', 'stsd'], trak.data, trak.end)[0]
+    const id = tkhd ? u32(d, tkhd.data + (d[tkhd.data] === 1 ? 20 : 12)) : 0
+    const timescale = mdhd ? u32(d, mdhd.data + (d[mdhd.data] === 1 ? 20 : 12)) : 90000
+    const handler = hdlr ? fourcc(d, hdlr.data + 8) : ''
+    const entry = stsd ? readBoxes(d, stsd.data + 8, stsd.end)[0] : undefined
+    return {
+      id,
+      timescale,
+      kind: handler === 'vide' ? 'video' : handler === 'soun' ? 'audio' : 'other',
+      codec: entry ? sampleEntryCodec(d, entry) : undefined,
+    }
+  })
+}
+
+/** Decode time (seconds) of the first fragment in a media segment, from `tfdt`. */
+export function fragmentStart(d: Uint8Array, tracks: Mp4TrackInfo[]): number | null {
+  let min: number | null = null
+  for (const traf of findBoxes(d, ['moof', 'traf'])) {
+    const tfhd = findBoxes(d, ['tfhd'], traf.data, traf.end)[0]
+    const tfdt = findBoxes(d, ['tfdt'], traf.data, traf.end)[0]
+    if (!tfhd || !tfdt) continue
+    const id = u32(d, tfhd.data + 4)
+    const track = tracks.find((t) => t.id === id)
+    const ts = track?.timescale ?? 90000
+    const v1 = d[tfdt.data] === 1
+    const base = v1 ? u32(d, tfdt.data + 4) * 4294967296 + u32(d, tfdt.data + 8) : u32(d, tfdt.data + 4)
+    const t = base / ts
+    if (min === null || t < min) min = t
+  }
+  return min
+}
diff --git a/src/hls/playlist.spec.ts b/src/hls/playlist.spec.ts
new file mode 100644
index 0000000..a058b1e
--- /dev/null
+++ b/src/hls/playlist.spec.ts
@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+import { parseAttributes, parseHexIv, parsePlaylist, sequenceIv } from './playlist'
+import { alignTimes } from './engine'
+
+const master = `#EXTM3U
+#EXT-X-VERSION:7
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aud",NAME="English",LANGUAGE="en",DEFAULT=YES,URI="audio/en.m3u8"
+#EXT-X-STREAM-INF:BANDWIDTH=2000000,AVERAGE-BANDWIDTH=1800000,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",FRAME-RATE=30,AUDIO="aud"
+v720/index.m3u8
+
+#EXT-X-STREAM-INF:BANDWIDTH=500000,RESOLUTION=640x360,CODECS="avc1.4d401e,mp4a.40.2"
+https://cdn.test/v360/index.m3u8
+`
+
+const media = `#EXTM3U
+#EXT-X-VERSION:7
+#EXT-X-TARGETDURATION:4
+#EXT-X-MEDIA-SEQUENCE:100
+#EXT-X-DISCONTINUITY-SEQUENCE:3
+#EXT-X-MAP:URI="init.mp4",BYTERANGE="720@0"
+#EXT-X-KEY:METHOD=AES-128,URI="key.bin",IV=0x0000000000000000000000000000000A
+#EXTINF:4.0,first
+seg100.m4s
+#EXT-X-BYTERANGE:1000@2000
+#EXTINF:3.5,
+all.m4s
+#EXT-X-BYTERANGE:500
+#EXTINF:2,
+all.m4s
+#EXT-X-KEY:METHOD=NONE
+#EXT-X-DISCONTINUITY
+#EXTINF:4,
+other/seg0.ts
+#EXT-X-ENDLIST
+`
+
+describe('parseAttributes', () => {
+  it('кавычки, запятые внутри кавычек, числа', () => {
+    expect(parseAttributes('BANDWIDTH=1,CODECS="a,b",RESOLUTION=1x2')).toEqual({ BANDWIDTH: '1', CODECS: 'a,b', RESOLUTION: '1x2' })
+  })
+})
+
+describe('parsePlaylist', () => {
+  it('master: варианты и альтернативные дорожки', () => {
+    const pl = parsePlaylist(master, 'https://cdn.test/live/master.m3u8')
+    expect(pl.type).toBe('master')
+    if (pl.type !== 'master') return
+    expect(pl.variants).toHaveLength(2)
+    expect(pl.variants[0]).toMatchObject({
+      uri: 'https://cdn.test/live/v720/index.m3u8', bandwidth: 2000000, averageBandwidth: 1800000,
+      width: 1280, height: 720, codecs: 'avc1.4d401f,mp4a.40.2', frameRate: 30, audio: 'aud',
+    })
+    expect(pl.variants[1].uri).toBe('https://cdn.test/v360/index.m3u8')
+    expect(pl.media[0]).toMatchObject({ type: 'AUDIO', groupId: 'aud', language: 'en', default: true, uri: 'https://cdn.test/live/audio/en.m3u8' })
+  })
+
+  it('media: последовательность, init, ключ, byterange, разрывы', () => {
+    const pl = parsePlaylist(media, 'https://cdn.test/v/index.m3u8')
+    if (pl.type !== 'media') throw new Error('expected media')
+    expect(pl.targetDuration).toBe(4)
+    expect(pl.endList).toBe(true)
+    expect(pl.totalDuration).toBe(13.5)
+    const [a, b, c, d] = pl.segments
+    expect(a).toMatchObject({ sn: 100, cc: 3, start: 0, duration: 4, title: 'first', uri: 'https://cdn.test/v/seg100.m4s' })
+    expect(a.map).toMatchObject({ uri: 'https://cdn.test/v/init.mp4', byteRange: { offset: 0, length: 720 } })
+    expect(a.key?.method).toBe('AES-128')
+    expect(a.key?.iv?.[15]).toBe(10)
+    expect(b).toMatchObject({ sn: 101, start: 4, byteRange: { offset: 2000, length: 1000 } })
+    expect(c.byteRange).toEqual({ offset: 3000, length: 500 })
+    expect(d).toMatchObject({ sn: 103, cc: 4, key: undefined })
+  })
+
+  it('без #EXTM3U — ошибка', () => {
+    expect(() => parsePlaylist('hello', 'x')).toThrow('Not an M3U8')
+  })
+
+  it('target duration выводится из сегментов', () => {
+    const pl = parsePlaylist('#EXTM3U\n#EXTINF:5.2,\na.ts\n', 'https://x/p.m3u8')
+    expect(pl.type === 'media' && pl.targetDuration).toBe(6)
+  })
+})
+
+describe('IV', () => {
+  it('из номера сегмента и из hex', () => {
+    expect(Array.from(sequenceIv(258).slice(14))).toEqual([1, 2])
+    expect(parseHexIv('0x01')[15]).toBe(1)
+  })
+})
+
+describe('alignTimes', () => {
+  const live = (seq: number, n: number) => parsePlaylist(
+    `#EXTM3U\n#EXT-X-TARGETDURATION:2\n#EXT-X-MEDIA-SEQUENCE:${seq}\n${Array.from({ length: n }, (_, i) => `#EXTINF:2,\ns${seq + i}.ts`).join('\n')}\n`,
+    'https://x/live.m3u8',
+  )
+
+  it('сохраняет время сегментов между перезагрузками живого плейлиста', () => {
+    const a = live(10, 4)
+    const b = live(12, 4)
+    alignTimes(a as never, b as never)
+    if (b.type !== 'media') return
+    expect(b.segments[0]).toMatchObject({ sn: 12, start: 4 })
+  })
+
+  it('при отставании без пересечения продолжает по номерам', () => {
+    const a = live(10, 2)
+    const b = live(20, 2)
+    alignTimes(a as never, b as never)
+    if (b.type !== 'media') return
+    expect(b.segments[0].start).toBe(20)
+  })
+})
diff --git a/src/hls/playlist.ts b/src/hls/playlist.ts
new file mode 100644
index 0000000..138bb89
--- /dev/null
+++ b/src/hls/playlist.ts
@@ -0,0 +1,261 @@
+export interface HlsByteRange {
+  offset: number
+  length: number
+}
+
+export interface HlsKey {
+  method: 'NONE' | 'AES-128' | 'SAMPLE-AES' | string
+  uri?: string
+  iv?: Uint8Array
+}
+
+export interface HlsInitSection {
+  uri: string
+  byteRange?: HlsByteRange
+  key?: HlsKey
+}
+
+export interface HlsSegment {
+  uri: string
+  duration: number
+  /** Start on the playlist timeline (sum of the preceding durations). */
+  start: number
+  /** Media sequence number. */
+  sn: number
+  /** Discontinuity sequence: grows by one at every EXT-X-DISCONTINUITY. */
+  cc: number
+  title?: string
+  byteRange?: HlsByteRange
+  key?: HlsKey
+  map?: HlsInitSection
+}
+
+export interface HlsMediaPlaylist {
+  type: 'media'
+  url: string
+  targetDuration: number
+  mediaSequence: number
+  discontinuitySequence: number
+  endList: boolean
+  playlistType?: string
+  segments: HlsSegment[]
+  totalDuration: number
+}
+
+export interface HlsVariant {
+  uri: string
+  bandwidth: number
+  averageBandwidth?: number
+  width?: number
+  height?: number
+  codecs?: string
+  frameRate?: number
+  name?: string
+  audio?: string
+}
+
+export interface HlsRendition {
+  type: string
+  groupId: string
+  name?: string
+  language?: string
+  uri?: string
+  default?: boolean
+}
+
+export interface HlsMasterPlaylist {
+  type: 'master'
+  url: string
+  variants: HlsVariant[]
+  media: HlsRendition[]
+}
+
+export type HlsPlaylist = HlsMasterPlaylist | HlsMediaPlaylist
+
+export class HlsParseError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'HlsParseError'
+  }
+}
+
+/** Attribute list of a tag: `BANDWIDTH=1280000,CODECS="avc1.4d401f,mp4a.40.2"`. */
+export function parseAttributes(input: string): Record<string, string> {
+  const out: Record<string, string> = {}
+  const re = /([A-Z0-9-]+)=("[^"]*"|[^,]*)/g
+  let m: RegExpExecArray | null
+  while ((m = re.exec(input))) {
+    let v = m[2]
+    if (v.startsWith('"')) v = v.slice(1, -1)
+    out[m[1]] = v
+  }
+  return out
+}
+
+function resolve(uri: string, base: string): string {
+  try {
+    return new URL(uri, base).href
+  } catch {
+    return uri
+  }
+}
+
+function parseByteRange(value: string, previousEnd: number): HlsByteRange {
+  const [len, off] = value.split('@')
+  const length = parseInt(len, 10)
+  const offset = off !== undefined ? parseInt(off, 10) : previousEnd
+  return { length, offset }
+}
+
+export function parseHexIv(value: string): Uint8Array {
+  const hex = value.replace(/^0x/i, '').padStart(32, '0')
+  const out = new Uint8Array(16)
+  for (let i = 0; i < 16; i++) out[i] = parseInt(hex.substr(i * 2, 2), 16)
+  return out
+}
+
+export function parsePlaylist(text: string, url: string): HlsPlaylist {
+  const lines = text.replace(/\r\n?/g, '\n').split('\n').map((l) => l.trim())
+  if (lines[0]?.replace(/^/, '') !== '#EXTM3U') throw new HlsParseError('Not an M3U8 playlist')
+  if (lines.some((l) => l.startsWith('#EXT-X-STREAM-INF'))) return parseMaster(lines, url)
+  return parseMedia(lines, url)
+}
+
+function parseMaster(lines: string[], url: string): HlsMasterPlaylist {
+  const variants: HlsVariant[] = []
+  const media: HlsRendition[] = []
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (line.startsWith('#EXT-X-STREAM-INF:')) {
+      const a = parseAttributes(line.slice(18))
+      let uri = ''
+      while (i + 1 < lines.length) {
+        const next = lines[++i]
+        if (next && !next.startsWith('#')) {
+          uri = next
+          break
+        }
+      }
+      if (!uri) continue
+      const res = a.RESOLUTION?.split('x').map(Number)
+      variants.push({
+        uri: resolve(uri, url),
+        bandwidth: Number(a.BANDWIDTH) || 0,
+        averageBandwidth: a['AVERAGE-BANDWIDTH'] ? Number(a['AVERAGE-BANDWIDTH']) : undefined,
+        width: res?.[0] || undefined,
+        height: res?.[1] || undefined,
+        codecs: a.CODECS || undefined,
+        frameRate: a['FRAME-RATE'] ? Number(a['FRAME-RATE']) : undefined,
+        name: a.NAME || undefined,
+        audio: a.AUDIO || undefined,
+      })
+    } else if (line.startsWith('#EXT-X-MEDIA:')) {
+      const a = parseAttributes(line.slice(13))
+      media.push({
+        type: a.TYPE,
+        groupId: a['GROUP-ID'],
+        name: a.NAME,
+        language: a.LANGUAGE,
+        uri: a.URI ? resolve(a.URI, url) : undefined,
+        default: a.DEFAULT === 'YES',
+      })
+    }
+  }
+  if (!variants.length) throw new HlsParseError('Master playlist without variants')
+  return { type: 'master', url, variants, media }
+}
+
+function parseMedia(lines: string[], url: string): HlsMediaPlaylist {
+  const pl: HlsMediaPlaylist = {
+    type: 'media',
+    url,
+    targetDuration: 0,
+    mediaSequence: 0,
+    discontinuitySequence: 0,
+    endList: false,
+    segments: [],
+    totalDuration: 0,
+  }
+  let duration = 0
+  let title: string | undefined
+  let byteRange: HlsByteRange | undefined
+  let lastRangeEnd = 0
+  let key: HlsKey | undefined
+  let map: HlsInitSection | undefined
+  let discontinuity = false
+  let cc = 0
+  let start = 0
+
+  for (const line of lines) {
+    if (!line) continue
+    if (line.startsWith('#EXTINF:')) {
+      const body = line.slice(8)
+      const comma = body.indexOf(',')
+      duration = parseFloat(comma === -1 ? body : body.slice(0, comma))
+      title = comma === -1 ? undefined : body.slice(comma + 1) || undefined
+    } else if (line.startsWith('#EXT-X-TARGETDURATION:')) {
+      pl.targetDuration = parseFloat(line.slice(22))
+    } else if (line.startsWith('#EXT-X-MEDIA-SEQUENCE:')) {
+      pl.mediaSequence = parseInt(line.slice(22), 10)
+    } else if (line.startsWith('#EXT-X-DISCONTINUITY-SEQUENCE:')) {
+      pl.discontinuitySequence = parseInt(line.slice(30), 10)
+      cc = pl.discontinuitySequence
+    } else if (line === '#EXT-X-DISCONTINUITY') {
+      discontinuity = true
+    } else if (line === '#EXT-X-ENDLIST') {
+      pl.endList = true
+    } else if (line.startsWith('#EXT-X-PLAYLIST-TYPE:')) {
+      pl.playlistType = line.slice(21)
+    } else if (line.startsWith('#EXT-X-BYTERANGE:')) {
+      byteRange = parseByteRange(line.slice(17), lastRangeEnd)
+    } else if (line.startsWith('#EXT-X-KEY:')) {
+      const a = parseAttributes(line.slice(11))
+      key = a.METHOD === 'NONE'
+        ? undefined
+        : { method: a.METHOD, uri: a.URI ? resolve(a.URI, url) : undefined, iv: a.IV ? parseHexIv(a.IV) : undefined }
+    } else if (line.startsWith('#EXT-X-MAP:')) {
+      const a = parseAttributes(line.slice(11))
+      map = {
+        uri: resolve(a.URI, url),
+        byteRange: a.BYTERANGE ? parseByteRange(a.BYTERANGE, 0) : undefined,
+        key,
+      }
+    } else if (!line.startsWith('#')) {
+      if (discontinuity) cc++
+      const seg: HlsSegment = {
+        uri: resolve(line, url),
+        duration,
+        start,
+        sn: pl.mediaSequence + pl.segments.length,
+        cc,
+        title,
+        byteRange,
+        key,
+        map,
+      }
+      pl.segments.push(seg)
+      start += duration
+      if (byteRange) lastRangeEnd = byteRange.offset + byteRange.length
+      duration = 0
+      title = undefined
+      byteRange = undefined
+      discontinuity = false
+    }
+  }
+  pl.totalDuration = start
+  if (!pl.targetDuration && pl.segments.length) {
+    pl.targetDuration = Math.ceil(Math.max(...pl.segments.map((s) => s.duration)))
+  }
+  return pl
+}
+
+/** IV of a segment without an explicit IV attribute: its media sequence number, big-endian. */
+export function sequenceIv(sn: number): Uint8Array {
+  const iv = new Uint8Array(16)
+  let n = sn
+  for (let i = 15; i >= 8 && n > 0; i--) {
+    iv[i] = n % 256
+    n = Math.floor(n / 256)
+  }
+  return iv
+}
diff --git a/src/hls/transmux.ts b/src/hls/transmux.ts
new file mode 100644
index 0000000..56dbf31
--- /dev/null
+++ b/src/hls/transmux.ts
@@ -0,0 +1,34 @@
+import type { Mp4TrackInfo } from './mp4.js'
+
+export interface TransmuxResult {
+  /** A new initialization segment, when the stream configuration appeared or changed. */
+  init?: Uint8Array
+  /** Media fragments (`moof` + `mdat`) to append. */
+  data: Uint8Array
+  /** MIME type with codecs for the SourceBuffer. */
+  mimeType: string
+  tracks: Mp4TrackInfo[]
+  /** Decode time of the first sample, in seconds. */
+  startTime: number
+}
+
+export interface TransmuxContext {
+  /** The segment starts after EXT-X-DISCONTINUITY (or after a seek / level switch). */
+  discontinuity: boolean
+}
+
+export interface SegmentTransmuxer {
+  /** Whether this transmuxer understands the segment (by its first bytes). */
+  canHandle(data: Uint8Array): boolean
+  push(data: Uint8Array, ctx: TransmuxContext): TransmuxResult
+  reset(): void
+}
+
+export type TransmuxerFactory = () => SegmentTransmuxer
+
+export class TransmuxError extends Error {
+  constructor(message: string, readonly code: 'codec' | 'format') {
+    super(message)
+    this.name = 'TransmuxError'
+  }
+}
diff --git a/src/hls/ts/adts.ts b/src/hls/ts/adts.ts
new file mode 100644
index 0000000..c9d892e
--- /dev/null
+++ b/src/hls/ts/adts.ts
@@ -0,0 +1,54 @@
+export const ADTS_RATES = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350]
+
+export interface AdtsConfig {
+  objectType: number
+  rateIndex: number
+  sampleRate: number
+  channels: number
+}
+
+export interface AdtsFrames {
+  config?: AdtsConfig
+  frames: Uint8Array[]
+  /** Bytes after the last complete frame (a frame cut at the end of the input). */
+  rest: Uint8Array
+}
+
+export function parseAdts(d: Uint8Array): AdtsFrames {
+  const frames: Uint8Array[] = []
+  let config: AdtsConfig | undefined
+  let o = 0
+  while (o + 7 <= d.length) {
+    if (d[o] !== 0xff || (d[o + 1] & 0xf6) !== 0xf0) {
+      o++
+      continue
+    }
+    const header = d[o + 1] & 0x01 ? 7 : 9
+    const frameLength = ((d[o + 3] & 0x03) << 11) | (d[o + 4] << 3) | (d[o + 5] >> 5)
+    if (frameLength < header) {
+      o++
+      continue
+    }
+    if (o + frameLength > d.length) break
+    if (!config) {
+      const rateIndex = (d[o + 2] >> 2) & 0x0f
+      config = {
+        objectType: (d[o + 2] >> 6) + 1,
+        rateIndex,
+        sampleRate: ADTS_RATES[rateIndex] ?? 44100,
+        channels: ((d[o + 2] & 0x01) << 2) | (d[o + 3] >> 6),
+      }
+    }
+    frames.push(d.subarray(o + header, o + frameLength))
+    o += frameLength
+  }
+  return { config, frames, rest: d.subarray(o) }
+}
+
+/** AudioSpecificConfig (2 bytes) for the esds box. */
+export function audioSpecificConfig(c: AdtsConfig): Uint8Array {
+  return new Uint8Array([
+    (c.objectType << 3) | (c.rateIndex >> 1),
+    ((c.rateIndex & 1) << 7) | (c.channels << 3),
+  ])
+}
diff --git a/src/hls/ts/demux.ts b/src/hls/ts/demux.ts
new file mode 100644
index 0000000..1a686dc
--- /dev/null
+++ b/src/hls/ts/demux.ts
@@ -0,0 +1,150 @@
+export const STREAM_H264 = 0x1b
+export const STREAM_AAC = 0x0f
+export const STREAM_HEVC = 0x24
+export const STREAM_MP3 = [0x03, 0x04]
+export const STREAM_AC3 = [0x81, 0x87]
+
+export interface PesPacket {
+  pts?: number
+  dts?: number
+  data: Uint8Array
+}
+
+export interface DemuxState {
+  pmtPid?: number
+  videoPid?: number
+  audioPid?: number
+  videoType?: number
+  audioType?: number
+}
+
+export interface DemuxResult extends DemuxState {
+  video: PesPacket[]
+  audio: PesPacket[]
+}
+
+/** 33-bit PES timestamp at `o` (90 kHz), without bitwise ops beyond 32 bits. */
+export function readTimestamp(d: Uint8Array, o: number): number {
+  return (d[o] & 0x0e) * 536870912
+    + d[o + 1] * 4194304
+    + (d[o + 2] & 0xfe) * 16384
+    + d[o + 3] * 128
+    + (d[o + 4] & 0xfe) / 2
+}
+
+export function parsePes(d: Uint8Array): PesPacket | null {
+  if (d.length < 9 || d[0] !== 0 || d[1] !== 0 || d[2] !== 1) return null
+  const flags = d[7]
+  const headerLength = d[8]
+  let pts: number | undefined
+  let dts: number | undefined
+  if (flags & 0x80) {
+    pts = readTimestamp(d, 9)
+    dts = (flags & 0xc0) === 0xc0 ? readTimestamp(d, 14) : pts
+  }
+  const start = 9 + headerLength
+  if (start > d.length) return null
+  return { pts, dts, data: d.subarray(start) }
+}
+
+function concat(chunks: Uint8Array[]): Uint8Array {
+  if (chunks.length === 1) return chunks[0]
+  let len = 0
+  for (const c of chunks) len += c.length
+  const out = new Uint8Array(len)
+  let o = 0
+  for (const c of chunks) {
+    out.set(c, o)
+    o += c.length
+  }
+  return out
+}
+
+function parsePat(d: Uint8Array, p: number): number | undefined {
+  const sectionLength = ((d[p + 1] & 0x0f) << 8) | d[p + 2]
+  const end = Math.min(d.length, p + 3 + sectionLength - 4)
+  for (let o = p + 8; o + 4 <= end; o += 4) {
+    const program = (d[o] << 8) | d[o + 1]
+    if (program !== 0) return ((d[o + 2] & 0x1f) << 8) | d[o + 3]
+  }
+  return undefined
+}
+
+function parsePmt(d: Uint8Array, p: number, state: DemuxState): void {
+  const sectionLength = ((d[p + 1] & 0x0f) << 8) | d[p + 2]
+  const end = Math.min(d.length, p + 3 + sectionLength - 4)
+  const infoLength = ((d[p + 10] & 0x0f) << 8) | d[p + 11]
+  let o = p + 12 + infoLength
+  while (o + 5 <= end) {
+    const type = d[o]
+    const pid = ((d[o + 1] & 0x1f) << 8) | d[o + 2]
+    const esLength = ((d[o + 3] & 0x0f) << 8) | d[o + 4]
+    const isVideo = type === STREAM_H264 || type === STREAM_HEVC
+    const isAudio = type === STREAM_AAC || STREAM_MP3.includes(type) || STREAM_AC3.includes(type)
+    if (isVideo && state.videoPid === undefined) {
+      state.videoPid = pid
+      state.videoType = type
+    } else if (isAudio && state.audioPid === undefined) {
+      state.audioPid = pid
+      state.audioType = type
+    }
+    o += 5 + esLength
+  }
+}
+
+/** Splits a transport stream segment into video and audio PES packets. */
+export function demuxTs(d: Uint8Array, previous: DemuxState = {}): DemuxResult {
+  const state: DemuxState = { ...previous }
+  const pending = new Map<number, Uint8Array[]>()
+  const video: PesPacket[] = []
+  const audio: PesPacket[] = []
+  let sawPmt = false
+
+  const flush = (pid: number): void => {
+    const chunks = pending.get(pid)
+    pending.delete(pid)
+    if (!chunks?.length) return
+    const pes = parsePes(concat(chunks))
+    if (!pes) return
+    if (pid === state.videoPid) video.push(pes)
+    else if (pid === state.audioPid) audio.push(pes)
+  }
+
+  let start = 0
+  while (start < d.length && d[start] !== 0x47) start++
+  for (let o = start; o + 188 <= d.length; o += 188) {
+    if (d[o] !== 0x47) continue
+    const pusi = (d[o + 1] & 0x40) !== 0
+    const pid = ((d[o + 1] & 0x1f) << 8) | d[o + 2]
+    const afc = (d[o + 3] & 0x30) >> 4
+    let p = o + 4
+    if (afc === 2) continue
+    if (afc === 3) p += d[p] + 1
+    if (p >= o + 188) continue
+    if (pid === 0) {
+      if (pusi) p += d[p] + 1
+      state.pmtPid = parsePat(d, p)
+      continue
+    }
+    if (pid === state.pmtPid) {
+      if (!sawPmt) {
+        if (pusi) p += d[p] + 1
+        state.videoPid = state.audioPid = state.videoType = state.audioType = undefined
+        parsePmt(d, p, state)
+        sawPmt = true
+      }
+      continue
+    }
+    if (pid !== state.videoPid && pid !== state.audioPid) continue
+    if (pusi) flush(pid)
+    let list = pending.get(pid)
+    if (!list) {
+      if (!pusi) continue
+      list = []
+      pending.set(pid, list)
+    }
+    list.push(d.subarray(p, o + 188))
+  }
+  for (const pid of Array.from(pending.keys())) flush(pid)
+  return { ...state, video, audio }
+}
diff --git a/src/hls/ts/h264.ts b/src/hls/ts/h264.ts
new file mode 100644
index 0000000..2db5111
--- /dev/null
+++ b/src/hls/ts/h264.ts
@@ -0,0 +1,185 @@
+export const NAL_IDR = 5
+export const NAL_SPS = 7
+export const NAL_PPS = 8
+export const NAL_AUD = 9
+
+/** NAL units of an Annex-B byte stream (start codes removed). */
+export function splitNals(d: Uint8Array): Uint8Array[] {
+  const nals: Uint8Array[] = []
+  let start = -1
+  let i = 0
+  const n = d.length
+  while (i + 2 < n) {
+    if (d[i + 2] > 1) {
+      i += 3
+    } else if (d[i] === 0 && d[i + 1] === 0 && d[i + 2] === 1) {
+      if (start >= 0) nals.push(trimZeros(d.subarray(start, i)))
+      i += 3
+      start = i
+    } else {
+      i++
+    }
+  }
+  if (start >= 0 && start < n) nals.push(d.subarray(start))
+  return nals.filter((x) => x.length > 0)
+}
+
+function trimZeros(d: Uint8Array): Uint8Array {
+  let end = d.length
+  while (end > 0 && d[end - 1] === 0) end--
+  return d.subarray(0, end)
+}
+
+export function nalType(nal: Uint8Array): number {
+  return nal[0] & 0x1f
+}
+
+/** RBSP: drops emulation prevention bytes (00 00 03 → 00 00). */
+export function unescapeRbsp(d: Uint8Array): Uint8Array {
+  const out = new Uint8Array(d.length)
+  let o = 0
+  let zeros = 0
+  for (let i = 0; i < d.length; i++) {
+    const b = d[i]
+    if (zeros >= 2 && b === 3) {
+      zeros = 0
+      continue
+    }
+    out[o++] = b
+    zeros = b === 0 ? zeros + 1 : 0
+  }
+  return out.subarray(0, o)
+}
+
+export class BitReader {
+  private pos = 0
+  constructor(private readonly d: Uint8Array) {}
+
+  bit(): number {
+    const byte = this.d[this.pos >> 3] ?? 0
+    const v = (byte >> (7 - (this.pos & 7))) & 1
+    this.pos++
+    return v
+  }
+
+  bits(n: number): number {
+    let v = 0
+    for (let i = 0; i < n; i++) v = v * 2 + this.bit()
+    return v
+  }
+
+  ue(): number {
+    let zeros = 0
+    while (this.bit() === 0 && zeros < 32) zeros++
+    return 2 ** zeros - 1 + this.bits(zeros)
+  }
+
+  se(): number {
+    const v = this.ue()
+    return v & 1 ? (v + 1) / 2 : -v / 2
+  }
+}
+
+export interface SpsInfo {
+  profile: number
+  compatibility: number
+  level: number
+  width: number
+  height: number
+}
+
+const HIGH_PROFILES = [100, 110, 122, 244, 44, 83, 86, 118, 128, 138, 139, 134, 135]
+
+function skipScalingList(r: BitReader, size: number): void {
+  let last = 8
+  let next = 8
+  for (let j = 0; j < size; j++) {
+    if (next !== 0) next = (last + r.se() + 256) % 256
+    last = next === 0 ? last : next
+  }
+}
+
+/** Profile, level and coded picture size from a sequence parameter set NAL unit. */
+export function parseSps(nal: Uint8Array): SpsInfo {
+  const r = new BitReader(unescapeRbsp(nal.subarray(1)))
+  const profile = r.bits(8)
+  const compatibility = r.bits(8)
+  const level = r.bits(8)
+  r.ue()
+  let chroma = 1
+  let frameMbsOnly = 1
+  if (HIGH_PROFILES.includes(profile)) {
+    chroma = r.ue()
+    if (chroma === 3) r.bit()
+    r.ue()
+    r.ue()
+    r.bit()
+    if (r.bit()) {
+      for (let i = 0; i < (chroma === 3 ? 12 : 8); i++) {
+        if (r.bit()) skipScalingList(r, i < 6 ? 16 : 64)
+      }
+    }
+  }
+  r.ue()
+  const pocType = r.ue()
+  if (pocType === 0) {
+    r.ue()
+  } else if (pocType === 1) {
+    r.bit()
+    r.se()
+    r.se()
+    const n = r.ue()
+    for (let i = 0; i < n; i++) r.se()
+  }
+  r.ue()
+  r.bit()
+  const widthMbs = r.ue() + 1
+  const heightUnits = r.ue() + 1
+  frameMbsOnly = r.bit()
+  if (!frameMbsOnly) r.bit()
+  r.bit()
+  let cropL = 0
+  let cropR = 0
+  let cropT = 0
+  let cropB = 0
+  if (r.bit()) {
+    cropL = r.ue()
+    cropR = r.ue()
+    cropT = r.ue()
+    cropB = r.ue()
+  }
+  const subW = chroma === 1 || chroma === 2 ? 2 : 1
+  const subH = chroma === 1 ? 2 : 1
+  const unitX = chroma === 0 ? 1 : subW
+  const unitY = (chroma === 0 ? 1 : subH) * (2 - frameMbsOnly)
+  return {
+    profile,
+    compatibility,
+    level,
+    width: widthMbs * 16 - (cropL + cropR) * unitX,
+    height: (2 - frameMbsOnly) * heightUnits * 16 - (cropT + cropB) * unitY,
+  }
+}
+
+export function avcCodec(sps: Uint8Array): string {
+  const h = (n: number): string => n.toString(16).padStart(2, '0')
+  return `avc1.${h(sps[1])}${h(sps[2])}${h(sps[3])}`
+}
+
+/** Length-prefixed (4-byte) sample payload from NAL units. */
+export function toAvcc(nals: Uint8Array[]): Uint8Array {
+  let len = 0
+  for (const n of nals) len += 4 + n.length
+  const out = new Uint8Array(len)
+  let o = 0
+  for (const n of nals) {
+    const l = n.length
+    out[o] = (l >>> 24) & 0xff
+    out[o + 1] = (l >>> 16) & 0xff
+    out[o + 2] = (l >>> 8) & 0xff
+    out[o + 3] = l & 0xff
+    out.set(n, o + 4)
+    o += 4 + l
+  }
+  return out
+}
diff --git a/src/hls/ts/mp4mux.ts b/src/hls/ts/mp4mux.ts
new file mode 100644
index 0000000..3018117
--- /dev/null
+++ b/src/hls/ts/mp4mux.ts
@@ -0,0 +1,175 @@
+export interface MuxVideoTrack {
+  id: number
+  kind: 'video'
+  timescale: number
+  width: number
+  height: number
+  sps: Uint8Array
+  pps: Uint8Array
+}
+
+export interface MuxAudioTrack {
+  id: number
+  kind: 'audio'
+  timescale: number
+  channels: number
+  sampleRate: number
+  config: Uint8Array
+}
+
+export type MuxTrack = MuxVideoTrack | MuxAudioTrack
+
+export interface MuxSample {
+  size: number
+  duration: number
+  /** Composition offset (pts − dts) in track timescale. */
+  cts: number
+  key: boolean
+}
+
+function type4(t: string): number[] {
+  return [t.charCodeAt(0), t.charCodeAt(1), t.charCodeAt(2), t.charCodeAt(3)]
+}
+
+function u32(n: number): number[] {
+  return [(n >>> 24) & 0xff, (n >>> 16) & 0xff, (n >>> 8) & 0xff, n & 0xff]
+}
+
+function u16(n: number): number[] {
+  return [(n >>> 8) & 0xff, n & 0xff]
+}
+
+function u64(n: number): number[] {
+  const hi = Math.floor(n / 4294967296)
+  return [...u32(hi), ...u32(n - hi * 4294967296)]
+}
+
+type Part = Uint8Array | number[]
+
+export function box(type: string, ...parts: Part[]): Uint8Array {
+  let size = 8
+  for (const p of parts) size += p.length
+  const out = new Uint8Array(size)
+  out.set(u32(size), 0)
+  out.set(type4(type), 4)
+  let o = 8
+  for (const p of parts) {
+    out.set(p, o)
+    o += p.length
+  }
+  return out
+}
+
+function full(version: number, flags: number): number[] {
+  return [version, (flags >> 16) & 0xff, (flags >> 8) & 0xff, flags & 0xff]
+}
+
+const MATRIX = [
+  ...u32(0x00010000), ...u32(0), ...u32(0),
+  ...u32(0), ...u32(0x00010000), ...u32(0),
+  ...u32(0), ...u32(0), ...u32(0x40000000),
+]
+
+function zeros(n: number): number[] {
+  return new Array<number>(n).fill(0)
+}
+
+function mvhd(timescale: number, nextTrack: number): Uint8Array {
+  return box('mvhd', full(0, 0), u32(0), u32(0), u32(timescale), u32(0),
+    u32(0x00010000), u16(0x0100), zeros(10), MATRIX, zeros(24), u32(nextTrack))
+}
+
+function tkhd(t: MuxTrack): Uint8Array {
+  const w = t.kind === 'video' ? t.width : 0
+  const h = t.kind === 'video' ? t.height : 0
+  return box('tkhd', full(0, 3), u32(0), u32(0), u32(t.id), u32(0), u32(0), zeros(8),
+    u16(0), u16(0), u16(t.kind === 'audio' ? 0x0100 : 0), u16(0), MATRIX,
+    u32(w * 65536), u32(h * 65536))
+}
+
+function mdhd(timescale: number): Uint8Array {
+  return box('mdhd', full(0, 0), u32(0), u32(0), u32(timescale), u32(0), u16(0x55c4), u16(0))
+}
+
+function hdlr(kind: 'video' | 'audio'): Uint8Array {
+  const name = kind === 'video' ? 'VideoHandler' : 'SoundHandler'
+  return box('hdlr', full(0, 0), u32(0), type4(kind === 'video' ? 'vide' : 'soun'), zeros(12),
+    [...Array.from(name, (c) => c.charCodeAt(0)), 0])
+}
+
+function avc1(t: MuxVideoTrack): Uint8Array {
+  const avcC = box('avcC', [1, t.sps[1], t.sps[2], t.sps[3], 0xff, 0xe1],
+    u16(t.sps.length), t.sps, [1], u16(t.pps.length), t.pps)
+  return box('avc1', zeros(6), u16(1), u16(0), u16(0), zeros(12),
+    u16(t.width), u16(t.height), u32(0x00480000), u32(0x00480000), u32(0),
+    u16(1), zeros(32), u16(0x0018), u16(0xffff), avcC)
+}
+
+function descriptorLength(n: number): number[] {
+  return [0x80 | ((n >> 21) & 0x7f), 0x80 | ((n >> 14) & 0x7f), 0x80 | ((n >> 7) & 0x7f), n & 0x7f]
+}
+
+function mp4a(t: MuxAudioTrack): Uint8Array {
+  const dsi = [0x05, ...descriptorLength(t.config.length), ...t.config]
+  const dcd = [0x04, ...descriptorLength(13 + dsi.length), 0x40, 0x15, 0, 0, 0, ...u32(0), ...u32(0), ...dsi]
+  const sl = [0x06, ...descriptorLength(1), 0x02]
+  const es = [0x03, ...descriptorLength(3 + dcd.length + sl.length), ...u16(t.id), 0, ...dcd, ...sl]
+  const esds = box('esds', full(0, 0), es)
+  return box('mp4a', zeros(6), u16(1), zeros(8), u16(t.channels), u16(16), u16(0), u16(0),
+    u32(Math.min(t.sampleRate, 65535) * 65536), esds)
+}
+
+function stbl(t: MuxTrack): Uint8Array {
+  const entry = t.kind === 'video' ? avc1(t) : mp4a(t)
+  return box('stbl',
+    box('stsd', full(0, 0), u32(1), entry),
+    box('stts', full(0, 0), u32(0)),
+    box('stsc', full(0, 0), u32(0)),
+    box('stsz', full(0, 0), u32(0), u32(0)),
+    box('stco', full(0, 0), u32(0)))
+}
+
+function trak(t: MuxTrack): Uint8Array {
+  const header = t.kind === 'video'
+    ? box('vmhd', full(0, 1), zeros(8))
+    : box('smhd', full(0, 0), zeros(4))
+  const dinf = box('dinf', box('dref', full(0, 0), u32(1), box('url ', full(0, 1))))
+  return box('trak', tkhd(t), box('mdia', mdhd(t.timescale), hdlr(t.kind), box('minf', header, dinf, stbl(t))))
+}
+
+export function initSegment(tracks: MuxTrack[]): Uint8Array {
+  const ftyp = box('ftyp', type4('isom'), u32(1), type4('isom'), type4('iso5'), type4('avc1'), type4('mp41'))
+  const trex = tracks.map((t) => box('trex', full(0, 0), u32(t.id), u32(1), u32(0), u32(0), u32(0x00010001)))
+  const moov = box('moov', mvhd(1000, tracks.length + 1), ...tracks.map(trak), box('mvex', ...trex))
+  return concatBytes([ftyp, moov])
+}
+
+/** One `moof` + `mdat` pair for a track's samples. */
+export function fragment(seq: number, trackId: number, baseTime: number, samples: MuxSample[], payload: Uint8Array): Uint8Array {
+  const entries: number[] = []
+  for (const s of samples) {
+    entries.push(...u32(s.duration), ...u32(s.size),
+      ...u32(s.key ? 0x02000000 : 0x01010000), ...u32(s.cts | 0))
+  }
+  const trun = box('trun', full(1, 0x000f01), u32(samples.length), u32(0), entries)
+  const traf = box('traf',
+    box('tfhd', full(0, 0x020000), u32(trackId)),
+    box('tfdt', full(1, 0), u64(Math.max(0, Math.round(baseTime)))),
+    trun)
+  const moof = box('moof', box('mfhd', full(0, 0), u32(seq)), traf)
+  // trun data_offset: moof(8) + mfhd(16) + traf(8) + tfhd(16) + tfdt(20) + trun header(8) + flags(4) + count(4).
+  moof.set(u32(moof.length + 8), 84)
+  return concatBytes([moof, box('mdat', payload)])
+}
+
+export function concatBytes(parts: Uint8Array[]): Uint8Array {
+  let len = 0
+  for (const p of parts) len += p.length
+  const out = new Uint8Array(len)
+  let o = 0
+  for (const p of parts) {
+    out.set(p, o)
+    o += p.length
+  }
+  return out
+}
diff --git a/src/hls/ts/transmuxer.ts b/src/hls/ts/transmuxer.ts
new file mode 100644
index 0000000..6057827
--- /dev/null
+++ b/src/hls/ts/transmuxer.ts
@@ -0,0 +1,198 @@
+import { isMpegTs, type Mp4TrackInfo } from '../mp4.js'
+import { TransmuxError, type SegmentTransmuxer, type TransmuxContext, type TransmuxResult } from '../transmux.js'
+import { audioSpecificConfig, parseAdts, type AdtsConfig } from './adts.js'
+import { demuxTs, STREAM_AAC, STREAM_H264, type DemuxState, type PesPacket } from './demux.js'
+import { avcCodec, nalType, NAL_AUD, NAL_IDR, NAL_PPS, NAL_SPS, parseSps, splitNals, toAvcc } from './h264.js'
+import { concatBytes, fragment, initSegment, type MuxSample, type MuxTrack } from './mp4mux.js'
+
+const VIDEO_ID = 1
+const AUDIO_ID = 2
+const WRAP = 8589934592
+const FRAME = 1024
+
+interface VideoConfig { sps: Uint8Array, pps: Uint8Array, width: number, height: number, codec: string }
+
+function sameBytes(a: Uint8Array, b: Uint8Array): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false
+  return true
+}
+
+/** MPEG-TS (H.264 + AAC) → fragmented MP4, segment by segment, with a continuous timeline. */
+export class TsTransmuxer implements SegmentTransmuxer {
+  private demux: DemuxState = {}
+  private video?: VideoConfig
+  private audio?: AdtsConfig
+  private initKey = ''
+  private seq = 1
+  private ref: number | null = null
+  private nextVideoDts: number | null = null
+  private nextAudioDts: number | null = null
+  private videoDuration = 3000
+
+  canHandle(data: Uint8Array): boolean {
+    return isMpegTs(data)
+  }
+
+  reset(): void {
+    this.demux = {}
+    this.initKey = ''
+    this.ref = null
+    this.nextVideoDts = null
+    this.nextAudioDts = null
+  }
+
+  private unwrap(ts: number): number {
+    if (this.ref === null) this.ref = ts
+    while (ts - this.ref > WRAP / 2) ts -= WRAP
+    while (this.ref - ts > WRAP / 2) ts += WRAP
+    this.ref = ts
+    return ts
+  }
+
+  push(data: Uint8Array, ctx: TransmuxContext): TransmuxResult {
+    if (ctx.discontinuity) {
+      this.ref = null
+      this.nextVideoDts = null
+      this.nextAudioDts = null
+    }
+    const res = demuxTs(data, this.demux)
+    this.demux = res
+    if (res.videoType !== undefined && res.videoType !== STREAM_H264) {
+      throw new TransmuxError(`Unsupported video stream type 0x${res.videoType.toString(16)}`, 'codec')
+    }
+    if (res.audioType !== undefined && res.audioType !== STREAM_AAC) {
+      throw new TransmuxError(`Unsupported audio stream type 0x${res.audioType.toString(16)}`, 'codec')
+    }
+    if (res.videoPid === undefined && res.audioPid === undefined) {
+      throw new TransmuxError('No program map in the transport stream', 'format')
+    }
+
+    const video = res.video.length ? this.videoSamples(res.video) : null
+    const audio = res.audio.length ? this.audioSamples(res.audio) : null
+
+    const tracks: MuxTrack[] = []
+    const info: Mp4TrackInfo[] = []
+    const codecs: string[] = []
+    if (this.video) {
+      tracks.push({ id: VIDEO_ID, kind: 'video', timescale: 90000, ...this.video })
+      info.push({ id: VIDEO_ID, kind: 'video', timescale: 90000, codec: this.video.codec })
+      codecs.push(this.video.codec)
+    }
+    if (this.audio) {
+      const config = audioSpecificConfig(this.audio)
+      tracks.push({ id: AUDIO_ID, kind: 'audio', timescale: this.audio.sampleRate, channels: this.audio.channels, sampleRate: this.audio.sampleRate, config })
+      info.push({ id: AUDIO_ID, kind: 'audio', timescale: this.audio.sampleRate, codec: `mp4a.40.${this.audio.objectType}` })
+      codecs.push(`mp4a.40.${this.audio.objectType}`)
+    }
+    if (!tracks.length) throw new TransmuxError('No decodable samples in the segment', 'format')
+
+    const key = codecs.join(',') + (this.video ? `|${this.video.width}x${this.video.height}|${this.video.sps.join('.')}` : '')
+    let init: Uint8Array | undefined
+    if (key !== this.initKey) {
+      init = initSegment(tracks)
+      this.initKey = key
+    }
+
+    const parts: Uint8Array[] = []
+    const starts: number[] = []
+    if (video && this.video) {
+      parts.push(fragment(this.seq++, VIDEO_ID, video.base, video.samples, video.payload))
+      starts.push(video.base / 90000)
+    }
+    if (audio && this.audio) {
+      parts.push(fragment(this.seq++, AUDIO_ID, audio.base, audio.samples, audio.payload))
+      starts.push(audio.base / this.audio.sampleRate)
+    }
+    return {
+      init,
+      data: concatBytes(parts),
+      mimeType: `${this.video ? 'video' : 'audio'}/mp4; codecs="${codecs.join(',')}"`,
+      tracks: info,
+      startTime: starts.length ? Math.min(...starts) : 0,
+    }
+  }
+
+  private videoSamples(pes: PesPacket[]): { base: number, samples: MuxSample[], payload: Uint8Array } | null {
+    const units: { dts: number, pts: number, key: boolean, data: Uint8Array }[] = []
+    let lastDts: number | null = null
+    for (const p of pes) {
+      const nals = splitNals(p.data)
+      const keep: Uint8Array[] = []
+      let key = false
+      for (const nal of nals) {
+        const t = nalType(nal)
+        if (t === NAL_SPS) {
+          const info = parseSps(nal)
+          if (!this.video || !sameBytes(this.video.sps, nal)) {
+            this.video = { sps: nal.slice(), pps: this.video?.pps ?? new Uint8Array(0), width: info.width, height: info.height, codec: avcCodec(nal) }
+          }
+        } else if (t === NAL_PPS) {
+          if (this.video) this.video.pps = nal.slice()
+        } else if (t !== NAL_AUD) {
+          if (t === NAL_IDR) key = true
+          keep.push(nal)
+        }
+      }
+      if (!keep.length) continue
+      const dts: number | null = p.dts !== undefined ? this.unwrap(p.dts) : (lastDts !== null ? lastDts + this.videoDuration : null)
+      if (dts === null) continue
+      const pts = p.pts !== undefined ? this.unwrap(p.pts) : dts
+      units.push({ dts, pts, key, data: toAvcc(keep) })
+      lastDts = dts
+    }
+    if (!units.length || !this.video?.pps.length) return null
+
+    // Continuity: a segment that starts within a frame of where the previous ended is glued to it.
+    if (this.nextVideoDts !== null) {
+      const gap = units[0].dts - this.nextVideoDts
+      if (Math.abs(gap) < this.videoDuration * 1.5 && gap !== 0) {
+        units[0].pts -= gap
+        units[0].dts -= gap
+      }
+    }
+
+    const samples: MuxSample[] = []
+    for (let i = 0; i < units.length; i++) {
+      const u = units[i]
+      let duration = i + 1 < units.length ? units[i + 1].dts - u.dts : this.videoDuration
+      if (duration <= 0) duration = this.videoDuration
+      else if (i + 1 < units.length) this.videoDuration = duration
+      samples.push({ size: u.data.length, duration, cts: Math.max(0, u.pts - u.dts), key: u.key })
+    }
+    const last = units[units.length - 1]
+    this.nextVideoDts = last.dts + samples[samples.length - 1].duration
+    return { base: units[0].dts, samples, payload: concatBytes(units.map((u) => u.data)) }
+  }
+
+  private audioSamples(pes: PesPacket[]): { base: number, samples: MuxSample[], payload: Uint8Array } | null {
+    const frames: Uint8Array[] = []
+    let firstPts: number | null = null
+    let carry: Uint8Array = new Uint8Array(0)
+    for (const p of pes) {
+      const input: Uint8Array = carry.length ? concatBytes([carry, p.data]) : p.data
+      const parsed = parseAdts(input)
+      if (parsed.config && !this.audio) this.audio = parsed.config
+      else if (parsed.config && this.audio && (parsed.config.sampleRate !== this.audio.sampleRate || parsed.config.channels !== this.audio.channels)) {
+        this.audio = parsed.config
+      }
+      if (firstPts === null && p.pts !== undefined) {
+        // Frames carried over from the previous PES started one frame-run earlier; keep the first PES time.
+        firstPts = this.unwrap(p.pts)
+      }
+      frames.push(...parsed.frames)
+      carry = parsed.rest
+    }
+    if (!frames.length || !this.audio || firstPts === null) return null
+    const rate = this.audio.sampleRate
+    let base = Math.round((firstPts * rate) / 90000)
+    if (this.nextAudioDts !== null && Math.abs(base - this.nextAudioDts) < FRAME * 2) base = this.nextAudioDts
+    this.nextAudioDts = base + frames.length * FRAME
+    const samples = frames.map((f) => ({ size: f.length, duration: FRAME, cts: 0, key: true }))
+    return { base, samples, payload: concatBytes(frames) }
+  }
+}
+
+export function createTsTransmuxer(): SegmentTransmuxer {
+  return new TsTransmuxer()
+}
diff --git a/src/index.ts b/src/index.ts
index e037bf9..d83c381 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -174,6 +174,44 @@ export type {
 export { UidImage } from './components/Image/index.js'
 export type { UidImageProps, UidImageFit } from './components/Image/index.js'
 
+export { UidVideo } from './components/Video/index.js'
+export type { UidVideoProps, UidHlsModule } from './components/Video/index.js'
+
+export { UidAudio } from './components/Audio/index.js'
+export type { UidAudioProps, UidAudioTrack } from './components/Audio/index.js'
+
+export {
+  useMediaController,
+  formatTime,
+  parseVtt,
+  cueText,
+  cueAt,
+  parseThumbnail,
+  isHlsSource,
+  orderSources,
+  PLAYBACK_RATES,
+  computePeaks,
+  resamplePeaks,
+  normalizePeaks,
+  peaksToPath,
+  getWaveform,
+  clearWaveformCache,
+} from './components/Media/index.js'
+export type {
+  UseMediaControllerOptions,
+  UidMediaController,
+  UidMediaState,
+  UidMediaErrorInfo,
+  UidMediaErrorKind,
+  UidMediaSource,
+  UidMediaTrack,
+  UidMediaCue,
+  UidMediaRange,
+  UidMediaThumbnail,
+  ComputePeaksOptions,
+  WaveformOptions,
+} from './components/Media/index.js'
+
 export { UidRating } from './components/Rating/index.js'
 export type { UidRatingProps, RatingTone } from './components/Rating/index.js'
 
@@ -300,7 +338,7 @@ export { UidLocaleProvider } from './components/LocaleProvider/index.js'
 export type { UidLocaleProviderProps } from './components/LocaleProvider/index.js'
 
 export { ru, en } from './locales/index.js'
-export type { UidLocale, UidPartialLocale } from './locales/index.js'
+export type { UidLocale, UidPartialLocale, UidMediaLocale } from './locales/index.js'
 
 export { useTheme } from './composables/useTheme.js'
 export type { Theme } from './composables/useTheme.js'
diff --git a/src/locales/en.ts b/src/locales/en.ts
index c1cabc2..9d5ef43 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -129,6 +129,49 @@ export const en: UidLocale = {
     error: 'Image failed to load',
   },
 
+  media: {
+    play: 'Play',
+    pause: 'Pause',
+    replay: 'Replay',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    volume: 'Volume',
+    seek: 'Seek',
+    timeOf: (current, total) => `${current} of ${total}`,
+    speed: 'Speed',
+    normalSpeed: 'Normal',
+    quality: 'Quality',
+    auto: 'Auto',
+    captions: 'Subtitles',
+    captionsOff: 'Off',
+    settings: 'Settings',
+    fullscreen: 'Full screen',
+    exitFullscreen: 'Exit full screen',
+    pip: 'Picture in picture',
+    exitPip: 'Exit picture in picture',
+    live: 'Live',
+    goLive: 'Go to live',
+    next: 'Next track',
+    prev: 'Previous track',
+    playlist: 'Playlist',
+    forward: (s) => `Forward ${s} seconds`,
+    backward: (s) => `Back ${s} seconds`,
+    chapter: 'Chapter',
+    loading: 'Loading…',
+    retry: 'Try again',
+    errors: {
+      aborted: 'Playback was aborted.',
+      network: 'The media could not be loaded: network error.',
+      decode: 'The media file is damaged or uses an unsupported encoding.',
+      unsupported: 'This format is not supported by your browser.',
+      mse: 'This browser cannot play streaming video (HLS).',
+      manifest: 'The stream playlist could not be read.',
+      encrypted: 'Encrypted streams of this kind are not supported.',
+      codec: 'The stream uses a codec this browser cannot play.',
+      unknown: 'The media could not be played.',
+    },
+  },
+
   breadcrumb: {
     showHidden: 'Show hidden breadcrumbs',
     label: 'Breadcrumb',
diff --git a/src/locales/index.ts b/src/locales/index.ts
index f2eda0d..7aae091 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -1,3 +1,3 @@
-export type { UidLocale, UidPartialLocale } from './types.js'
+export type { UidLocale, UidPartialLocale, UidMediaLocale } from './types.js'
 export { ru } from './ru.js'
 export { en } from './en.js'
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
index 695c852..e54501b 100644
--- a/src/locales/ru.ts
+++ b/src/locales/ru.ts
@@ -129,6 +129,49 @@ export const ru: UidLocale = {
     error: 'Не удалось загрузить изображение',
   },
 
+  media: {
+    play: 'Воспроизвести',
+    pause: 'Пауза',
+    replay: 'Воспроизвести снова',
+    mute: 'Выключить звук',
+    unmute: 'Включить звук',
+    volume: 'Громкость',
+    seek: 'Перемотка',
+    timeOf: (current, total) => `${current} из ${total}`,
+    speed: 'Скорость',
+    normalSpeed: 'Обычная',
+    quality: 'Качество',
+    auto: 'Авто',
+    captions: 'Субтитры',
+    captionsOff: 'Выкл.',
+    settings: 'Настройки',
+    fullscreen: 'Во весь экран',
+    exitFullscreen: 'Выйти из полноэкранного режима',
+    pip: 'Картинка в картинке',
+    exitPip: 'Выйти из режима «картинка в картинке»',
+    live: 'Эфир',
+    goLive: 'Перейти к эфиру',
+    next: 'Следующий трек',
+    prev: 'Предыдущий трек',
+    playlist: 'Плейлист',
+    forward: (s) => `Вперёд на ${s} с`,
+    backward: (s) => `Назад на ${s} с`,
+    chapter: 'Глава',
+    loading: 'Загрузка…',
+    retry: 'Повторить',
+    errors: {
+      aborted: 'Воспроизведение прервано.',
+      network: 'Не удалось загрузить медиафайл: ошибка сети.',
+      decode: 'Файл повреждён или закодирован неподдерживаемым способом.',
+      unsupported: 'Этот формат не поддерживается браузером.',
+      mse: 'Браузер не умеет воспроизводить потоковое видео (HLS).',
+      manifest: 'Не удалось прочитать плейлист потока.',
+      encrypted: 'Такие зашифрованные потоки не поддерживаются.',
+      codec: 'Поток закодирован кодеком, который браузер не воспроизводит.',
+      unknown: 'Не удалось воспроизвести медиафайл.',
+    },
+  },
+
   breadcrumb: {
     showHidden: 'Показать скрытые разделы',
     label: 'Навигация',
diff --git a/src/locales/types.ts b/src/locales/types.ts
index 00f8f8b..662c6a3 100644
--- a/src/locales/types.ts
+++ b/src/locales/types.ts
@@ -126,6 +126,9 @@ export interface UidLocale {
     error: string
   }
 
+  /** Video and audio players (UidVideo, UidAudio). */
+  media?: UidMediaLocale
+
   breadcrumb?: {
     /** Accessible name of the "…" button that lists the collapsed crumbs. */
     showHidden: string
@@ -269,3 +272,47 @@ export interface UidLocale {
 export type UidPartialLocale = {
   [K in keyof UidLocale]?: Partial<UidLocale[K]>
 }
+
+export interface UidMediaLocale {
+  play: string
+  pause: string
+  replay: string
+  mute: string
+  unmute: string
+  volume: string
+  seek: string
+  /** Value text of the scrub bar: "1:05 of 3:20". */
+  timeOf: (current: string, total: string) => string
+  speed: string
+  normalSpeed: string
+  quality: string
+  auto: string
+  captions: string
+  captionsOff: string
+  settings: string
+  fullscreen: string
+  exitFullscreen: string
+  pip: string
+  exitPip: string
+  live: string
+  goLive: string
+  next: string
+  prev: string
+  playlist: string
+  forward: (s: number) => string
+  backward: (s: number) => string
+  chapter: string
+  loading: string
+  retry: string
+  errors: {
+    aborted: string
+    network: string
+    decode: string
+    unsupported: string
+    mse: string
+    manifest: string
+    encrypted: string
+    codec: string
+    unknown: string
+  }
+}
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 9c3bff1..269ae64 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -4,5 +4,5 @@
     "rootDir": "src"
   },
   "include": ["src/**/*", "env.d.ts"],
-  "exclude": ["node_modules", "dist", "src/**/*.stories.ts", "src/**/*.spec.ts"]
+  "exclude": ["node_modules", "dist", "src/**/*.stories.ts", "src/**/*.spec.ts", "src/**/__testing__/**"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 2479fdc..caa4bc9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,6 +26,7 @@ export default defineConfig({
       entry: {
         index: resolve(__dirname, 'src/index.ts'),
         'icons/index': resolve(__dirname, 'src/icons/index.ts'),
+        'hls/index': resolve(__dirname, 'src/hls/index.ts'),
       },
       formats: ['es', 'cjs'],
       fileName: (format, entryAlias) =>

From a308eaae64ec619ba4a9caa465598ed1ea94dbd4 Mon Sep 17 00:00:00 2001
From: Denis Skripchenko <denskrp90@gmail.com>
Date: Mon, 26 Oct 2026 00:16:17 +0300
Subject: [PATCH 2/2] feat(hls): alternate audio renditions, packed audio, HLS
 in UidAudio; player polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- The HLS engine runs one stream per SourceBuffer: video (or muxed) and a
  separate audio rendition (EXT-X-MEDIA TYPE=AUDIO with a URI), sharing one
  timestamp offset per discontinuity so they stay in sync across seeking and
  quality switches. Rendition choice: audioLanguage, DEFAULT, AUTOSELECT in
  the browser language. setAudioTrack(), stats(); Safari's native
  audioTracks are exposed too.
- Packed audio segments (ID3 timestamp + ADTS) go through the transmuxer.
- UidVideo: audio-track group in the settings menu; compact speed chips in
  the small-player sheet. Scrub preview hides while a menu is open or the
  controls are hidden.
- UidAudio: HLS sources (audio-only master or media playlist); playlist
  durations prefetched from metadata ("—" until known); shimmering
  placeholder while a waveform is pending; narrow layout truncates the
  title/artist and puts the time under the bar.
- Fixtures (video-only renditions + en/ru audio as fMP4, TS and packed AAC,
  audio-only HLS) and browser checks for all of it, incl. tone detection of
  the playing rendition in Chromium and a header geometry check.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .changeset/media-players.md               |   2 +-
 docs/de/audio.md                          |  12 +-
 docs/de/video.md                          |  13 +-
 docs/en/audio.md                          |  12 +-
 docs/en/video.md                          |  13 +-
 docs/ru/audio.md                          |  12 +-
 docs/ru/video.md                          |  13 +-
 docs/zh/audio.md                          |  12 +-
 docs/zh/video.md                          |  13 +-
 scripts/media-check/app/main.ts           |  22 +-
 scripts/media-check/check.mjs             | 167 +++-
 scripts/media-check/fixtures.sh           |  29 +
 scripts/media-check/packed-audio.mjs      |  65 ++
 scripts/media-check/screens.mjs           |   9 +
 src/components/Audio/UidAudio.css         |  41 +-
 src/components/Audio/UidAudio.spec.ts     |  22 +
 src/components/Audio/UidAudio.vue         |  99 ++-
 src/components/Media/UidMedia.css         |  49 +-
 src/components/Media/UidMediaMenu.vue     |   6 +-
 src/components/Media/UidMediaScrubber.vue |  20 +-
 src/components/Video/UidVideo.spec.ts     |  19 +
 src/components/Video/UidVideo.vue         |  31 +-
 src/hls/audio.spec.ts                     |  79 ++
 src/hls/engine.ts                         | 951 ++++++++++++++--------
 src/hls/index.ts                          |   5 +-
 src/hls/playlist.ts                       |   4 +
 src/hls/ts/id3.ts                         |  54 ++
 src/hls/ts/transmuxer.ts                  |  25 +-
 src/locales/en.ts                         |   1 +
 src/locales/ru.ts                         |   1 +
 src/locales/types.ts                      |   1 +
 31 files changed, 1385 insertions(+), 417 deletions(-)
 create mode 100644 scripts/media-check/packed-audio.mjs
 create mode 100644 src/hls/audio.spec.ts
 create mode 100644 src/hls/ts/id3.ts

diff --git a/.changeset/media-players.md b/.changeset/media-players.md
index 7637fc4..0447dfd 100644
--- a/.changeset/media-players.md
+++ b/.changeset/media-players.md
@@ -2,4 +2,4 @@
 "@dskripchenko/ui": minor
 ---
 
-Media players without dependencies. `UidVideo` — native `<video>` with the kit's controls: scrub bar with buffered ranges, chapters and sprite thumbnails, volume, speed and quality menus, WebVTT subtitles drawn by the player, full screen (iOS fallback), picture-in-picture, resume position, hotkeys, double-tap seek, auto-hiding controls. `UidAudio` — compact row, `mini` variant for tables, waveform decoded in the browser (chunked, cached, size-capped) or from `peaks`, playlist with auto-advance and Media Session. `useMediaController` is the shared core (one active player per page, normalised state, readable localised errors; `media` locale bag in `en`/`ru`). New lazily loaded entry `@dskripchenko/ui/hls`: native HLS where available, otherwise MSE with fMP4/CMAF and MPEG-TS (built-in H.264/AAC → fMP4 transmuxer), AES-128, live playlists, discontinuities, ABR with manual quality selection, retries.
+Media players without dependencies. `UidVideo` — native `<video>` with the kit's controls: scrub bar with buffered ranges, chapters and sprite thumbnails, volume, speed and quality menus, WebVTT subtitles drawn by the player, full screen (iOS fallback), picture-in-picture, resume position, hotkeys, double-tap seek, auto-hiding controls. `UidAudio` — compact row, `mini` variant for tables, waveform decoded in the browser (chunked, cached, size-capped) or from `peaks`, playlist with auto-advance and Media Session. `useMediaController` is the shared core (one active player per page, normalised state, readable localised errors; `media` locale bag in `en`/`ru`). New lazily loaded entry `@dskripchenko/ui/hls`: native HLS where available, otherwise MSE with fMP4/CMAF and MPEG-TS (built-in H.264/AAC → fMP4 transmuxer), AES-128, live playlists, discontinuities, alternate audio renditions in their own SourceBuffer (fMP4, MPEG-TS or packed AAC; audio-track menu in UidVideo), ABR with manual quality selection, retries. UidAudio plays HLS sources too.
diff --git a/docs/de/audio.md b/docs/de/audio.md
index 5b80cac..cc527ab 100644
--- a/docs/de/audio.md
+++ b/docs/de/audio.md
@@ -32,17 +32,17 @@
 | `showVolume`, `showRate` | `boolean` | `true` | |
 | `showPlaylist` | `boolean` | `true` | Titelliste unter dem Player |
 
-Events: `play`, `pause`, `ended`, `error`, `trackchange` (Index), `update:index`. Bereitgestellt: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
+Events: `play`, `pause`, `ended`, `error`, `trackchange` (Index), `update:index`. Die Props `hlsOptions` und `hlsLoader` funktionieren wie bei UidVideo. Bereitgestellt: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
 
 ## Layout
 
-- **Standard** — eine Zeile: Wiedergabe-Button, Titel und Zeitleiste, Zeit, Lautstärke, Geschwindigkeit. In einem schmalen Container (unter 480 px) wandert die Zeitleiste in eine eigene Zeile in voller Breite, Titel und Interpret stehen untereinander, der Lautstärkeregler bleibt den Hardwaretasten überlassen. Ab 560 px ist der Lautstärkeregler immer sichtbar.
+- **Standard** — eine Zeile: Wiedergabe-Button, Titel und Zeitleiste, Zeit, Lautstärke, Geschwindigkeit. In einem schmalen Container (unter 480 px) stehen Titel und Interpret untereinander und werden mit Auslassungspunkten gekürzt, die Zeitleiste wandert in eine eigene Zeile in voller Breite, die Zeit darunter, der Lautstärkeregler bleibt den Hardwaretasten überlassen. Ab 560 px ist der Lautstärkeregler immer sichtbar.
 - **Mini** — standardmäßig `240px` breit (`--uid-audio-mini-width`), passt in eine Tabellenzelle: Wiedergabe, Leiste oder kleine Wellenform, Zeit (vor der Wiedergabe die Dauer, währenddessen die Position). Der Start einer Zeile pausiert die anderen.
-- **Playlist** — Zurück / Weiter neben dem Wiedergabe-Button und eine nummerierte Liste mit markiertem laufendem Titel. „Zurück“ spult einen Titel, der länger als 3 Sekunden läuft, zuerst an den Anfang. Sperrbildschirm und Hardware-Medientasten funktionieren über die Media Session API.
+- **Playlist** — Zurück / Weiter neben dem Wiedergabe-Button und eine nummerierte Liste mit markiertem laufendem Titel. „Zurück“ spult einen Titel, der länger als 3 Sekunden läuft, zuerst an den Anfang. Sperrbildschirm und Hardware-Medientasten funktionieren über die Media Session API. Die Dauern aller Titel werden nacheinander aus ihren Metadaten gelesen; bis dahin zeigt die Liste „—“.
 
 ## Wellenform
 
-Mit `waveform` wird die Datei geladen und mit Web Audio dekodiert (`decodeAudioData` mit niedriger Abtastrate, um Speicher zu sparen), und die Spitzen werden in Portionen berechnet, zwischen denen der Browser zum Zug kommt (`requestIdleCallback`, sonst `setTimeout`). Ergebnisse werden je Adresse für die Lebensdauer der Seite zwischengespeichert; Dateien werden einzeln dekodiert und erst, wenn der Player nahe am Viewport ist, sodass eine Tabelle mit hundert Aufnahmen reaktionsschnell bleibt. Dateien über `waveformMaxBytes` oder länger als `waveformMaxDuration` behalten die einfache Leiste. Das Audio muss für `fetch` lesbar sein — gleicher Origin oder CORS.
+Mit `waveform` wird die Datei geladen und mit Web Audio dekodiert (`decodeAudioData` mit niedriger Abtastrate, um Speicher zu sparen), und die Spitzen werden in Portionen berechnet, zwischen denen der Browser zum Zug kommt (`requestIdleCallback`, sonst `setTimeout`). Ergebnisse werden je Adresse für die Lebensdauer der Seite zwischengespeichert; Dateien werden einzeln dekodiert und erst, wenn der Player nahe am Viewport ist, sodass eine Tabelle mit hundert Aufnahmen reaktionsschnell bleibt. Dateien über `waveformMaxBytes` oder länger als `waveformMaxDuration` behalten die einfache Leiste. Das Audio muss für `fetch` lesbar sein — gleicher Origin oder CORS. Bis die Spitzen fertig sind, zeigt die Leiste einen schimmernden Platzhalter statt einer einfachen Linie, die endgültig wirkt.
 
 Für lange Aufnahmen die Spitzen auf dem Server berechnen und in `peaks` übergeben (beliebige Länge; der Player resampelt auf seine Breite):
 
@@ -55,6 +55,10 @@ const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
 
 Helfer: `getWaveform(src, options)`, `computePeaks(channels, count)`, `resamplePeaks(peaks, n)`, `peaksToPath(peaks)`.
 
+## HLS
+
+Eine `.m3u8`-Quelle (oder `type: 'application/x-mpegURL'`) spielt über denselben bei Bedarf geladenen Adapter wie in [UidVideo](./video.md#hls): reine Audio-Master- oder Media-Playlists, Segmente in fMP4, MPEG-TS oder Packed AAC. Für Streams wird keine Wellenform gezeichnet.
+
 ## Formate
 
 | Format | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
diff --git a/docs/de/video.md b/docs/de/video.md
index e681e43..6d0f1ee 100644
--- a/docs/de/video.md
+++ b/docs/de/video.md
@@ -37,13 +37,13 @@
 | `hlsOptions` | `HlsOptions` | — | Werden an den HLS-Adapter übergeben (siehe unten) |
 | `hlsLoader` | `() => Promise<module>` | dynamischer Import | Woher der HLS-Adapter kommt |
 
-Events: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (Label). Die Komponente stellt `play()`, `pause()`, `toggle()`, `seek(seconds)`, den reaktiven `state` und das Element `media` bereit.
+Events: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (Label), `audiotrackchange` (Label). Die Komponente stellt `play()`, `pause()`, `toggle()`, `seek(seconds)`, den reaktiven `state` und das Element `media` bereit.
 
 ## Bedienelemente
 
 - **Zeitleiste** — gespielter Teil in der Akzentfarbe, gepufferte Bereiche, Lücken zwischen Kapiteln; beim Überfahren erscheinen Zeit, Kapiteltitel und Vorschaubild. Ziehen spult live. Als `slider` reagiert sie auf Pfeiltasten (±5 s), Page Up/Down (±10 %), Home/End.
 - **Lautstärke** — der Button schaltet stumm, der Regler klappt bei Hover oder Fokus auf (auf Touchscreens übernehmen das die Hardwaretasten).
-- **Einstellungen** — Geschwindigkeit und, falls es mehrere gibt, Qualität (`Auto` folgt bei HLS der Bandbreite). Die Menüs leben im Player und funktionieren daher im Vollbild; in einem kleinen Player werden sie zu einem Sheet über dem Video.
+- **Einstellungen** — Geschwindigkeit und, falls es mehrere gibt, Qualität (`Auto` folgt bei HLS der Bandbreite) und bei einem HLS-Stream mit mehreren Audiospuren die Audiospur. Die Menüs leben im Player und funktionieren daher im Vollbild; in einem kleinen Player werden sie zu einem Sheet über dem Video.
 - **Untertitel** — das Kit zeichnet die Cues selbst (oberhalb der Bedienelemente, auf jedem Video lesbar); im nativen Vollbild von iOS zeigt sie der Systemplayer.
 - **Vollbild** — der ganze Player; auf dem iPhone, wo nur das `<video>` selbst ins Vollbild kann, öffnet sich der native Player.
 - **Bild-in-Bild** — Standard-API oder der Präsentationsmodus von Safari.
@@ -81,15 +81,15 @@ Was die Browser nativ abspielen (das Kit fügt dafür nichts hinzu):
 | MP4/WebM · AV1 | ✓ | ✓ | mit Hardware-Dekodierung | mit Hardware-Dekodierung |
 | HLS (`.m3u8`) | über den Adapter des Kits; neuere Versionen auch nativ | über den Adapter des Kits | nativ | nativ |
 
-In echten Browsern geprüft (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 und MPEG-TS (über den Adapter und nativ), AES-128, Live-Playlists, Diskontinuitäten. Firefox stand in der Testumgebung nicht zur Verfügung.
+In echten Browsern geprüft (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 und MPEG-TS (über den Adapter und nativ), AES-128, Live-Playlists, Diskontinuitäten, alternative Audiospuren (fMP4, MPEG-TS, Packed AAC) mit Umschalten. Firefox stand in der Testumgebung nicht zur Verfügung.
 
 ## HLS
 
 Eine Quelle mit `type: 'application/x-mpegURL'` (oder einer `.m3u8`-Adresse) wird über `@dskripchenko/ui/hls` abgespielt. Der Adapter ist ein separater Einstiegspunkt, der per dynamischem Import erst geladen wird, wenn eine solche Quelle auftaucht — das Haupt-Bundle wächst nicht.
 
 - Wo der Browser HLS selbst abspielt (Safari, iOS, neueres Chrome), geht die Adresse direkt an `<video>` (`preferNative: true`; `false` setzen, um immer den Adapter zu nutzen und das Qualitätsmenü zu erhalten).
-- Sonst speist der Adapter Media Source Extensions: Master- und Media-Playlists, **fMP4/CMAF**-Segmente mit `EXT-X-MAP`, **MPEG-TS**-Segmente (H.264 + AAC), die im Browser in fMP4 umgewandelt werden, Byte-Bereiche, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), Live-Playlists mit Neuladen und gleitendem Fenster, Vorauspufferung und Verdrängung, Spulen, ABR mit manueller Qualitätswahl, Wiederholungen mit Backoff.
-- Nicht unterstützt: SAMPLE-AES / DRM (Fehler `encrypted`), HEVC oder MP3 in MPEG-TS (Fehler `codec`), alternative Audiospuren (`EXT-X-MEDIA TYPE=AUDIO` mit URI) — es spielt nur der in die Variante gemuxte Ton, Low-Latency-HLS-Parts.
+- Sonst speist der Adapter Media Source Extensions: Master- und Media-Playlists, **fMP4/CMAF**-Segmente mit `EXT-X-MAP`, **MPEG-TS**-Segmente (H.264 + AAC), die im Browser in fMP4 umgewandelt werden, Byte-Bereiche, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), **alternative Audiospuren** (`EXT-X-MEDIA TYPE=AUDIO` mit URI) in einem eigenen SourceBuffer, beim Spulen und Qualitätswechsel synchron zum Video; gewählt nach `audioLanguage`, dann `DEFAULT`, dann `AUTOSELECT` in der Browsersprache, umschaltbar im Einstellungsmenü; Audiospuren als fMP4, MPEG-TS oder **Packed AAC** mit ID3-Zeitstempel; Live-Playlists mit Neuladen und gleitendem Fenster, Vorauspufferung und Verdrängung, Spulen, ABR mit manueller Qualitätswahl, Wiederholungen mit Backoff.
+- Nicht unterstützt: SAMPLE-AES / DRM (Fehler `encrypted`), HEVC oder MP3 in MPEG-TS (Fehler `codec`), Low-Latency-HLS-Parts.
 
 ```ts
 import { UidVideo } from '@dskripchenko/ui'
@@ -102,6 +102,7 @@ import { UidVideo } from '@dskripchenko/ui'
 |---|---|---|
 | `preferNative` | `true` | Das eigene HLS des Browsers nutzen, falls vorhanden |
 | `startLevel` | `-1` | Startvariante; `-1` — ABR entscheidet |
+| `audioLanguage` | — | Bevorzugte Sprache der Audiospur (`ru`, `en-US`…) |
 | `maxBufferAhead` | `30` | Sekunden, die vorausgepuffert werden |
 | `maxBufferBehind` | `30` | Sekunden, die hinter der Abspielposition behalten werden |
 | `retries` | `3` | Wiederholungen einer fehlgeschlagenen Anfrage (500 ms, 1 s, 2 s…) |
@@ -119,6 +120,8 @@ const session = attachHls(videoElement, url, {
   onError: (e) => console.warn(e.code, e.message),
 })
 session.setLevel(1)   // -1 — zurück zur Automatik
+session.setAudioTrack(1) // andere Audiospur
+session.stats()        // Puffer je SourceBuffer, Level, Bandbreite
 session.destroy()
 ```
 
diff --git a/docs/en/audio.md b/docs/en/audio.md
index 8497594..c2553b1 100644
--- a/docs/en/audio.md
+++ b/docs/en/audio.md
@@ -32,17 +32,17 @@
 | `showVolume`, `showRate` | `boolean` | `true` | |
 | `showPlaylist` | `boolean` | `true` | Track list under the player |
 
-Events: `play`, `pause`, `ended`, `error`, `trackchange` (index), `update:index`. Exposed: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
+Events: `play`, `pause`, `ended`, `error`, `trackchange` (index), `update:index`. Props `hlsOptions` and `hlsLoader` work as in UidVideo. Exposed: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
 
 ## Layout
 
-- **Default** — a row: play button, title and scrub bar, time, volume, speed. In a narrow container (under 480 px) the scrub bar moves to its own full-width line, the title and artist stack, the volume slider is left to the hardware buttons. From 560 px the volume slider is always visible.
+- **Default** — a row: play button, title and scrub bar, time, volume, speed. In a narrow container (under 480 px) the title and artist stack and are cut with an ellipsis, the scrub bar moves to its own full-width line with the time under it, the volume slider is left to the hardware buttons. From 560 px the volume slider is always visible.
 - **Mini** — `240px` wide by default (`--uid-audio-mini-width`), fits a table cell: play, bar or small waveform, time (the duration before playback, the position during it). Starting one row pauses the others.
-- **Playlist** — previous / next around the play button and a numbered list with the playing track marked. "Previous" first rewinds a track that has been playing for more than 3 seconds. The lock screen and hardware media keys work through the Media Session API.
+- **Playlist** — previous / next around the play button and a numbered list with the playing track marked. "Previous" first rewinds a track that has been playing for more than 3 seconds. The lock screen and hardware media keys work through the Media Session API. Durations of all tracks are read one by one from their metadata; until then the list shows “—”.
 
 ## Waveform
 
-With `waveform` the file is fetched and decoded with Web Audio (`decodeAudioData` at a low sample rate to keep memory small), and peaks are computed in chunks that yield to the browser between them (`requestIdleCallback`, otherwise `setTimeout`). Results are cached per address for the page's lifetime; files are decoded one at a time and only once the player is near the viewport, so a table of a hundred recordings stays responsive. Files over `waveformMaxBytes` or longer than `waveformMaxDuration` keep the plain bar. The audio has to be readable by `fetch` — same origin or CORS.
+With `waveform` the file is fetched and decoded with Web Audio (`decodeAudioData` at a low sample rate to keep memory small), and peaks are computed in chunks that yield to the browser between them (`requestIdleCallback`, otherwise `setTimeout`). Results are cached per address for the page's lifetime; files are decoded one at a time and only once the player is near the viewport, so a table of a hundred recordings stays responsive. Files over `waveformMaxBytes` or longer than `waveformMaxDuration` keep the plain bar. The audio has to be readable by `fetch` — same origin or CORS. Until the peaks are ready the bar shows a shimmering placeholder rather than a plain line that looks final.
 
 For long recordings compute the peaks on the server and pass them in `peaks` (any length; the player resamples to its width):
 
@@ -55,6 +55,10 @@ const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
 
 Helpers: `getWaveform(src, options)`, `computePeaks(channels, count)`, `resamplePeaks(peaks, n)`, `peaksToPath(peaks)`.
 
+## HLS
+
+An `.m3u8` source (or `type: 'application/x-mpegURL'`) plays through the same lazily loaded adapter as in [UidVideo](./video.md#hls): an audio-only master or media playlist, fMP4, MPEG-TS or packed AAC segments. The waveform is not drawn for streams.
+
 ## Formats
 
 | Format | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
diff --git a/docs/en/video.md b/docs/en/video.md
index b048fa2..779f35f 100644
--- a/docs/en/video.md
+++ b/docs/en/video.md
@@ -37,13 +37,13 @@
 | `hlsOptions` | `HlsOptions` | — | Passed to the HLS adapter (see below) |
 | `hlsLoader` | `() => Promise<module>` | dynamic import | Where the HLS adapter comes from |
 
-Events: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (label). The component exposes `play()`, `pause()`, `toggle()`, `seek(seconds)`, the reactive `state` and the `media` element.
+Events: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (label), `audiotrackchange` (label). The component exposes `play()`, `pause()`, `toggle()`, `seek(seconds)`, the reactive `state` and the `media` element.
 
 ## Controls
 
 - **Scrub bar** — played part in the accent colour, buffered ranges, gaps between chapters; hovering shows the time, the chapter title and the thumbnail. Dragging seeks live. As a `slider` it takes arrows (±5 s), Page Up/Down (±10 %), Home/End.
 - **Volume** — the button mutes, the slider unfolds on hover or focus (on touch screens the hardware buttons do the job).
-- **Settings** — speed and, when there are several, quality (`Auto` follows the bandwidth for HLS). The menus live inside the player, so they work in full screen; in a small player they become a sheet over the video.
+- **Settings** — speed and, when there are several, quality (`Auto` follows the bandwidth for HLS) and, for an HLS stream with several audio renditions, the audio track. The menus live inside the player, so they work in full screen; in a small player they become a sheet over the video.
 - **Subtitles** — the kit draws the cues itself (position above the controls, readable on any video); iOS native full screen shows them through the system player.
 - **Full screen** — the whole player; on iPhone, where only the `<video>` itself can go full screen, the native player opens.
 - **Picture-in-picture** — standard API or Safari's presentation mode.
@@ -81,15 +81,15 @@ What the browsers play natively (the kit adds nothing for these):
 | MP4/WebM · AV1 | ✓ | ✓ | with hardware decoding | with hardware decoding |
 | HLS (`.m3u8`) | through the kit's adapter; recent versions also natively | through the kit's adapter | natively | natively |
 
-Checked in real browsers (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 and MPEG-TS (through the adapter and natively), AES-128, live playlists, discontinuities. Firefox was not available in the test environment.
+Checked in real browsers (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 and MPEG-TS (through the adapter and natively), AES-128, live playlists, discontinuities, alternate audio renditions (fMP4, MPEG-TS, packed AAC) with switching. Firefox was not available in the test environment.
 
 ## HLS
 
 A source with `type: 'application/x-mpegURL'` (or a `.m3u8` address) is played through `@dskripchenko/ui/hls`. The adapter is a separate entry loaded with a dynamic import only when such a source appears — the main bundle does not grow.
 
 - Where the browser plays HLS itself (Safari, iOS, recent Chrome) the address goes straight to `<video>` (`preferNative: true`; set `false` to always use the adapter and get the quality menu).
-- Otherwise the adapter feeds Media Source Extensions: master and media playlists, **fMP4/CMAF** segments with `EXT-X-MAP`, **MPEG-TS** segments (H.264 + AAC) converted to fMP4 in the browser, byte ranges, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), live playlists with reloads and a sliding window, buffer-ahead and eviction, seeking, ABR with manual quality selection, retries with backoff.
-- Not supported: SAMPLE-AES / DRM (`encrypted` error), HEVC or MP3 inside MPEG-TS (`codec` error), alternative audio renditions (`EXT-X-MEDIA TYPE=AUDIO` with a URI) — only the audio muxed into the variant plays, low-latency HLS parts.
+- Otherwise the adapter feeds Media Source Extensions: master and media playlists, **fMP4/CMAF** segments with `EXT-X-MAP`, **MPEG-TS** segments (H.264 + AAC) converted to fMP4 in the browser, byte ranges, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), **alternate audio renditions** (`EXT-X-MEDIA TYPE=AUDIO` with a URI) in their own SourceBuffer, kept in sync with the video across seeking and quality switches, chosen by `audioLanguage`, then `DEFAULT`, then `AUTOSELECT` in the browser language, and switchable from the settings menu; audio renditions as fMP4, MPEG-TS or **packed AAC** with an ID3 timestamp; live playlists with reloads and a sliding window, buffer-ahead and eviction, seeking, ABR with manual quality selection, retries with backoff.
+- Not supported: SAMPLE-AES / DRM (`encrypted` error), HEVC or MP3 inside MPEG-TS (`codec` error), low-latency HLS parts.
 
 ```ts
 import { UidVideo } from '@dskripchenko/ui'
@@ -102,6 +102,7 @@ import { UidVideo } from '@dskripchenko/ui'
 |---|---|---|
 | `preferNative` | `true` | Use the browser's own HLS when present |
 | `startLevel` | `-1` | Starting variant; `-1` — ABR decides |
+| `audioLanguage` | — | Preferred audio rendition language (`ru`, `en-US`…) |
 | `maxBufferAhead` | `30` | Seconds to buffer ahead |
 | `maxBufferBehind` | `30` | Seconds kept behind the playhead |
 | `retries` | `3` | Repeats of a failed request (500 ms, 1 s, 2 s…) |
@@ -119,6 +120,8 @@ const session = attachHls(videoElement, url, {
   onError: (e) => console.warn(e.code, e.message),
 })
 session.setLevel(1)   // -1 — back to automatic
+session.setAudioTrack(1) // another audio rendition
+session.stats()        // buffered ranges per SourceBuffer, level, bandwidth
 session.destroy()
 ```
 
diff --git a/docs/ru/audio.md b/docs/ru/audio.md
index e9d8b61..1aa3278 100644
--- a/docs/ru/audio.md
+++ b/docs/ru/audio.md
@@ -32,17 +32,17 @@
 | `showVolume`, `showRate` | `boolean` | `true` | |
 | `showPlaylist` | `boolean` | `true` | Список треков под плеером |
 
-События: `play`, `pause`, `ended`, `error`, `trackchange` (индекс), `update:index`. Наружу отдаются: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
+События: `play`, `pause`, `ended`, `error`, `trackchange` (индекс), `update:index`. Пропсы `hlsOptions` и `hlsLoader` работают как в UidVideo. Наружу отдаются: `play()`, `pause()`, `toggle()`, `seek()`, `next()`, `prev()`, `state`, `media`.
 
 ## Раскладка
 
-- **Обычный** — строка: кнопка воспроизведения, название и полоса перемотки, время, громкость, скорость. В узком контейнере (меньше 480 px) полоса перемотки переносится на отдельную строку во всю ширину, название и исполнитель встают друг под другом, ползунок громкости уступает место аппаратным кнопкам. Начиная с 560 px ползунок громкости виден всегда.
+- **Обычный** — строка: кнопка воспроизведения, название и полоса перемотки, время, громкость, скорость. В узком контейнере (меньше 480 px) название и исполнитель встают друг под другом и обрезаются многоточием, полоса перемотки переносится на отдельную строку во всю ширину, время — под неё, ползунок громкости уступает место аппаратным кнопкам. Начиная с 560 px ползунок громкости виден всегда.
 - **Mini** — по умолчанию шириной `240px` (`--uid-audio-mini-width`), помещается в ячейку таблицы: воспроизведение, полоса или маленькая волна, время (до воспроизведения — длительность, во время — позиция). Запуск одной строки ставит на паузу остальные.
-- **Плейлист** — «предыдущий» / «следующий» по бокам от кнопки воспроизведения и нумерованный список с отмеченным играющим треком. «Предыдущий» сначала перематывает в начало трек, который играет дольше 3 секунд. Экран блокировки и аппаратные медиаклавиши работают через Media Session API.
+- **Плейлист** — «предыдущий» / «следующий» по бокам от кнопки воспроизведения и нумерованный список с отмеченным играющим треком. «Предыдущий» сначала перематывает в начало трек, который играет дольше 3 секунд. Экран блокировки и аппаратные медиаклавиши работают через Media Session API. Длительности всех треков читаются по очереди из их метаданных; до этого в списке стоит «—».
 
 ## Волновая форма
 
-С `waveform` файл загружается и декодируется через Web Audio (`decodeAudioData` с низкой частотой дискретизации, чтобы экономить память), а пики считаются порциями, между которыми управление отдаётся браузеру (`requestIdleCallback`, иначе `setTimeout`). Результаты кешируются по адресу на время жизни страницы; файлы декодируются по одному и только когда плеер близко к видимой области, так что таблица из сотни записей остаётся отзывчивой. Файлы больше `waveformMaxBytes` или длиннее `waveformMaxDuration` остаются с обычной полосой. Аудио должно быть доступно для `fetch` — тот же источник или CORS.
+С `waveform` файл загружается и декодируется через Web Audio (`decodeAudioData` с низкой частотой дискретизации, чтобы экономить память), а пики считаются порциями, между которыми управление отдаётся браузеру (`requestIdleCallback`, иначе `setTimeout`). Результаты кешируются по адресу на время жизни страницы; файлы декодируются по одному и только когда плеер близко к видимой области, так что таблица из сотни записей остаётся отзывчивой. Файлы больше `waveformMaxBytes` или длиннее `waveformMaxDuration` остаются с обычной полосой. Аудио должно быть доступно для `fetch` — тот же источник или CORS. Пока пики считаются, на месте полосы мерцает заглушка, а не обычная линия, которая выглядит окончательной.
 
 Для длинных записей считайте пики на сервере и передавайте их в `peaks` (любой длины; плеер пересэмплирует их под свою ширину):
 
@@ -55,6 +55,10 @@ const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
 
 Хелперы: `getWaveform(src, options)`, `computePeaks(channels, count)`, `resamplePeaks(peaks, n)`, `peaksToPath(peaks)`.
 
+## HLS
+
+Источник `.m3u8` (или `type: 'application/x-mpegURL'`) воспроизводится тем же лениво загружаемым адаптером, что и в [UidVideo](./video.md#hls): master- или media-плейлист только со звуком, сегменты fMP4, MPEG-TS или packed AAC. Волна для потоков не рисуется.
+
 ## Форматы
 
 | Формат | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
diff --git a/docs/ru/video.md b/docs/ru/video.md
index 4989c92..5a538a8 100644
--- a/docs/ru/video.md
+++ b/docs/ru/video.md
@@ -37,13 +37,13 @@
 | `hlsOptions` | `HlsOptions` | — | Передаются HLS-адаптеру (см. ниже) |
 | `hlsLoader` | `() => Promise<module>` | динамический импорт | Откуда берётся HLS-адаптер |
 
-События: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (метка). Компонент отдаёт наружу `play()`, `pause()`, `toggle()`, `seek(seconds)`, реактивный `state` и элемент `media`.
+События: `play`, `pause`, `ended`, `error` (`{ kind, detail? }`), `qualitychange` (метка), `audiotrackchange` (метка). Компонент отдаёт наружу `play()`, `pause()`, `toggle()`, `seek(seconds)`, реактивный `state` и элемент `media`.
 
 ## Элементы управления
 
 - **Полоса перемотки** — просмотренная часть акцентным цветом, буферизованные участки, промежутки между главами; при наведении показываются время, название главы и превью кадра. Перетаскивание перематывает сразу. Как `slider` она понимает стрелки (±5 с), Page Up/Down (±10 %), Home/End.
 - **Громкость** — кнопка выключает звук, ползунок раскрывается при наведении или фокусе (на сенсорных экранах это делают аппаратные кнопки).
-- **Настройки** — скорость и, если вариантов несколько, качество (`Авто` для HLS подстраивается под пропускную способность). Меню живут внутри плеера, поэтому работают в полноэкранном режиме; в маленьком плеере они становятся шторкой поверх видео.
+- **Настройки** — скорость и, если вариантов несколько, качество (`Авто` для HLS подстраивается под пропускную способность), а для HLS-потока с несколькими звуковыми дорожками — аудиодорожка. Меню живут внутри плеера, поэтому работают в полноэкранном режиме; в маленьком плеере они становятся шторкой поверх видео.
 - **Субтитры** — кит рисует реплики сам (над элементами управления, читаемо на любом видео); в нативном полноэкранном режиме iOS их показывает системный плеер.
 - **Полный экран** — на весь экран разворачивается весь плеер; на iPhone, где в полноэкранный режим может перейти только сам `<video>`, открывается нативный плеер.
 - **Картинка в картинке** — стандартный API или режим презентации Safari.
@@ -81,15 +81,15 @@
 | MP4/WebM · AV1 | ✓ | ✓ | с аппаратным декодированием | с аппаратным декодированием |
 | HLS (`.m3u8`) | через адаптер кита; свежие версии и нативно | через адаптер кита | нативно | нативно |
 
-Проверено в реальных браузерах (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 и MPEG-TS (через адаптер и нативно), AES-128, живые плейлисты, разрывы. Firefox в тестовом окружении был недоступен.
+Проверено в реальных браузерах (Playwright): Chromium 156, Chrome 156, WebKit 27 — MP4 H.264/AAC, WebM VP9/Opus, HLS fMP4 и MPEG-TS (через адаптер и нативно), AES-128, живые плейлисты, разрывы, альтернативные звуковые дорожки (fMP4, MPEG-TS, packed AAC) с переключением. Firefox в тестовом окружении был недоступен.
 
 ## HLS
 
 Источник с `type: 'application/x-mpegURL'` (или адресом `.m3u8`) воспроизводится через `@dskripchenko/ui/hls`. Адаптер — отдельная точка входа, которая загружается динамическим импортом только при появлении такого источника, — основной бандл не растёт.
 
 - Там, где браузер воспроизводит HLS сам (Safari, iOS, свежий Chrome), адрес отдаётся прямо в `<video>` (`preferNative: true`; `false` — всегда использовать адаптер и получить меню качества).
-- Иначе адаптер кормит Media Source Extensions: master- и media-плейлисты, сегменты **fMP4/CMAF** с `EXT-X-MAP`, сегменты **MPEG-TS** (H.264 + AAC), которые преобразуются в fMP4 в браузере, диапазоны байтов, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), живые плейлисты с перезагрузкой и скользящим окном, буферизация вперёд и вытеснение, перемотка, ABR с ручным выбором качества, повторы с нарастающей задержкой.
-- Не поддерживаются: SAMPLE-AES / DRM (ошибка `encrypted`), HEVC или MP3 внутри MPEG-TS (ошибка `codec`), альтернативные звуковые дорожки (`EXT-X-MEDIA TYPE=AUDIO` с URI) — играет только звук, смикшированный в вариант, части low-latency HLS.
+- Иначе адаптер кормит Media Source Extensions: master- и media-плейлисты, сегменты **fMP4/CMAF** с `EXT-X-MAP`, сегменты **MPEG-TS** (H.264 + AAC), которые преобразуются в fMP4 в браузере, диапазоны байтов, `EXT-X-DISCONTINUITY`, **AES-128** (WebCrypto), **альтернативные звуковые дорожки** (`EXT-X-MEDIA TYPE=AUDIO` с URI) в собственном SourceBuffer, синхронные с видео при перемотке и смене качества; дорожка выбирается по `audioLanguage`, затем `DEFAULT`, затем `AUTOSELECT` на языке браузера и переключается в меню настроек; звуковые дорожки в fMP4, MPEG-TS или **packed AAC** с меткой времени в ID3; живые плейлисты с перезагрузкой и скользящим окном, буферизация вперёд и вытеснение, перемотка, ABR с ручным выбором качества, повторы с нарастающей задержкой.
+- Не поддерживаются: SAMPLE-AES / DRM (ошибка `encrypted`), HEVC или MP3 внутри MPEG-TS (ошибка `codec`), части low-latency HLS.
 
 ```ts
 import { UidVideo } from '@dskripchenko/ui'
@@ -102,6 +102,7 @@ import { UidVideo } from '@dskripchenko/ui'
 |---|---|---|
 | `preferNative` | `true` | Использовать встроенный HLS браузера, если он есть |
 | `startLevel` | `-1` | Начальный вариант; `-1` — решает ABR |
+| `audioLanguage` | — | Предпочтительный язык звуковой дорожки (`ru`, `en-US`…) |
 | `maxBufferAhead` | `30` | Сколько секунд буферизовать вперёд |
 | `maxBufferBehind` | `30` | Сколько секунд хранить позади позиции воспроизведения |
 | `retries` | `3` | Повторы неудачного запроса (500 мс, 1 с, 2 с…) |
@@ -119,6 +120,8 @@ const session = attachHls(videoElement, url, {
   onError: (e) => console.warn(e.code, e.message),
 })
 session.setLevel(1)   // -1 — обратно в автоматический режим
+session.setAudioTrack(1) // другая звуковая дорожка
+session.stats()        // буферы по SourceBuffer, уровень, пропускная способность
 session.destroy()
 ```
 
diff --git a/docs/zh/audio.md b/docs/zh/audio.md
index 4da0170..e4e51ff 100644
--- a/docs/zh/audio.md
+++ b/docs/zh/audio.md
@@ -32,17 +32,17 @@
 | `showVolume`, `showRate` | `boolean` | `true` | |
 | `showPlaylist` | `boolean` | `true` | 播放器下方的曲目列表 |
 
-事件：`play`、`pause`、`ended`、`error`、`trackchange`（索引）、`update:index`。对外暴露：`play()`、`pause()`、`toggle()`、`seek()`、`next()`、`prev()`、`state`、`media`。
+事件：`play`、`pause`、`ended`、`error`、`trackchange`（索引）、`update:index`。属性 `hlsOptions` 和 `hlsLoader` 与 UidVideo 中相同。对外暴露：`play()`、`pause()`、`toggle()`、`seek()`、`next()`、`prev()`、`state`、`media`。
 
 ## 布局
 
-- **默认** —— 一行：播放按钮、标题和进度条、时间、音量、速度。在窄容器中（小于 480 px），进度条移到单独的整行，标题和艺术家上下排列，音量滑块交由硬件按键处理。从 560 px 起音量滑块始终可见。
+- **默认** —— 一行：播放按钮、标题和进度条、时间、音量、速度。在窄容器中（小于 480 px），标题和艺术家上下排列并以省略号截断，进度条移到单独的整行，时间位于其下方，音量滑块交由硬件按键处理。从 560 px 起音量滑块始终可见。
 - **Mini** —— 默认宽 `240px`（`--uid-audio-mini-width`），可放入表格单元格：播放、进度条或小波形、时间（播放前为时长，播放中为当前位置）。启动某一行会暂停其他行。
-- **播放列表** —— 播放按钮两侧为上一首 / 下一首，并有一个标出当前播放曲目的编号列表。若曲目已播放超过 3 秒，"上一首"会先将其倒回开头。锁屏和硬件媒体键通过 Media Session API 工作。
+- **播放列表** —— 播放按钮两侧为上一首 / 下一首，并有一个标出当前播放曲目的编号列表。若曲目已播放超过 3 秒，"上一首"会先将其倒回开头。锁屏和硬件媒体键通过 Media Session API 工作。所有曲目的时长会依次从元数据中读取；在此之前列表显示“—”。
 
 ## 波形
 
-启用 `waveform` 时，文件会被获取并通过 Web Audio 解码（`decodeAudioData` 使用较低采样率以节省内存），峰值分块计算，块与块之间让出给浏览器（`requestIdleCallback`，否则 `setTimeout`）。结果按地址在页面生命周期内缓存；文件逐个解码，且仅在播放器接近视口时进行，因此包含上百条录音的表格也能保持流畅。超过 `waveformMaxBytes` 或长于 `waveformMaxDuration` 的文件保留普通进度条。音频必须能被 `fetch` 读取 —— 同源或 CORS。
+启用 `waveform` 时，文件会被获取并通过 Web Audio 解码（`decodeAudioData` 使用较低采样率以节省内存），峰值分块计算，块与块之间让出给浏览器（`requestIdleCallback`，否则 `setTimeout`）。结果按地址在页面生命周期内缓存；文件逐个解码，且仅在播放器接近视口时进行，因此包含上百条录音的表格也能保持流畅。超过 `waveformMaxBytes` 或长于 `waveformMaxDuration` 的文件保留普通进度条。音频必须能被 `fetch` 读取 —— 同源或 CORS。峰值计算完成之前，进度条位置显示闪烁的占位效果，而不是看起来已经完成的普通线条。
 
 对于较长的录音，请在服务器上计算峰值并通过 `peaks` 传入（长度任意；播放器会按自身宽度重新采样）：
 
@@ -55,6 +55,10 @@ const peaks = await computePeaks([audioBuffer.getChannelData(0)], 512)
 
 辅助函数：`getWaveform(src, options)`、`computePeaks(channels, count)`、`resamplePeaks(peaks, n)`、`peaksToPath(peaks)`。
 
+## HLS
+
+`.m3u8` 源（或 `type: 'application/x-mpegURL'`）通过与 [UidVideo](./video.md#hls) 相同的按需加载适配器播放：纯音频的 master 或 media 播放列表，fMP4、MPEG-TS 或 packed AAC 分片。流不绘制波形。
+
 ## 格式
 
 | 格式 | Chrome / Edge | Firefox | Safari macOS | Safari iOS |
diff --git a/docs/zh/video.md b/docs/zh/video.md
index 95a5398..6ee30d6 100644
--- a/docs/zh/video.md
+++ b/docs/zh/video.md
@@ -37,13 +37,13 @@
 | `hlsOptions` | `HlsOptions` | — | 传给 HLS 适配器（见下文） |
 | `hlsLoader` | `() => Promise<module>` | 动态导入 | HLS 适配器的来源 |
 
-事件：`play`、`pause`、`ended`、`error`（`{ kind, detail? }`）、`qualitychange`（标签）。组件对外暴露 `play()`、`pause()`、`toggle()`、`seek(seconds)`、响应式的 `state` 以及 `media` 元素。
+事件：`play`、`pause`、`ended`、`error`（`{ kind, detail? }`）、`qualitychange`（标签）、`audiotrackchange`（标签）。组件对外暴露 `play()`、`pause()`、`toggle()`、`seek(seconds)`、响应式的 `state` 以及 `media` 元素。
 
 ## 控件
 
 - **进度条** —— 已播放部分使用强调色，显示缓冲区段和章节间隔；悬停时显示时间、章节标题和缩略图。拖动时实时跳转。作为 `slider`，它响应方向键（±5 秒）、Page Up/Down（±10 %）、Home/End。
 - **音量** —— 按钮切换静音，滑块在悬停或聚焦时展开（触屏设备上由硬件按键负责）。
-- **设置** —— 速度，以及存在多个画质时的画质（自动（`Auto`）在 HLS 下随带宽调整）。菜单位于播放器内部，因此全屏时也可使用；在小尺寸播放器中会变成覆盖在视频上的面板。
+- **设置** —— 速度，以及存在多个画质时的画质（自动（`Auto`）在 HLS 下随带宽调整），以及含多条音轨的 HLS 流的音轨。菜单位于播放器内部，因此全屏时也可使用；在小尺寸播放器中会变成覆盖在视频上的面板。
 - **字幕** —— 由组件库自行绘制 cue（位于控件上方，在任何视频上都清晰可读）；在 iOS 原生全屏中由系统播放器显示。
 - **全屏** —— 整个播放器全屏；在 iPhone 上只有 `<video>` 本身能进入全屏，此时会打开原生播放器。
 - **画中画** —— 标准 API 或 Safari 的演示模式。
@@ -81,15 +81,15 @@
 | MP4/WebM · AV1 | ✓ | ✓ | 需硬件解码 | 需硬件解码 |
 | HLS (`.m3u8`) | 通过组件库的适配器；较新版本也可原生播放 | 通过组件库的适配器 | 原生 | 原生 |
 
-已在真实浏览器中验证（Playwright）：Chromium 156、Chrome 156、WebKit 27 —— MP4 H.264/AAC、WebM VP9/Opus、HLS fMP4 和 MPEG-TS（通过适配器及原生）、AES-128、直播播放列表、不连续点。测试环境中没有 Firefox。
+已在真实浏览器中验证（Playwright）：Chromium 156、Chrome 156、WebKit 27 —— MP4 H.264/AAC、WebM VP9/Opus、HLS fMP4 和 MPEG-TS（通过适配器及原生）、AES-128、直播播放列表、不连续点、备用音轨（fMP4、MPEG-TS、packed AAC）及其切换。测试环境中没有 Firefox。
 
 ## HLS
 
 `type: 'application/x-mpegURL'`（或 `.m3u8` 地址）的源通过 `@dskripchenko/ui/hls` 播放。适配器是一个单独的入口，仅在出现此类源时通过动态导入加载 —— 主包体积不会增加。
 
 - 在浏览器自身支持 HLS 的地方（Safari、iOS、较新的 Chrome），地址直接交给 `<video>`（`preferNative: true`；设为 `false` 则始终使用适配器并获得画质菜单）。
-- 否则由适配器向 Media Source Extensions 供数据：master 和 media 播放列表、带 `EXT-X-MAP` 的 **fMP4/CMAF** 分片、在浏览器中转换为 fMP4 的 **MPEG-TS** 分片（H.264 + AAC）、字节范围、`EXT-X-DISCONTINUITY`、**AES-128**（WebCrypto）、带重新加载和滑动窗口的直播播放列表、预缓冲与淘汰、跳转、支持手动选择画质的 ABR、带退避的重试。
-- 不支持：SAMPLE-AES / DRM（`encrypted` 错误）、MPEG-TS 中的 HEVC 或 MP3（`codec` 错误）、备用音轨（带 URI 的 `EXT-X-MEDIA TYPE=AUDIO`）—— 只播放混流在变体中的音频、低延迟 HLS 的 part。
+- 否则由适配器向 Media Source Extensions 供数据：master 和 media 播放列表、带 `EXT-X-MAP` 的 **fMP4/CMAF** 分片、在浏览器中转换为 fMP4 的 **MPEG-TS** 分片（H.264 + AAC）、字节范围、`EXT-X-DISCONTINUITY`、**AES-128**（WebCrypto）、**备用音轨**（带 URI 的 `EXT-X-MEDIA TYPE=AUDIO`）使用独立的 SourceBuffer，在拖动和切换画质时与视频保持同步；按 `audioLanguage`、`DEFAULT`、浏览器语言下的 `AUTOSELECT` 依次选择，并可在设置菜单中切换；音轨可以是 fMP4、MPEG-TS 或带 ID3 时间戳的 **packed AAC**；带重新加载和滑动窗口的直播播放列表、预缓冲与淘汰、跳转、支持手动选择画质的 ABR、带退避的重试。
+- 不支持：SAMPLE-AES / DRM（`encrypted` 错误）、MPEG-TS 中的 HEVC 或 MP3（`codec` 错误）、低延迟 HLS 的 part。
 
 ```ts
 import { UidVideo } from '@dskripchenko/ui'
@@ -102,6 +102,7 @@ import { UidVideo } from '@dskripchenko/ui'
 |---|---|---|
 | `preferNative` | `true` | 浏览器自带 HLS 时使用它 |
 | `startLevel` | `-1` | 起始变体；`-1` —— 由 ABR 决定 |
+| `audioLanguage` | — | 首选音轨语言（`ru`、`en-US`…） |
 | `maxBufferAhead` | `30` | 向前缓冲的秒数 |
 | `maxBufferBehind` | `30` | 播放位置之后保留的秒数 |
 | `retries` | `3` | 失败请求的重试次数（500 毫秒、1 秒、2 秒……） |
@@ -119,6 +120,8 @@ const session = attachHls(videoElement, url, {
   onError: (e) => console.warn(e.code, e.message),
 })
 session.setLevel(1)   // -1 —— 恢复自动
+session.setAudioTrack(1) // 切换音轨
+session.stats()        // 各 SourceBuffer 的缓冲区间、档位、带宽
 session.destroy()
 ```
 
diff --git a/scripts/media-check/app/main.ts b/scripts/media-check/app/main.ts
index 1a62de1..5db7ad9 100644
--- a/scripts/media-check/app/main.ts
+++ b/scripts/media-check/app/main.ts
@@ -21,6 +21,11 @@ const tracks = [
   { src: fx('chapters.vtt'), kind: 'chapters' as const },
 ]
 const hlsOptions = { preferNative: native }
+// Keeps the last HLS session reachable for the checks (window.__hls.stats()).
+const hlsLoader = async () => {
+  const mod = await import('../../../src/hls/index.js')
+  return { ...mod, attachHls: (...args: Parameters<typeof mod.attachHls>) => ((window as unknown as { __hls: unknown }).__hls = mod.attachHls(...args)) } as typeof mod
+}
 
 const playlist = [
   { src: fx('audio.mp3'), title: 'Morning drive', artist: 'Test Signal' },
@@ -28,7 +33,7 @@ const playlist = [
   { src: fx('audio.wav'), title: 'Plain wave', artist: 'Lab' },
 ]
 
-const video = (props: Record<string, unknown>) => h(UidVideo, { class: 'case', style: 'max-width:720px', ...props })
+const video = (props: Record<string, unknown>) => h(UidVideo, { class: 'case', style: 'max-width:720px', hlsLoader, ...props })
 
 const scenarios: Record<string, () => unknown> = {
   'video-mp4': () => video({ src: fx('video.mp4'), tracks, thumbnails: fx('thumbs.vtt'), poster: fx('poster.jpg'), title: 'Test video' }),
@@ -44,6 +49,19 @@ const scenarios: Record<string, () => unknown> = {
   'hls-live-fmp4': () => video({ src: '/live/fmp4.m3u8', hlsOptions }),
   'hls-live-ts': () => video({ src: '/live/ts.m3u8', hlsOptions }),
   'hls-bad': () => video({ src: fx('nothing.m3u8'), hlsOptions }),
+  'hls-alt-fmp4': () => video({ src: fx('hls-alt-fmp4/master.m3u8'), hlsOptions }),
+  'hls-alt-ts': () => video({ src: fx('hls-alt-ts/master.m3u8'), hlsOptions }),
+  'hls-alt-packed': () => video({ src: fx('hls-alt-packed/master.m3u8'), hlsOptions }),
+  'audio-hls': () => h('div', { style: 'display:grid;gap:12px;max-width:640px' }, [
+    h(UidAudio, { class: 'case', src: fx('hls-audio/master.m3u8'), title: 'HLS master (audio only)', hlsOptions, hlsLoader }),
+    h(UidAudio, { class: 'case', src: fx('hls-alt-ts/ru/index.m3u8'), title: 'HLS media playlist (TS audio)', hlsOptions }),
+    h(UidAudio, { class: 'case', src: fx('hls-alt-packed/en/index.m3u8'), title: 'HLS packed audio', hlsOptions }),
+  ]),
+  'mini-table': () => h('table', { style: 'border-collapse:collapse;width:100%;max-width:640px;font-size:14px' },
+    ['mp3', 'ogg', 'wav', 'flac', 'm4a', 'mp3'].map((ext, i) => h('tr', [
+      h('td', { style: 'padding:6px 8px' }, `Row ${i + 1}`),
+      h('td', { style: 'padding:4px 8px' }, h(UidAudio, { src: fx(`audio.${ext}`), variant: 'mini', waveform: true })),
+    ]))),
   'hls-url': () => video({ src: q.get('u') ?? '', hlsOptions }),
   'audio-formats': () => h('div', { style: 'display:grid;gap:12px;max-width:640px' },
     ['mp3', 'ogg', 'wav', 'flac', 'm4a'].map((ext) => h(UidAudio, { class: 'case', src: fx(`audio.${ext}`), title: `audio.${ext}`, waveform: true }))),
@@ -62,7 +80,7 @@ const scenarios: Record<string, () => unknown> = {
           h('tbody', [['Call #1', 'audio.mp3', '146 KB'], ['Call #2', 'audio.ogg', '98 KB'], ['Voicemail', 'audio.m4a', '150 KB']].map(([n, f, s], i) =>
             h('tr', [
               h('td', { style: 'padding:8px;border-bottom:1px solid var(--uid-border-subtle)' }, n),
-              h('td', { style: 'padding:4px 8px;border-bottom:1px solid var(--uid-border-subtle)' }, h(UidAudio, { src: fx(f), variant: 'mini', waveform: i !== 1 })),
+              h('td', { style: 'padding:4px 8px;border-bottom:1px solid var(--uid-border-subtle)' }, h(UidAudio, { src: fx(f), variant: 'mini', waveform: true })),
               h('td', { style: 'padding:8px;border-bottom:1px solid var(--uid-border-subtle);color:var(--uid-text-secondary)' }, s),
             ]))),
         ]),
diff --git a/scripts/media-check/check.mjs b/scripts/media-check/check.mjs
index 41d32dd..166f9aa 100644
--- a/scripts/media-check/check.mjs
+++ b/scripts/media-check/check.mjs
@@ -97,6 +97,80 @@ async function hlsCase(page, scenario, extra, { quality = true, seekTo = 8 } = {
 }
 
 
+const stats = (page) => page.evaluate(() => window.__hls?.stats() ?? null)
+const covers = (ranges, t) => (ranges ?? []).some(([a, b]) => a <= t + 0.1 && b > t + 0.5)
+
+// Dominant frequency of what the element plays (Chromium only: WebKit does not tap MSE audio).
+async function installTone(page) {
+  await page.evaluate(() => {
+    const el = document.querySelector('video, audio')
+    const ctx = new AudioContext()
+    const an = ctx.createAnalyser()
+    an.fftSize = 8192
+    ctx.createMediaElementSource(el).connect(an)
+    an.connect(ctx.destination)
+    ctx.resume()
+    window.__tone = () => {
+      const d = new Float32Array(an.frequencyBinCount)
+      an.getFloatFrequencyData(d)
+      let best = 1
+      for (let i = 1; i < d.length; i++) if (d[i] > d[best]) best = i
+      return d[best] > -90 ? Math.round((best * ctx.sampleRate) / an.fftSize) : 0
+    }
+  })
+}
+
+async function waitTone(page, hz, what) {
+  const t0 = Date.now()
+  let last
+  while (Date.now() - t0 < 8000) {
+    last = await page.evaluate(() => window.__tone())
+    if (Math.abs(last - hz) < 15) return last
+    await sleep(250)
+  }
+  throw new Error(`${what}: expected ~${hz} Hz, got ${last}`)
+}
+
+function overlaps(a, b) {
+  return a.x < b.x + b.width - 0.5 && b.x < a.x + a.width - 0.5 && a.y < b.y + b.height - 0.5 && b.y < a.y + a.height - 0.5
+}
+
+async function altAudioCase(page, scenario, browser) {
+  await open(page, scenario, '&native=0')
+  const chromium = browser === 'chromium' || browser === 'chrome'
+  await startVideo(page)
+  if (chromium) await installTone(page)
+  const s0 = await stats(page)
+  if (!s0?.buffered.audio) throw new Error('no separate audio SourceBuffer')
+  const notes = ['audio SourceBuffer']
+  if (chromium) notes.push(`en ${await waitTone(page, 330, 'English rendition')} Hz`)
+  await chooseMenu(page, 'Settings', 'Русский')
+  const t = (await media(page)).t
+  const t0 = Date.now()
+  for (;;) {
+    const st = await stats(page)
+    const now = (await media(page)).t
+    if (st.audioTrack === 1 && covers(st.buffered.audio, now)) break
+    if (Date.now() - t0 > 8000) throw new Error(`audio switch: ${JSON.stringify(st)}`)
+    await sleep(200)
+  }
+  await waitFor(page, (m) => m.t > t + 0.5 && !m.paused, 'plays after the audio switch')
+  notes.push('switched to ru')
+  if (chromium) notes.push(`ru ${await waitTone(page, 660, 'Russian rendition')} Hz`)
+  await clickScrubber(page, 8 / 12)
+  const m = await waitFor(page, (x) => x.t >= 7.5 && x.rs >= 3 && !x.paused, 'seek to 8', 15000)
+  const st = await stats(page)
+  if (!covers(st.buffered.audio, m.t) || !covers(st.buffered.main, m.t)) throw new Error(`seek: buffers ${JSON.stringify(st.buffered)}`)
+  notes.push('seek: both buffers')
+  await clickScrubber(page, 0.1)
+  await waitFor(page, (x) => x.t < 3 && x.rs >= 3, 'seek back', 10000)
+  await chooseMenu(page, 'Settings', '360p')
+  await waitFor(page, (x) => x.h === 360 && !x.paused, 'quality 360p', 15000)
+  if (chromium) await waitTone(page, 660, 'audio kept after the quality switch')
+  notes.push('360p keeps ru audio')
+  return notes.join(', ')
+}
+
 const tests = [
   {
     name: 'MP4 H.264/AAC: play, seek, volume, rate, captions, chapters, thumbnails',
@@ -218,6 +292,31 @@ const tests = [
       return `t=${m.t.toFixed(1)}, live badge`
     },
   })),
+  { name: 'HLS alternate audio (fMP4, 2 languages) via MSE', run: (page, b) => altAudioCase(page, 'hls-alt-fmp4', b) },
+  { name: 'HLS alternate audio (MPEG-TS) via MSE', run: (page, b) => altAudioCase(page, 'hls-alt-ts', b) },
+  { name: 'HLS alternate audio (packed AAC + ID3) via MSE', run: (page, b) => altAudioCase(page, 'hls-alt-packed', b) },
+  {
+    name: 'HLS alternate audio (browser default path)',
+    run: async (page) => {
+      await open(page, 'hls-alt-fmp4')
+      const m = await startVideo(page)
+      return `${m.h}p`
+    },
+  },
+  {
+    name: 'UidAudio with HLS: audio-only master, TS and packed media playlists',
+    run: async (page) => {
+      await open(page, 'audio-hls', '&native=0')
+      const out = []
+      for (let i = 0; i < 3; i++) {
+        const sel = `.uid-audio:nth-child(${i + 1}) audio`
+        await page.locator('.uid-audio').nth(i).locator('.uid-audio__play').click()
+        const m = await waitFor(page, (x) => x.t > 0.8 && !x.paused, `audio HLS #${i + 1} plays`, 10000, sel)
+        out.push(m.t.toFixed(1))
+      }
+      return `playing (${out.join(', ')} s)`
+    },
+  },
   {
     name: 'HLS bad URL → readable error',
     run: async (page) => {
@@ -267,6 +366,72 @@ const tests = [
       return 'next + auto-advance'
     },
   },
+  {
+    name: 'Playlist: every row gets its duration',
+    run: async (page) => {
+      await open(page, 'audio-playlist')
+      await page.waitForFunction(() => [...document.querySelectorAll('.uid-audio__item-time')].every((e) => /\d:\d\d/.test(e.textContent)), null, { timeout: 8000 })
+      return (await page.locator('.uid-audio__item-time').allTextContents()).join(' ')
+    },
+  },
+  {
+    name: 'Mini players in a table: every row gets its waveform',
+    run: async (page) => {
+      await open(page, 'mini-table')
+      await page.waitForFunction(() => {
+        const rows = [...document.querySelectorAll('.uid-audio')]
+        return rows.length === 6 && rows.every((r) => r.querySelector('.uid-media-scrubber__wave path'))
+      }, null, { timeout: 10000 })
+      return '6/6 waveforms'
+    },
+  },
+  {
+    name: 'Phone: audio header text boxes do not overlap',
+    viewport: { width: 390, height: 844 },
+    run: async (page) => {
+      await open(page, 'audio-playlist')
+      await page.click('.uid-audio__play')
+      await waitFor(page, (m) => m.t > 0.3, 'plays')
+      const boxes = await page.evaluate(() => {
+        const pick = (sel) => {
+          const el = document.querySelector(sel)
+          if (!el) return null
+          const r = el.getBoundingClientRect()
+          // The visible text extent: a truncated span is limited by its own box.
+          return { sel, x: r.x, y: r.y, width: r.width, height: r.height, clipped: el.scrollWidth > el.clientWidth }
+        }
+        return ['.uid-audio__title', '.uid-audio__artist', '.uid-audio__time', '.uid-audio__rate', '.uid-audio__play', '.uid-audio__scrubber']
+          .map(pick).filter(Boolean)
+      })
+      for (let i = 0; i < boxes.length; i++) {
+        for (let j = i + 1; j < boxes.length; j++) {
+          if (overlaps(boxes[i], boxes[j])) throw new Error(`${boxes[i].sel} overlaps ${boxes[j].sel}`)
+        }
+      }
+      const title = boxes.find((b) => b.sel === '.uid-audio__title')
+      return `${boxes.length} boxes, title ${Math.round(title.width)}px${title.clipped ? ' (ellipsis)' : ''}`
+    },
+  },
+  {
+    name: 'Scrub preview is hidden when a menu opens or the pointer leaves',
+    run: async (page) => {
+      await open(page, 'video-mp4')
+      await startVideo(page)
+      const bb = await page.locator('.uid-video .uid-media-scrubber').boundingBox()
+      await page.mouse.move(bb.x + bb.width * 0.3, bb.y + bb.height / 2)
+      await page.waitForSelector('.uid-media-scrubber__preview')
+      await page.mouse.move(bb.x + bb.width * 0.3, bb.y - 120)
+      await page.waitForSelector('.uid-media-scrubber__preview', { state: 'detached', timeout: 2000 })
+      await page.mouse.move(bb.x + bb.width * 0.3, bb.y + bb.height / 2)
+      await page.waitForSelector('.uid-media-scrubber__preview')
+      await page.keyboard.press('Escape')
+      await page.click('.uid-video [aria-label="Settings"]')
+      await page.waitForSelector('.uid-media-menu__panel')
+      const left = await page.locator('.uid-media-scrubber__preview, .uid-media-scrubber__hover-line').count()
+      if (left) throw new Error('preview visible under the open menu')
+      return 'ok'
+    },
+  },
   {
     name: 'Broken audio → readable error',
     run: async (page) => {
@@ -289,7 +454,7 @@ for (const b of browsers) {
   console.log(`\n## ${b.name} ${b.browser.version()}`)
   for (const test of tests) {
     if (only && !test.name.toLowerCase().includes(only.toLowerCase())) continue
-    const ctx = await b.browser.newContext({ viewport: { width: 1000, height: 800 } })
+    const ctx = await b.browser.newContext({ viewport: test.viewport ?? { width: 1000, height: 800 } })
     const page = await ctx.newPage()
     const errors = []
     page.on('pageerror', (e) => errors.push(e.message))
diff --git a/scripts/media-check/fixtures.sh b/scripts/media-check/fixtures.sh
index d0ea418..24aa653 100755
--- a/scripts/media-check/fixtures.sh
+++ b/scripts/media-check/fixtures.sh
@@ -4,6 +4,7 @@ set -euo pipefail
 FF=${FFMPEG:-ffmpeg}
 OUT=${1:-"$(cd "$(dirname "$0")/../.." && pwd)/.media-fixtures"}
 mkdir -p "$OUT"
+HERE="$(cd "$(dirname "$0")" && pwd)"
 cd "$OUT"
 Q="-hide_banner -loglevel error -y"
 DUR=12
@@ -64,4 +65,32 @@ mkdir -p hls-disc
 $FF $Q -f lavfi -i "testsrc=size=640x360:rate=30:duration=6" -f lavfi -i "sine=frequency=880:duration=6:sample_rate=48000" \
   -c:v libx264 -pix_fmt yuv420p -g 60 -sc_threshold 0 -c:a aac -b:a 64k -ac 2 \
   -output_ts_offset 5000 -f hls -hls_time 2 -hls_playlist_type vod -hls_segment_filename "hls-disc/b%03d.ts" hls-disc/b.m3u8
+# Alternate audio: video-only renditions + two audio languages (English 330 Hz, Russian 660 Hz).
+alt() { # $1 dir, $2 segment type
+  local dir=$1 type=$2 ext=m4s
+  [ "$type" = mpegts ] && ext=ts
+  mkdir -p "$dir"
+  $FF $Q -f lavfi -i "$VSRC" -f lavfi -i "sine=frequency=330:duration=$DUR:sample_rate=48000" -f lavfi -i "sine=frequency=660:duration=$DUR:sample_rate=48000" \
+    -filter_complex "[0:v]split=2[v1][v2];[v1]scale=640:360[v360];[v2]scale=1280:720[v720]" \
+    -map "[v360]" -map "[v720]" -map 1:a -map 2:a \
+    -c:v libx264 -profile:v main -pix_fmt yuv420p -g 60 -keyint_min 60 -sc_threshold 0 -b:v:0 400k -b:v:1 1800k \
+    -c:a aac -b:a 64k -ac 2 \
+    -f hls -hls_time 2 -hls_playlist_type vod -hls_segment_type "$type" \
+    -hls_segment_filename "$dir/%v/seg%03d.$ext" -master_pl_name master.m3u8 \
+    -var_stream_map "v:0,agroup:aud,name:v360 v:1,agroup:aud,name:v720 a:0,agroup:aud,language:en,name:en,default:yes a:1,agroup:aud,language:ru,name:ru" \
+    "$dir/%v/index.m3u8"
+  sed -i.bak -e 's/NAME="audio_2"/NAME="English",AUTOSELECT=YES/' -e 's/NAME="audio_3"/NAME="Русский",AUTOSELECT=YES/' "$dir/master.m3u8" && rm "$dir/master.m3u8.bak"
+}
+alt hls-alt-fmp4 fmp4
+alt hls-alt-ts mpegts
+
+# Packed audio (ID3 timestamp + ADTS) built from the TS audio renditions; video from hls-alt-ts.
+mkdir -p hls-alt-packed
+node "$HERE/packed-audio.mjs" hls-alt-ts/en/index.m3u8 hls-alt-packed/en
+node "$HERE/packed-audio.mjs" hls-alt-ts/ru/index.m3u8 hls-alt-packed/ru
+sed -e 's#URI="en/#URI="en/#' -e 's#^v360/#../hls-alt-ts/v360/#' -e 's#^v720/#../hls-alt-ts/v720/#' -e 's/mp4a.40.2/mp4a.40.2/' hls-alt-ts/master.m3u8 > hls-alt-packed/master.m3u8
+
+# Audio-only HLS for UidAudio: the English fMP4 rendition, and a master with both languages as variants.
+mkdir -p hls-audio
+printf '#EXTM3U\n#EXT-X-VERSION:7\n#EXT-X-STREAM-INF:BANDWIDTH=70000,CODECS="mp4a.40.2"\n../hls-alt-fmp4/en/index.m3u8\n#EXT-X-STREAM-INF:BANDWIDTH=72000,CODECS="mp4a.40.2"\n../hls-alt-fmp4/ru/index.m3u8\n' > hls-audio/master.m3u8
 echo "fixtures in $OUT"
diff --git a/scripts/media-check/packed-audio.mjs b/scripts/media-check/packed-audio.mjs
new file mode 100644
index 0000000..48ca154
--- /dev/null
+++ b/scripts/media-check/packed-audio.mjs
@@ -0,0 +1,65 @@
+// Turns audio-only MPEG-TS HLS segments into "packed audio" segments: an ID3 tag with
+// Apple's transport stream timestamp followed by the raw ADTS frames.
+// Usage: node packed-audio.mjs <in.m3u8> <out-dir>
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { basename, dirname, join } from 'node:path'
+
+const [input, outDir] = process.argv.slice(2)
+mkdirSync(outDir, { recursive: true })
+
+function audioPes(d) {
+  let pmt
+  let audio
+  const chunks = []
+  let first = null
+  for (let o = 0; o + 188 <= d.length; o += 188) {
+    const pusi = (d[o + 1] & 0x40) !== 0
+    const pid = ((d[o + 1] & 0x1f) << 8) | d[o + 2]
+    const afc = (d[o + 3] & 0x30) >> 4
+    let p = o + 4
+    if (afc === 2) continue
+    if (afc === 3) p += d[p] + 1
+    if (pid === 0) {
+      p += d[p] + 1
+      pmt = ((d[p + 10] & 0x1f) << 8) | d[p + 11]
+    } else if (pid === pmt && audio === undefined) {
+      p += d[p] + 1
+      const info = ((d[p + 10] & 0x0f) << 8) | d[p + 11]
+      const q = p + 12 + info
+      audio = ((d[q + 1] & 0x1f) << 8) | d[q + 2]
+    } else if (pid === audio) {
+      if (pusi) {
+        const hl = d[p + 8]
+        if (first === null && d[p + 7] & 0x80) {
+          const b = p + 9
+          first = (d[b] & 0x0e) * 536870912 + d[b + 1] * 4194304 + (d[b + 2] & 0xfe) * 16384 + d[b + 3] * 128 + (d[b + 4] & 0xfe) / 2
+        }
+        p += 9 + hl
+      }
+      chunks.push(d.subarray(p, o + 188))
+    }
+  }
+  return { pts: first, adts: Buffer.concat(chunks) }
+}
+
+function id3(pts) {
+  const owner = Buffer.from('com.apple.streaming.transportStreamTimestamp\0', 'latin1')
+  const ts = Buffer.alloc(8)
+  ts.writeUInt32BE(Math.floor(pts / 4294967296) & 1, 0)
+  ts.writeUInt32BE(pts % 4294967296, 4)
+  const body = Buffer.concat([owner, ts])
+  const frame = Buffer.concat([Buffer.from('PRIV'), Buffer.from([0, 0, 0, body.length, 0, 0]), body])
+  const size = frame.length
+  const head = Buffer.from([0x49, 0x44, 0x33, 4, 0, 0, (size >> 21) & 0x7f, (size >> 14) & 0x7f, (size >> 7) & 0x7f, size & 0x7f])
+  return Buffer.concat([head, frame])
+}
+
+const lines = readFileSync(input, 'utf8').split('\n')
+const out = lines.map((line) => {
+  if (!line || line.startsWith('#')) return line
+  const { pts, adts } = audioPes(readFileSync(join(dirname(input), line)))
+  const name = basename(line).replace(/\.ts$/, '.aac')
+  writeFileSync(join(outDir, name), Buffer.concat([id3(pts), adts]))
+  return name
+})
+writeFileSync(join(outDir, 'index.m3u8'), out.join('\n'))
diff --git a/scripts/media-check/screens.mjs b/scripts/media-check/screens.mjs
index dcb7440..f383f4e 100644
--- a/scripts/media-check/screens.mjs
+++ b/scripts/media-check/screens.mjs
@@ -22,6 +22,10 @@ async function shot(name, device, theme, scenario, action, opts = {}) {
   await page.goto(`${BASE}/?s=${scenario}&theme=${theme}${opts.query ?? ''}`)
   await page.waitForSelector('.uid-video, .uid-audio')
   await sleep(1500)
+  // Waveforms decode lazily (near the viewport) and one after another: scroll through, shoot the settled state.
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
+  await page.waitForFunction(() => !document.querySelector('.uid-media-scrubber__placeholder'), null, { timeout: 10000 }).catch(() => {})
+  await page.evaluate(() => window.scrollTo(0, 0))
   if (action) await action(page, device)
   const file = resolve(out, `${name}-${device}-${theme}.png`)
   const target = opts.selector ? page.locator(opts.selector).first() : page
@@ -55,6 +59,11 @@ for (const theme of ['light', 'dark']) {
       await tap(page, d, '[aria-label="Settings"]')
       await sleep(300)
     }, { selector: '.uid-video', query: '&native=0' })
+    await shot('video-audio-tracks', device, theme, 'hls-alt-fmp4', async (page, d) => {
+      await playVideo(page, d)
+      await tap(page, d, '[aria-label="Settings"]')
+      await sleep(300)
+    }, { selector: '.uid-video', query: '&native=0' })
     await shot('video-error', device, theme, 'video-broken', null, { selector: '.uid-video' })
     await shot('audio-playlist', device, theme, 'audio-playlist', async (page, d) => {
       await tap(page, d, '.uid-audio__play')
diff --git a/src/components/Audio/UidAudio.css b/src/components/Audio/UidAudio.css
index faebff8..88d906b 100644
--- a/src/components/Audio/UidAudio.css
+++ b/src/components/Audio/UidAudio.css
@@ -201,20 +201,39 @@
   }
 }
 
-/* Narrow: title and controls on top, the scrub bar across the whole width below. */
+/* Narrow: title and speed on top, the scrub bar across the whole width, the time under it. */
 @container (max-width: 480px) {
-  .uid-audio__volume {
+  .uid-audio:not(.uid-audio--mini) .uid-audio__volume {
     display: none;
   }
 
-  .uid-audio__row {
+  .uid-audio:not(.uid-audio--mini) .uid-audio__side {
+    display: contents;
+  }
+
+  .uid-audio:not(.uid-audio--mini) .uid-audio__side .uid-media-menu {
+    grid-area: rate;
+  }
+
+  .uid-audio:not(.uid-audio--mini) .uid-audio__time {
+    grid-area: time;
+    min-width: 0;
+    margin: 2px 0 0;
+    text-align: left;
+  }
+
+  .uid-audio:not(.uid-audio--mini) .uid-audio__row {
     gap: 0 8px;
+    grid-template-areas:
+      'lead track rate'
+      'lead time time';
   }
 
-  .uid-audio__row--meta {
+  .uid-audio:not(.uid-audio--mini) .uid-audio__row--meta {
     grid-template-areas:
-      'lead meta side'
-      'track track track';
+      'lead meta rate'
+      'track track track'
+      'time time time';
   }
 
   .uid-audio__row--meta .uid-audio__track {
@@ -223,22 +242,22 @@
 
   .uid-audio__meta {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
     gap: 0;
   }
 
+  .uid-audio__title,
   .uid-audio__artist {
     max-width: 100%;
+  }
+
+  .uid-audio__artist {
     font-size: var(--uid-font-size-xs, 12px);
   }
 
   .uid-audio__artist::before {
     display: none;
   }
-
-  .uid-audio__time {
-    min-width: 0;
-  }
 }
 
 /* Playlist */
diff --git a/src/components/Audio/UidAudio.spec.ts b/src/components/Audio/UidAudio.spec.ts
index 4034622..bc9de38 100644
--- a/src/components/Audio/UidAudio.spec.ts
+++ b/src/components/Audio/UidAudio.spec.ts
@@ -110,6 +110,28 @@ describe('UidAudio', () => {
     expect(HTMLMediaElement.prototype.play).toHaveBeenCalled()
   })
 
+  it('длительности плейлиста: известные сразу, остальные — прочерк до загрузки метаданных', async () => {
+    const w = mountAudio({ tracks })
+    const times = w.findAll('.uid-audio__item-time').map((x) => x.text())
+    expect(times).toEqual(['1:01', '—', '—'])
+  })
+
+  it('ожидание волны показывает заглушку, а не финальную полосу', () => {
+    const w = mountAudio({ src: '/a.mp3', waveform: true })
+    expect(w.find('.uid-media-scrubber__placeholder').exists()).toBe(true)
+    expect(w.find('.uid-media-scrubber__rail').exists()).toBe(false)
+  })
+
+  it('HLS-источник: адаптер подгружается лениво, src не ставится напрямую', async () => {
+    const attachHls = vi.fn(() => ({ destroy: vi.fn() }))
+    const w = mountAudio({ src: '/radio/master.m3u8', waveform: true, hlsLoader: async () => ({ attachHls }) as never })
+    await flushPromises()
+    expect(attachHls).toHaveBeenCalled()
+    expect(attachHls.mock.calls[0][1]).toBe('/radio/master.m3u8')
+    expect(w.find('audio').attributes('src')).toBeUndefined()
+    expect(w.find('.uid-media-scrubber--wave').exists()).toBe(false)
+  })
+
   it('меню скорости', async () => {
     const w = mountAudio({ src: '/a.mp3' })
     await w.find('[aria-label="Speed"]').trigger('click')
diff --git a/src/components/Audio/UidAudio.vue b/src/components/Audio/UidAudio.vue
index 4c1f6b7..36a08c9 100644
--- a/src/components/Audio/UidAudio.vue
+++ b/src/components/Audio/UidAudio.vue
@@ -10,7 +10,9 @@ import UidMediaScrubber from '../Media/UidMediaScrubber.vue'
 import UidMediaMenu, { type UidMediaMenuGroup } from '../Media/UidMediaMenu.vue'
 import { useMediaController, type UidMediaErrorInfo } from '../Media/useMediaController.js'
 import { useMediaLocale } from '../Media/useMediaLocale.js'
-import { PLAYBACK_RATES, formatTime } from '../Media/mediaUtils.js'
+import { PLAYBACK_RATES, formatTime, isHlsSource } from '../Media/mediaUtils.js'
+import type { HlsOptions, HlsSession } from '../../hls/index.js'
+import type { UidHlsModule } from '../Video/UidVideo.vue'
 import { getWaveform } from '../Media/waveform.js'
 
 export interface UidAudioTrack {
@@ -55,6 +57,9 @@ export interface UidAudioProps {
   showRate?: boolean
   /** Shows the track list in playlist mode. */
   showPlaylist?: boolean
+  hlsOptions?: Omit<HlsOptions, 'onError'>
+  /** Loads the HLS adapter for `.m3u8` sources; defaults to the lazily imported `@dskripchenko/ui/hls`. */
+  hlsLoader?: () => Promise<UidHlsModule>
 }
 
 const props = withDefaults(defineProps<UidAudioProps>(), {
@@ -79,6 +84,8 @@ const props = withDefaults(defineProps<UidAudioProps>(), {
   showVolume: true,
   showRate: true,
   showPlaylist: true,
+  hlsOptions: undefined,
+  hlsLoader: undefined,
 })
 
 const index = defineModel<number>('index', { default: 0 })
@@ -108,12 +115,14 @@ const current = computed<UidAudioTrack | null>(() => {
   return props.src ? { src: props.src, type: props.type, title: props.title, artist: props.artist, peaks: props.peaks } : null
 })
 const mini = computed(() => props.variant === 'mini')
+const isHls = computed(() => !!current.value && isHlsSource(current.value))
 const hasMeta = computed(() => !mini.value && !!(current.value?.title || current.value?.artist))
 
 // ---- waveform ----
 
 const wavePeaks = ref<number[] | null>(null)
-const waveWanted = computed(() => props.waveform || !!current.value?.peaks?.length)
+const waveWanted = computed(() => (props.waveform && !isHls.value) || !!current.value?.peaks?.length)
+const wavePending = ref(false)
 const visible = ref(false)
 let io: IntersectionObserver | null = null
 let waveToken = 0
@@ -122,13 +131,16 @@ async function loadWave(): Promise<void> {
   const tr = current.value
   const token = ++waveToken
   wavePeaks.value = tr?.peaks?.length ? tr.peaks : null
-  if (!tr || wavePeaks.value || !props.waveform || !visible.value) return
+  wavePending.value = !!tr && !wavePeaks.value && waveWanted.value
+  if (!tr || wavePeaks.value || !waveWanted.value || !visible.value) return
   const result = await getWaveform(tr.src, {
     maxBytes: props.waveformMaxBytes,
     maxDuration: props.waveformMaxDuration,
     fetchInit: props.crossorigin === 'use-credentials' ? { credentials: 'include' } : undefined,
   })
-  if (token === waveToken) wavePeaks.value = result
+  if (token !== waveToken) return
+  wavePeaks.value = result
+  wavePending.value = false
 }
 
 watch([() => current.value?.src, () => current.value?.peaks, () => props.waveform, visible], loadWave, { immediate: true })
@@ -151,16 +163,51 @@ function select(i: number, autoplay = true): void {
   index.value = next
 }
 
+let session: HlsSession | null = null
+let hlsToken = 0
+
+function detachHls(): void {
+  hlsToken++
+  session?.destroy()
+  session = null
+}
+
+async function attachHls(): Promise<void> {
+  const el = audio.value
+  const tr = current.value
+  if (!el || !tr || !isHls.value) return
+  const token = ++hlsToken
+  try {
+    const mod = await (props.hlsLoader ?? (() => import('../../hls/index.js')))()
+    if (token !== hlsToken) return
+    session = mod.attachHls(el, tr.src, {
+      ...props.hlsOptions,
+      onError: (e) => ctrl.setError({ kind: e.code, detail: e.message }),
+    })
+  } catch (e) {
+    ctrl.setError({ kind: 'unknown', detail: (e as Error).message })
+  }
+}
+
 function checkType(): void {
   const type = current.value?.type
   if (type && audio.value && !audio.value.canPlayType(type)) ctrl.setError({ kind: 'unsupported', detail: type })
 }
 
+// Before the DOM update: an HLS session must let go of the element before a plain src is bound.
+watch(() => current.value?.src, detachHls)
+
 watch(() => current.value?.src, () => {
   ctrl.setError(null)
   emit('trackchange', index.value)
   checkType()
-  if (playOnLoad && !state.error) ctrl.play().catch(() => {})
+  if (isHls.value) {
+    attachHls()
+    // MediaSource attaches asynchronously: start once there is something to play.
+    if (playOnLoad) audio.value?.addEventListener('loadedmetadata', () => ctrl.play().catch(() => {}), { once: true })
+  } else if (playOnLoad && !state.error) {
+    ctrl.play().catch(() => {})
+  }
   playOnLoad = false
 }, { flush: 'post' })
 
@@ -193,6 +240,39 @@ function next(): void {
 }
 
 const durations = ref<Record<number, number>>({})
+let durationToken = 0
+
+/** Reads the duration of every playlist track, one at a time, from its metadata. */
+async function prefetchDurations(): Promise<void> {
+  if (!isPlaylist.value || typeof Audio === 'undefined') return
+  const token = ++durationToken
+  const list = playlist.value
+  for (let i = 0; i < list.length; i++) {
+    const tr = list[i]
+    if (token !== durationToken) return
+    if (tr.duration || durations.value[i] || isHlsSource(tr)) continue
+    const d = await new Promise<number>((resolve) => {
+      const probe = new Audio()
+      probe.preload = 'metadata'
+      if (props.crossorigin !== undefined) probe.crossOrigin = props.crossorigin
+      const done = (value: number): void => {
+        probe.removeAttribute('src')
+        probe.load()
+        resolve(value)
+      }
+      probe.addEventListener('loadedmetadata', () => done(probe.duration), { once: true })
+      probe.addEventListener('error', () => done(NaN), { once: true })
+      setTimeout(() => done(NaN), 15000)
+      probe.src = tr.src
+    })
+    if (token === durationToken && Number.isFinite(d) && d > 0) durations.value = { ...durations.value, [i]: d }
+  }
+}
+
+watch(() => props.tracks, () => {
+  durations.value = {}
+  prefetchDurations()
+})
 watch(() => state.duration, (d) => {
   if (d && isPlaylist.value) durations.value = { ...durations.value, [index.value]: d }
 })
@@ -269,6 +349,8 @@ function playTrack(i: number): void {
 
 onMounted(() => {
   checkType()
+  attachHls()
+  prefetchDurations()
   if (typeof IntersectionObserver === 'undefined' || !root.value) {
     visible.value = true
     return
@@ -284,6 +366,8 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  detachHls()
+  durationToken++
   io?.disconnect()
   waveToken++
 })
@@ -321,7 +405,7 @@ defineExpose({
       :preload="preload"
       :loop="loop && !isPlaylist"
       :crossorigin="crossorigin"
-      :src="current?.src"
+      :src="isHls ? undefined : current?.src"
     />
 
     <div
@@ -412,6 +496,7 @@ defineExpose({
           :duration="state.duration || current?.duration || 0"
           :buffered="state.buffered"
           :peaks="waveWanted ? wavePeaks : null"
+          :pending="wavePending"
           :label="t.seek"
           :value-text="t.timeOf"
           @seek="ctrl.seek"
@@ -494,7 +579,7 @@ defineExpose({
               class="uid-audio__item-artist"
             >{{ tr.artist }}</span>
           </span>
-          <span class="uid-audio__item-time">{{ durations[i] || tr.duration ? formatTime(durations[i] || tr.duration || 0) : '' }}</span>
+          <span class="uid-audio__item-time">{{ durations[i] || tr.duration ? formatTime(durations[i] || tr.duration || 0) : '—' }}</span>
         </button>
       </li>
     </ol>
diff --git a/src/components/Media/UidMedia.css b/src/components/Media/UidMedia.css
index 66a9a72..9662030 100644
--- a/src/components/Media/UidMedia.css
+++ b/src/components/Media/UidMedia.css
@@ -256,6 +256,32 @@
   outline-offset: 2px;
 }
 
+.uid-media-scrubber__placeholder {
+  position: relative;
+  width: 100%;
+  height: 40%;
+  border-radius: 2px;
+  background:
+    linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.55) 50%, transparent 100%) no-repeat,
+    repeating-linear-gradient(90deg, var(--uid-media-wave, #c4c4c8) 0 2px, transparent 2px 3px);
+  background-size: 40% 100%, auto;
+  background-position: -40% 0, 0 0;
+  opacity: 0.6;
+  animation: uid-media-shimmer 1.4s ease-in-out infinite;
+}
+
+:root[data-theme='dark'] .uid-media-scrubber__placeholder {
+  background:
+    linear-gradient(90deg, transparent 0, rgb(255 255 255 / 0.18) 50%, transparent 100%) no-repeat,
+    repeating-linear-gradient(90deg, var(--uid-media-wave, #52525b) 0 2px, transparent 2px 3px);
+  background-size: 40% 100%, auto;
+  background-position: -40% 0, 0 0;
+}
+
+@keyframes uid-media-shimmer {
+  to { background-position: 140% 0, 0 0; }
+}
+
 .uid-media-scrubber__hover-line {
   position: absolute;
   top: 0;
@@ -337,7 +363,7 @@
   z-index: var(--uid-z-popover, 1000);
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   padding: 0 10px 8px;
   overflow-y: auto;
   backdrop-filter: blur(8px);
@@ -347,7 +373,16 @@
 .uid-media-menu__panel--sheet .uid-media-menu__group {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
-  gap: 4px;
+  gap: 3px 4px;
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__group--compact {
+  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
+}
+
+.uid-media-menu__panel--sheet .uid-media-menu__group--compact .uid-media-menu__item {
+  padding: 2px;
+  font-size: var(--uid-font-size-xs, 12px);
 }
 
 .uid-media-menu__panel--sheet .uid-media-menu__group + .uid-media-menu__group {
@@ -359,11 +394,13 @@
 .uid-media-menu__panel--sheet .uid-media-menu__heading {
   grid-column: 1 / -1;
   padding: 0 2px;
+  font-size: 11px;
+  line-height: 16px;
 }
 
 .uid-media-menu__panel--sheet .uid-media-menu__item {
   justify-content: center;
-  min-height: 32px;
+  min-height: 30px;
   padding: 2px 6px;
   border: 1px solid var(--uid-media-menu-divider, rgb(255 255 255 / 0.14));
   text-align: center;
@@ -387,7 +424,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 34px;
+  min-height: 30px;
   font-weight: 600;
 }
 
@@ -499,6 +536,10 @@
     animation-duration: 2.4s;
   }
 
+  .uid-media-scrubber__placeholder {
+    animation: none;
+  }
+
   .uid-media__volume-range,
   .uid-media-scrubber__rail,
   .uid-media-scrubber__handle,
diff --git a/src/components/Media/UidMediaMenu.vue b/src/components/Media/UidMediaMenu.vue
index 873843c..19d23c5 100644
--- a/src/components/Media/UidMediaMenu.vue
+++ b/src/components/Media/UidMediaMenu.vue
@@ -5,6 +5,8 @@ export interface UidMediaMenuOption {
   value: string | number
   label: string
   hint?: string
+  /** Shorter label for the compact sheet (`1×` instead of `Normal`). */
+  short?: string
 }
 
 export interface UidMediaMenuGroup {
@@ -66,6 +68,7 @@ function fitPanel(): void {
   sheet.value = false
   if (!el || !host || !button.value) return
   const hostRect = host.getBoundingClientRect()
+  if (!hostRect.height) return
   const btn = button.value.getBoundingClientRect()
   const up = getComputedStyle(el).bottom !== 'auto'
   const space = up ? btn.top - hostRect.top - 12 : hostRect.bottom - btn.bottom - 12
@@ -209,6 +212,7 @@ defineExpose({ show, hide, open })
         v-for="g in props.groups"
         :key="g.id"
         class="uid-media-menu__group"
+        :class="{ 'uid-media-menu__group--compact': g.options.every((o) => o.short) }"
         role="group"
         :aria-label="g.label"
       >
@@ -233,7 +237,7 @@ defineExpose({ show, hide, open })
             class="uid-media-menu__check"
             aria-hidden="true"
           />
-          <span class="uid-media-menu__label">{{ o.label }}</span>
+          <span class="uid-media-menu__label">{{ sheet && o.short ? o.short : o.label }}</span>
           <span
             v-if="o.hint"
             class="uid-media-menu__hint"
diff --git a/src/components/Media/UidMediaScrubber.vue b/src/components/Media/UidMediaScrubber.vue
index 2c6f7d1..4267406 100644
--- a/src/components/Media/UidMediaScrubber.vue
+++ b/src/components/Media/UidMediaScrubber.vue
@@ -17,6 +17,10 @@ const props = withDefaults(defineProps<{
   valueText: (current: string, total: string) => string
   disabled?: boolean
   step?: number
+  /** A waveform is on its way: show a placeholder instead of a bar that looks final. */
+  pending?: boolean
+  /** Hides the hover preview (e.g. while a menu is open over the bar). */
+  suppressPreview?: boolean
 }>(), {
   buffered: () => [],
   chapters: () => [],
@@ -24,6 +28,8 @@ const props = withDefaults(defineProps<{
   thumbnailAt: undefined,
   disabled: false,
   step: 5,
+  pending: false,
+  suppressPreview: false,
 })
 
 const emit = defineEmits<{
@@ -95,7 +101,7 @@ const hoverTime = computed(() => {
   return clamp(hoverX.value / width.value, 0, 1) * props.duration
 })
 
-const previewTime = computed(() => dragTime.value ?? hoverTime.value)
+const previewTime = computed(() => (props.suppressPreview && dragTime.value === null ? null : dragTime.value ?? hoverTime.value))
 const previewChapter = computed(() =>
   previewTime.value === null ? undefined : cueAt(props.chapters, previewTime.value)?.text,
 )
@@ -209,7 +215,8 @@ const ariaValueText = computed(() =>
     ref="root"
     class="uid-media-scrubber"
     :class="{
-      'uid-media-scrubber--wave': !!waveBars,
+      'uid-media-scrubber--wave': !!waveBars || pending,
+      'uid-media-scrubber--pending': pending && !waveBars,
       'uid-media-scrubber--dragging': dragTime !== null,
       'uid-media-scrubber--disabled': disabled || !hasDuration,
     }"
@@ -249,6 +256,11 @@ const ariaValueText = computed(() =>
         <path :d="wavePath" />
       </svg>
     </div>
+    <div
+      v-else-if="pending"
+      class="uid-media-scrubber__placeholder"
+      aria-hidden="true"
+    />
     <div
       v-else
       class="uid-media-scrubber__rail"
@@ -264,12 +276,12 @@ const ariaValueText = computed(() =>
       <div class="uid-media-scrubber__played" />
     </div>
     <div
-      v-if="!waveBars"
+      v-if="!waveBars && !pending"
       class="uid-media-scrubber__handle"
       aria-hidden="true"
     />
     <div
-      v-if="hoverTime !== null && waveBars"
+      v-if="previewTime !== null && hoverTime !== null && (waveBars || pending)"
       class="uid-media-scrubber__hover-line"
       :style="{ left: `${pct(hoverTime)}%` }"
       aria-hidden="true"
diff --git a/src/components/Video/UidVideo.spec.ts b/src/components/Video/UidVideo.spec.ts
index c6b5c9e..1cbb532 100644
--- a/src/components/Video/UidVideo.spec.ts
+++ b/src/components/Video/UidVideo.spec.ts
@@ -112,6 +112,25 @@ describe('UidVideo', () => {
     delete (window as unknown as { MediaSource?: unknown }).MediaSource
   })
 
+  it('HLS: меню аудиодорожек, когда их больше одной', async () => {
+    const setAudioTrack = vi.fn()
+    const attachHls = vi.fn((_el: HTMLMediaElement, _url: string, opts: { onAudioTracks: (l: unknown[]) => void, onAudioTrackSwitched: (i: number) => void }) => {
+      opts.onAudioTracks([{ index: 0, label: 'English', language: 'en', default: true }, { index: 1, label: 'Русский', language: 'ru', default: false }])
+      opts.onAudioTrackSwitched(0)
+      return { setLevel: vi.fn(), setAudioTrack, destroy: vi.fn() }
+    })
+    ;(window as unknown as { MediaSource: unknown }).MediaSource = function () {}
+    const w = mountVideo({ src: '/m.m3u8', hlsLoader: async () => ({ attachHls }) as never })
+    await flushPromises()
+    await w.find('[aria-label="Settings"]').trigger('click')
+    expect(w.find('[role="group"][aria-label="Audio"]').exists()).toBe(true)
+    const item = w.findAll('[role="menuitemradio"]').find((i) => i.text() === 'Русский')!
+    await item.trigger('click')
+    expect(setAudioTrack).toHaveBeenCalledWith(1)
+    expect(w.findComponent(UidVideo).emitted('audiotrackchange')?.[0]).toEqual(['Русский'])
+    delete (window as unknown as { MediaSource?: unknown }).MediaSource
+  })
+
   it('ошибка HLS показывается локализованным текстом', async () => {
     const attachHls = vi.fn((_el: HTMLMediaElement, _url: string, opts: { onError: (e: { code: string, message: string }) => void }) => {
       opts.onError({ code: 'encrypted', message: 'SAMPLE-AES' })
diff --git a/src/components/Video/UidVideo.vue b/src/components/Video/UidVideo.vue
index 54894b6..a81fe5c 100644
--- a/src/components/Video/UidVideo.vue
+++ b/src/components/Video/UidVideo.vue
@@ -18,7 +18,7 @@ import {
   PLAYBACK_RATES, cueAt, cueText, formatTime, isHlsSource, orderSources, parseThumbnail, parseVtt,
   type UidMediaCue, type UidMediaSource, type UidMediaTrack,
 } from '../Media/mediaUtils.js'
-import type { HlsLevel, HlsOptions, HlsSession } from '../../hls/index.js'
+import type { HlsAudioTrack, HlsLevel, HlsOptions, HlsSession } from '../../hls/index.js'
 
 export type UidHlsModule = typeof import('../../hls/index.js')
 
@@ -51,7 +51,7 @@ export interface UidVideoProps {
   title?: string
   /** Milliseconds of inactivity before the controls hide while playing. */
   autoHide?: number
-  hlsOptions?: Omit<HlsOptions, 'onLevels' | 'onLevelSwitched' | 'onError'>
+  hlsOptions?: Omit<HlsOptions, 'onLevels' | 'onLevelSwitched' | 'onAudioTracks' | 'onAudioTrackSwitched' | 'onError'>
   /** Loads the HLS adapter; defaults to the lazily imported `@dskripchenko/ui/hls`. */
   hlsLoader?: () => Promise<UidHlsModule>
 }
@@ -85,6 +85,7 @@ const emit = defineEmits<{
   ended: []
   error: [error: UidMediaErrorInfo]
   qualitychange: [label: string]
+  audiotrackchange: [label: string]
 }>()
 
 const t = useMediaLocale()
@@ -115,6 +116,8 @@ const hls = shallowRef<HlsSession | null>(null)
 const hlsLevels = ref<HlsLevel[]>([])
 const hlsLevel = ref(-1)
 const hlsAuto = ref(true)
+const audioTracks = ref<HlsAudioTrack[]>([])
+const audioTrack = ref(-1)
 let loadToken = 0
 
 function hlsPlayable(el: HTMLVideoElement): boolean {
@@ -127,6 +130,8 @@ function teardownHls(): void {
   hls.value = null
   hlsLevels.value = []
   hlsLevel.value = -1
+  audioTracks.value = []
+  audioTrack.value = -1
 }
 
 async function load(index: number, resume?: { time: number, play: boolean }): Promise<void> {
@@ -155,6 +160,8 @@ async function load(index: number, resume?: { time: number, play: boolean }): Pr
         ...props.hlsOptions,
         onLevels: (levels) => { hlsLevels.value = levels },
         onLevelSwitched: (i) => { hlsLevel.value = i },
+        onAudioTracks: (list) => { audioTracks.value = list },
+        onAudioTrackSwitched: (i) => { audioTrack.value = i },
         onError: (e) => ctrl.setError({ kind: e.code, detail: e.message }),
       })
     } catch (e) {
@@ -337,14 +344,29 @@ const rateGroup = computed<UidMediaMenuGroup>(() => ({
   id: 'rate',
   label: t.value.speed,
   value: state.rate,
-  options: props.rates.map((r) => ({ value: r, label: r === 1 ? t.value.normalSpeed : `${r}×` })),
+  options: props.rates.map((r) => ({ value: r, label: r === 1 ? t.value.normalSpeed : `${r}×`, short: `${r}×` })),
 }))
 
-const settingsGroups = computed(() => (qualityGroup.value ? [rateGroup.value, qualityGroup.value] : [rateGroup.value]))
+const audioGroup = computed<UidMediaMenuGroup | null>(() => (audioTracks.value.length > 1
+  ? {
+      id: 'audio',
+      label: t.value.audioTrack,
+      value: audioTrack.value,
+      options: audioTracks.value.map((a) => ({ value: a.index, label: a.label })),
+    }
+  : null))
+
+const settingsGroups = computed(() =>
+  [rateGroup.value, qualityGroup.value, audioGroup.value].filter((g): g is UidMediaMenuGroup => !!g),
+)
 
 function onMenuSelect(group: string, value: string | number): void {
   if (group === 'rate') ctrl.setRate(Number(value))
   else if (group === 'quality') setQuality(Number(value))
+  else if (group === 'audio') {
+    hls.value?.setAudioTrack(Number(value))
+    emit('audiotrackchange', audioTracks.value[Number(value)]?.label ?? '')
+  }
   else if (group === 'captions') {
     captionIndex.value = Number(value)
     if (captionIndex.value >= 0) lastCaption = captionIndex.value
@@ -648,6 +670,7 @@ defineExpose({
           :label="t.seek"
           :value-text="t.timeOf"
           :disabled="!!state.error"
+          :suppress-preview="menuOpen || !controlsVisible"
           @seek="ctrl.seek"
           @scrubstart="scrubbing = true"
           @scrubend="scrubbing = false"
diff --git a/src/hls/audio.spec.ts b/src/hls/audio.spec.ts
new file mode 100644
index 0000000..e5cf31d
--- /dev/null
+++ b/src/hls/audio.spec.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import { pickAudioRendition } from './engine'
+import { parsePlaylist } from './playlist'
+import { isPackedAudio, parsePackedAudio } from './ts/id3'
+import { TsTransmuxer } from './ts/transmuxer'
+import { findBoxes, parseInit } from './mp4'
+
+const master = `#EXTM3U
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aud",NAME="English",LANGUAGE="en",AUTOSELECT=YES,DEFAULT=YES,CHANNELS="2",URI="en/index.m3u8"
+#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aud",NAME="Русский",LANGUAGE="ru",AUTOSELECT=YES,URI="ru/index.m3u8"
+#EXT-X-STREAM-INF:BANDWIDTH=500000,CODECS="avc1.4d401e,mp4a.40.2",AUDIO="aud"
+v360/index.m3u8
+`
+
+function adtsFrame(len: number): number[] {
+  return [0xff, 0xf1, 0x50, 0x80, (len >> 3) & 0xff, ((len & 7) << 5) | 0x1f, 0xfc, ...new Array(len - 7).fill(0x21)]
+}
+
+function id3Pts(pts: number): number[] {
+  const owner = Array.from('com.apple.streaming.transportStreamTimestamp\0', (c) => c.charCodeAt(0))
+  const hi = Math.floor(pts / 4294967296) & 1
+  const lo = pts % 4294967296
+  const body = [...owner, 0, 0, 0, hi, (lo >>> 24) & 0xff, (lo >>> 16) & 0xff, (lo >>> 8) & 0xff, lo & 0xff]
+  const frame = [0x50, 0x52, 0x49, 0x56, 0, 0, 0, body.length, 0, 0, ...body]
+  return [0x49, 0x44, 0x33, 4, 0, 0, 0, 0, 0, frame.length, ...frame]
+}
+
+describe('альтернативные аудиодорожки', () => {
+  it('master: группа, язык, DEFAULT и AUTOSELECT', () => {
+    const pl = parsePlaylist(master, 'https://cdn.test/master.m3u8')
+    if (pl.type !== 'master') throw new Error('master expected')
+    expect(pl.variants[0].audio).toBe('aud')
+    expect(pl.media).toHaveLength(2)
+    expect(pl.media[1]).toMatchObject({ type: 'AUDIO', name: 'Русский', language: 'ru', autoselect: true, default: false, uri: 'https://cdn.test/ru/index.m3u8' })
+    expect(pl.media[0].channels).toBe('2')
+  })
+
+  it('выбор: предпочтительный язык, затем DEFAULT, затем первый', () => {
+    const pl = parsePlaylist(master, 'https://cdn.test/master.m3u8')
+    if (pl.type !== 'master') return
+    expect(pickAudioRendition(pl.media, 'ru')).toBe(1)
+    expect(pickAudioRendition(pl.media, 'ru-RU')).toBe(1)
+    expect(pickAudioRendition(pl.media, 'de')).toBe(0)
+    expect(pickAudioRendition(pl.media)).toBe(0)
+    expect(pickAudioRendition(pl.media.map((m) => ({ ...m, default: false, autoselect: false })))).toBe(0)
+    expect(pickAudioRendition([])).toBe(-1)
+  })
+})
+
+describe('packed audio (ID3 + ADTS)', () => {
+  it('время из ID3 PRIV и полезная нагрузка после тегов', () => {
+    const d = Uint8Array.from([...id3Pts(8589934591), ...adtsFrame(20)])
+    expect(isPackedAudio(d)).toBe(true)
+    const res = parsePackedAudio(d)
+    expect(res.pts).toBe(8589934591)
+    expect(res.data[0]).toBe(0xff)
+    expect(res.data.length).toBe(20)
+  })
+
+  it('чистый ADTS без ID3 тоже распознаётся', () => {
+    expect(isPackedAudio(Uint8Array.from(adtsFrame(10)))).toBe(true)
+    expect(isPackedAudio(Uint8Array.from([0x47, 0, 0]))).toBe(false)
+    expect(parsePackedAudio(Uint8Array.from(adtsFrame(10))).pts).toBeUndefined()
+  })
+
+  it('транcмуксер делает аудио-only fMP4 и продолжает шкалу', () => {
+    const tx = new TsTransmuxer()
+    const seg = (pts: number): Uint8Array => Uint8Array.from([...id3Pts(pts), ...adtsFrame(30), ...adtsFrame(30), ...adtsFrame(30)])
+    expect(tx.canHandle(seg(0))).toBe(true)
+    const a = tx.push(seg(90000), { discontinuity: true })
+    expect(a.mimeType).toBe('audio/mp4; codecs="mp4a.40.2"')
+    expect(parseInit(a.init as Uint8Array).map((t) => t.kind)).toEqual(['audio'])
+    expect(a.startTime).toBeCloseTo(1, 3)
+    expect(findBoxes(a.data, ['moof'])).toHaveLength(1)
+    const b = tx.push(seg(90000 + Math.round((3 * 1024 * 90000) / 44100)), { discontinuity: false })
+    expect(b.init).toBeUndefined()
+    expect(b.startTime).toBeCloseTo(1 + (3 * 1024) / 44100, 3)
+  })
+})
diff --git a/src/hls/engine.ts b/src/hls/engine.ts
index 18cb490..dfc2343 100644
--- a/src/hls/engine.ts
+++ b/src/hls/engine.ts
@@ -3,9 +3,10 @@ import { aesSupported, decryptSegment } from './aes.js'
 import { fragmentStart, isFmp4, isMpegTs, parseInit, type Mp4TrackInfo } from './mp4.js'
 import {
   HlsParseError, parsePlaylist,
-  type HlsByteRange, type HlsInitSection, type HlsMediaPlaylist, type HlsSegment, type HlsVariant,
+  type HlsByteRange, type HlsInitSection, type HlsMediaPlaylist, type HlsRendition, type HlsSegment, type HlsVariant,
 } from './playlist.js'
 import { TransmuxError, type SegmentTransmuxer, type TransmuxerFactory } from './transmux.js'
+import { isPackedAudio } from './ts/id3.js'
 import { createTsTransmuxer } from './ts/transmuxer.js'
 
 export type HlsErrorCode = 'mse' | 'manifest' | 'network' | 'encrypted' | 'codec'
@@ -27,11 +28,21 @@ export interface HlsLevel {
   label: string
 }
 
+export interface HlsAudioTrack {
+  index: number
+  /** NAME of the rendition, or its language. */
+  label: string
+  language?: string
+  default: boolean
+}
+
 export interface HlsOptions {
   /** Use the browser's own HLS (Safari, iOS) when it has one (default `true`). */
   preferNative?: boolean
   /** Starting level index; `-1` (default) lets ABR choose. */
   startLevel?: number
+  /** Preferred audio language (BCP 47 prefix, e.g. `ru`); defaults to DEFAULT=YES, then the browser language. */
+  audioLanguage?: string
   /** Seconds to buffer ahead of the playhead (default 30). */
   maxBufferAhead?: number
   /** Seconds kept behind the playhead before eviction (default 30). */
@@ -42,11 +53,13 @@ export interface HlsOptions {
   initialBandwidth?: number
   /** ABR never picks levels much taller than the player (default `true`). */
   capToPlayerSize?: boolean
-  /** Converts non-fMP4 segments; defaults to the built-in MPEG-TS transmuxer, `null` disables it. */
+  /** Converts non-fMP4 segments; defaults to the built-in MPEG-TS / packed-audio transmuxer, `null` disables it. */
   transmuxer?: TransmuxerFactory | null
   fetch?: typeof fetch
   onLevels?: (levels: HlsLevel[]) => void
   onLevelSwitched?: (index: number) => void
+  onAudioTracks?: (tracks: HlsAudioTrack[]) => void
+  onAudioTrackSwitched?: (index: number) => void
   onError?: (error: HlsError) => void
 }
 
@@ -57,28 +70,51 @@ export interface HlsSession {
   /** Level currently being loaded; `-1` before the first one. */
   readonly level: number
   readonly autoLevel: boolean
+  readonly audioTracks: HlsAudioTrack[]
+  readonly audioTrack: number
   /** Bandwidth estimate, bits per second. */
   readonly bandwidth: number
   setLevel(index: number): void
+  setAudioTrack(index: number): void
+  /** Buffered ranges per SourceBuffer (`main`, and `audio` for a separate audio rendition). */
+  stats(): HlsStats
   destroy(): void
 }
 
+export interface HlsStats {
+  buffered: { main: [number, number][], audio?: [number, number][] }
+  level: number
+  audioTrack: number
+  bandwidth: number
+}
+
 type Op =
   | { kind: 'append', data: Uint8Array }
   | { kind: 'remove', start: number, end: number }
   | { kind: 'offset', value: number }
   | { kind: 'changeType', mime: string }
-  | { kind: 'eos' }
 
 interface QueuedOp { op: Op, resolve: () => void, reject: (e: unknown) => void }
 
-interface Level {
-  variant: HlsVariant
-  info: HlsLevel
+/** A media playlist the engine can load: a variant or an audio rendition. */
+interface Source {
+  id: number
+  uri: string
+  codecs?: string
   playlist?: HlsMediaPlaylist
   loading?: Promise<HlsMediaPlaylist>
 }
 
+interface Level extends Source {
+  variant: HlsVariant
+  info: HlsLevel
+}
+
+interface AudioRendition extends Source {
+  rendition: HlsRendition
+  info: HlsAudioTrack
+}
+
 type MediaSourceCtor = typeof MediaSource
 
 export function getMediaSource(): MediaSourceCtor | undefined {
@@ -113,16 +149,16 @@ function sleep(ms: number, signal?: AbortSignal): Promise<void> {
   })
 }
 
-function rangesOf(media: HTMLMediaElement): [number, number][] {
+function rangesOf(b: TimeRanges | undefined): [number, number][] {
   const out: [number, number][] = []
-  const b = media.buffered
+  if (!b) return out
   for (let i = 0; i < b.length; i++) out.push([b.start(i), b.end(i)])
   return out
 }
 
-function bufferedEnd(media: HTMLMediaElement, t: number): number {
+function endOfRange(ranges: [number, number][], t: number): number {
   let end = t
-  for (const [s, e] of rangesOf(media)) if (s - 0.3 <= end && e > end) end = e
+  for (const [s, e] of ranges) if (s - 0.3 <= end && e > end) end = e
   return end
 }
 
@@ -130,275 +166,133 @@ function isAbort(e: unknown): boolean {
   return (e as DOMException)?.name === 'AbortError'
 }
 
-class HlsEngine implements HlsSession {
-  readonly native = false
-  live = false
-  levels: HlsLevel[] = []
-  level = -1
-  autoLevel = true
+/** Picks the audio rendition: preferred language, DEFAULT=YES, AUTOSELECT in the browser language, first. */
+export function pickAudioRendition(list: HlsRendition[], preferred?: string): number {
+  if (!list.length) return -1
+  const lang = (l?: string): string => (l ?? '').toLowerCase()
+  const matches = (l: string | undefined, want: string): boolean => !!want && (lang(l) === want || lang(l).startsWith(`${want}-`) || want.startsWith(`${lang(l)}-`))
+  if (preferred) {
+    const i = list.findIndex((r) => matches(r.language, lang(preferred)))
+    if (i >= 0) return i
+  }
+  const def = list.findIndex((r) => r.default)
+  if (def >= 0) return def
+  const nav = typeof navigator !== 'undefined' ? lang(navigator.language) : ''
+  const auto = list.findIndex((r) => r.autoselect && matches(r.language, nav))
+  return auto >= 0 ? auto : 0
+}
 
-  private readonly opts: Required<Pick<HlsOptions, 'maxBufferAhead' | 'maxBufferBehind' | 'retries'>> & HlsOptions
-  private readonly abort = new AbortController()
-  private readonly est: BandwidthEstimator
-  private readonly fetchFn: typeof fetch
-  private all: Level[] = []
-  private ms: MediaSource | null = null
-  private objectUrl = ''
-  private sb: SourceBuffer | null = null
+/** Loads one media playlist into one SourceBuffer: the main (video or muxed) stream or an audio rendition. */
+class Stream {
+  sb: SourceBuffer | null = null
+  source: Source
+  ended = false
   private mime = ''
   private queue: QueuedOp[] = []
   private running: QueuedOp | null = null
   private loading = false
   private segmentAbort: AbortController | null = null
-  private last: { level: number, sn: number, cc: number } | null = null
+  private last: { source: number, sn: number, cc: number } | null = null
   private appendedInit = ''
   private tracks: Mp4TrackInfo[] = []
-  private offsets = new Map<number, number>()
   private transmuxer: SegmentTransmuxer | null = null
-  private timer: ReturnType<typeof setInterval> | null = null
   private reloadTimer: ReturnType<typeof setTimeout> | null = null
-  private ended = false
-  private destroyed = false
-  private failed = false
-  private startPositioned = false
-
-  constructor(private readonly media: HTMLMediaElement, private readonly url: string, options: HlsOptions) {
-    this.opts = { maxBufferAhead: 30, maxBufferBehind: 30, retries: 3, ...options }
-    this.est = new BandwidthEstimator(options.initialBandwidth ?? 1_000_000)
-    this.fetchFn = options.fetch ?? ((...args) => fetch(...args))
-    this.media.addEventListener('seeking', this.onSeeking)
-    this.start().catch((e) => this.fail(e))
-  }
-
-  get bandwidth(): number {
-    return this.est.estimate
-  }
-
-  // ---- lifecycle ----
-
-  private async start(): Promise<void> {
-    const MS = getMediaSource()
-    if (!MS) throw new HlsError('mse', 'MediaSource is not available')
-    const text = await this.fetchText(this.url)
-    const parsed = parsePlaylist(text, this.url)
-    if (parsed.type === 'master') {
-      const variants = parsed.variants
-        .filter((v) => !v.codecs || MS.isTypeSupported(`video/mp4; codecs="${v.codecs}"`) || MS.isTypeSupported(`audio/mp4; codecs="${v.codecs}"`))
-        .sort((a, b) => a.bandwidth - b.bandwidth)
-      if (!variants.length) throw new HlsError('codec', 'No variant has codecs this browser supports')
-      this.all = variants.map((variant, index) => ({
-        variant,
-        info: { index, bandwidth: variant.bandwidth, width: variant.width, height: variant.height, codecs: variant.codecs, label: levelLabel(variant) },
-      }))
-    } else {
-      const variant: HlsVariant = { uri: this.url, bandwidth: 0 }
-      this.all = [{ variant, playlist: parsed, info: { index: 0, bandwidth: 0, label: 'auto' } }]
-    }
-    this.levels = this.all.map((l) => l.info)
-    this.opts.onLevels?.(this.levels)
-
-    const start = this.opts.startLevel ?? -1
-    this.autoLevel = start < 0
-    this.level = start >= 0 && start < this.all.length ? start : this.pickLevel()
-
-    const ms = new MS()
-    this.ms = ms
-    if ('disableRemotePlayback' in this.media && (window as unknown as { ManagedMediaSource?: unknown }).ManagedMediaSource === MS) {
-      this.media.disableRemotePlayback = true
-    }
-    this.objectUrl = URL.createObjectURL(ms)
-    const opened = new Promise<void>((resolve) => ms.addEventListener('sourceopen', () => resolve(), { once: true }))
-    this.media.src = this.objectUrl
-    await opened
-    if (this.destroyed) return
 
-    const pl = await this.loadPlaylist(this.level)
-    this.live = !pl.endList
-    if (!this.live) ms.duration = pl.totalDuration
-    this.opts.onLevelSwitched?.(this.level)
-    if (this.live) this.scheduleReload(pl.targetDuration)
-    this.timer = setInterval(() => this.tick(), 250)
-    this.tick()
+  constructor(private readonly engine: HlsEngine, readonly kind: 'main' | 'audio', source: Source) {
+    this.source = source
   }
 
-  destroy(): void {
-    if (this.destroyed) return
-    this.destroyed = true
-    this.abort.abort()
-    this.segmentAbort?.abort()
-    if (this.timer) clearInterval(this.timer)
-    if (this.reloadTimer) clearTimeout(this.reloadTimer)
-    this.media.removeEventListener('seeking', this.onSeeking)
-    for (const q of this.queue) q.reject(new DOMException('Aborted', 'AbortError'))
-    this.queue = []
-    if (this.objectUrl) {
-      this.media.removeAttribute('src')
-      this.media.load()
-      URL.revokeObjectURL(this.objectUrl)
-    }
-    this.sb = null
-    this.ms = null
+  get idle(): boolean {
+    return !this.loading && !this.running && !this.queue.length && !this.sb?.updating
   }
 
-  private fail(e: unknown): void {
-    if (this.destroyed || isAbort(e) || this.failed) return
-    this.failed = true
-    let err: HlsError
-    if (e instanceof HlsError) err = e
-    else if (e instanceof HlsParseError) err = new HlsError('manifest', e.message)
-    else if (e instanceof TransmuxError) err = new HlsError('codec', e.message)
-    else if ((e as DOMException)?.name === 'NotSupportedError') err = new HlsError('codec', (e as Error).message)
-    else err = new HlsError('network', (e as Error)?.message ?? String(e))
-    if (this.timer) clearInterval(this.timer)
-    if (this.reloadTimer) clearTimeout(this.reloadTimer)
-    this.opts.onError?.(err)
-  }
-
-  // ---- networking ----
-
-  private async request(url: string, range: HlsByteRange | undefined, signal: AbortSignal): Promise<Response> {
-    const headers: Record<string, string> = {}
-    if (range) headers.Range = `bytes=${range.offset}-${range.offset + range.length - 1}`
-    let attempt = 0
-    for (;;) {
-      try {
-        const res = await this.fetchFn(url, { headers, signal })
-        if (res.ok) return res
-        if (!RETRYABLE(res.status) || attempt >= this.opts.retries) {
-          throw new HlsError('network', `HTTP ${res.status} for ${url}`)
-        }
-      } catch (e) {
-        if (isAbort(e) || e instanceof HlsError || attempt >= this.opts.retries) throw e
-      }
-      await sleep(500 * 2 ** attempt, signal)
-      attempt++
+  buffered(): [number, number][] {
+    try {
+      return rangesOf(this.sb?.buffered)
+    } catch {
+      return []
     }
   }
 
-  private async fetchText(url: string): Promise<string> {
-    return (await this.request(url, undefined, this.abort.signal)).text()
-  }
-
-  private async fetchBytes(url: string, range: HlsByteRange | undefined, signal: AbortSignal): Promise<{ data: Uint8Array, ms: number }> {
-    const t0 = performance.now()
-    const res = await this.request(url, range, signal)
-    const buf = await res.arrayBuffer()
-    let data = new Uint8Array(buf)
-    // A server that ignores Range sends the whole file.
-    if (range && res.status === 200 && data.length > range.length) data = data.subarray(range.offset, range.offset + range.length)
-    return { data, ms: performance.now() - t0 }
-  }
-
-  private loadKey = async (uri: string): Promise<ArrayBuffer> => {
-    const { data } = await this.fetchBytes(uri, undefined, this.abort.signal)
-    return data.slice().buffer
+  bufferedEnd(t: number): number {
+    return endOfRange(this.buffered(), t)
   }
 
   // ---- playlists ----
 
-  private loadPlaylist(index: number, force = false): Promise<HlsMediaPlaylist> {
-    const level = this.all[index]
-    if (level.playlist && !force) return Promise.resolve(level.playlist)
-    if (level.loading) return level.loading
-    level.loading = this.fetchText(level.variant.uri)
+  loadPlaylist(source = this.source, force = false): Promise<HlsMediaPlaylist> {
+    if (source.playlist && !force) return Promise.resolve(source.playlist)
+    if (source.loading) return source.loading
+    source.loading = this.engine.fetchText(source.uri)
       .then((text) => {
-        const parsed = parsePlaylist(text, level.variant.uri)
+        const parsed = parsePlaylist(text, source.uri)
         if (parsed.type !== 'media') throw new HlsParseError('Expected a media playlist')
-        const reference = level.playlist ?? this.all[this.level]?.playlist
+        const reference = source.playlist ?? this.source.playlist
         if (reference && reference !== parsed) alignTimes(reference, parsed)
-        level.playlist = parsed
+        source.playlist = parsed
         return parsed
       })
-      .finally(() => { level.loading = undefined })
-    return level.loading
+      .finally(() => { source.loading = undefined })
+    return source.loading
   }
 
-  private scheduleReload(seconds: number): void {
-    if (this.destroyed) return
+  scheduleReload(seconds: number): void {
+    if (this.engine.destroyed) return
+    if (this.reloadTimer) clearTimeout(this.reloadTimer)
     this.reloadTimer = setTimeout(async () => {
       try {
-        const before = this.all[this.level].playlist
-        const pl = await this.loadPlaylist(this.level, true)
-        const changed = !before || pl.segments[pl.segments.length - 1]?.sn !== before.segments[before.segments.length - 1]?.sn
+        const before = this.source.playlist
+        const pl = await this.loadPlaylist(this.source, true)
+        const lastSn = (p?: HlsMediaPlaylist): number | undefined => p?.segments[p.segments.length - 1]?.sn
         if (pl.endList) {
-          this.live = false
+          if (this.kind === 'main') this.engine.live = false
           return
         }
-        this.updateSeekable(pl)
-        this.scheduleReload(changed ? pl.targetDuration : pl.targetDuration / 2)
+        if (this.kind === 'main') this.engine.updateSeekable(pl)
+        this.scheduleReload(lastSn(before) !== lastSn(pl) ? pl.targetDuration : pl.targetDuration / 2)
         this.tick()
       } catch (e) {
-        this.fail(e)
+        this.engine.fail(e)
       }
     }, Math.max(1, seconds) * 1000)
   }
 
-  private updateSeekable(pl: HlsMediaPlaylist): void {
-    const ms = this.ms as (MediaSource & { setLiveSeekableRange?: (s: number, e: number) => void }) | null
-    if (!ms || ms.readyState !== 'open' || !pl.segments.length) return
-    const first = pl.segments[0]
-    const last = pl.segments[pl.segments.length - 1]
-    try {
-      if (ms.duration !== Infinity && !this.sb?.updating) ms.duration = Infinity
-      ms.setLiveSeekableRange?.(first.start, last.start + last.duration)
-    } catch {
-      // Not every implementation accepts the change while updating.
-    }
-  }
-
-  // ---- ABR ----
-
-  private pickLevel(): number {
-    const levels = this.all.map((l) => l.info)
-    const maxHeight = this.opts.capToPlayerSize === false
-      ? undefined
-      : Math.round((this.media.clientHeight || 0) * (window.devicePixelRatio || 1)) || undefined
-    const ahead = bufferedEnd(this.media, this.media.currentTime) - this.media.currentTime
-    return chooseLevel(levels, this.est.estimate, {
-      maxHeight,
-      bufferAhead: this.est.hasSamples ? ahead : undefined,
-      current: this.level >= 0 ? this.level : undefined,
-    })
-  }
-
-  setLevel(index: number): void {
-    if (index < 0) {
-      this.autoLevel = true
-      return
-    }
-    if (index >= this.all.length) return
-    this.autoLevel = false
-    if (index === this.level) return
-    this.switchTo(index, true)
-  }
-
-  private switchTo(index: number, flush: boolean): void {
-    this.level = index
-    this.opts.onLevelSwitched?.(index)
-    if (flush) {
-      this.segmentAbort?.abort()
-      const keepUntil = this.media.currentTime + 1
-      if (bufferedEnd(this.media, this.media.currentTime) > keepUntil) {
+  /** Switches to another variant / rendition; `flush` drops what is buffered ahead (or everything). */
+  switchSource(source: Source, flush: 'none' | 'ahead' | 'all'): void {
+    const previous = this.source.playlist
+    this.source = source
+    this.segmentAbort?.abort()
+    this.last = null
+    this.ended = false
+    if (flush !== 'none' && this.sb) {
+      const t = this.engine.media.currentTime
+      const keepUntil = flush === 'all' ? 0 : t + 1
+      if (flush === 'all' || this.bufferedEnd(t) > keepUntil) {
         this.enqueue({ kind: 'remove', start: keepUntil, end: Infinity }).catch(() => {})
       }
-      this.last = null
     }
-    this.loadPlaylist(index).then(() => this.tick(), (e) => this.fail(e))
+    this.loadPlaylist(source).then((pl) => {
+      if (previous && previous !== pl && this.kind === 'audio' && !source.playlist?.endList) alignTimes(previous, pl)
+      if (this.engine.live) this.scheduleReload(pl.targetDuration)
+      this.tick()
+    }, (e) => this.engine.fail(e))
   }
 
   // ---- source buffer ----
 
-  private ensureBuffer(mime: string): void {
-    if (!this.ms) return
+  ensureBuffer(mime: string): void {
+    const ms = this.engine.ms
+    if (!ms) return
     if (!this.sb) {
       try {
-        this.sb = this.ms.addSourceBuffer(mime)
+        this.sb = ms.addSourceBuffer(mime)
       } catch (e) {
         throw new HlsError('codec', `${mime}: ${(e as Error).message}`)
       }
       this.mime = mime
       this.sb.addEventListener('updateend', this.onUpdateEnd)
       this.sb.addEventListener('error', this.onBufferError)
+      this.engine.bufferCreated()
       return
     }
     if (mime !== this.mime) {
@@ -407,18 +301,25 @@ class HlsEngine implements HlsSession {
     }
   }
 
-  private enqueue(op: Op): Promise<void> {
+  enqueue(op: Op): Promise<void> {
     return new Promise((resolve, reject) => {
       this.queue.push({ op, resolve, reject })
       this.pump()
     })
   }
 
+  private async append(data: Uint8Array): Promise<void> {
+    // Every SourceBuffer must exist before the first media data reaches any of them.
+    await this.engine.buffersReady()
+    await this.enqueue({ kind: 'append', data })
+  }
+
   private onUpdateEnd = (): void => {
     const done = this.running
     this.running = null
     done?.resolve()
     this.pump()
+    this.engine.maybeEndOfStream()
   }
 
   private onBufferError = (): void => {
@@ -429,7 +330,7 @@ class HlsEngine implements HlsSession {
 
   private pump(): void {
     const sb = this.sb
-    const ms = this.ms
+    const ms = this.engine.ms
     if (!sb || !ms || this.running || sb.updating) return
     while (this.queue.length) {
       const item = this.queue.shift() as QueuedOp
@@ -441,8 +342,7 @@ class HlsEngine implements HlsSession {
           return
         }
         if (op.kind === 'remove') {
-          const end = Math.min(op.end, Number.isFinite(ms.duration) ? ms.duration : op.end)
-          if (end > op.start) {
+          if (this.buffered().some(([, e]) => e > op.start)) {
             this.running = item
             sb.remove(op.start, op.end)
             return
@@ -454,14 +354,11 @@ class HlsEngine implements HlsSession {
         } else if (op.kind === 'changeType') {
           sb.changeType(op.mime)
           item.resolve()
-        } else if (op.kind === 'eos') {
-          if (ms.readyState === 'open') ms.endOfStream()
-          item.resolve()
         }
       } catch (e) {
         this.running = null
         if ((e as DOMException)?.name === 'QuotaExceededError' && op.kind === 'append') {
-          const behind = this.media.currentTime - 5
+          const behind = this.engine.media.currentTime - 5
           if (behind > 0) {
             this.queue.unshift({ op: { kind: 'remove', start: 0, end: behind }, resolve: () => {}, reject: () => {} }, item)
             continue
@@ -474,138 +371,110 @@ class HlsEngine implements HlsSession {
 
   // ---- loading loop ----
 
-  private onSeeking = (): void => {
-    const t = this.media.currentTime
-    if (bufferedEnd(this.media, t) - t > 0.1) return
+  onSeeking(t: number): void {
+    if (this.bufferedEnd(t) - t > 0.1) return
     this.segmentAbort?.abort()
     this.last = null
     this.ended = false
-    setTimeout(() => this.tick(), 0)
   }
 
   private nextSegment(pl: HlsMediaPlaylist): HlsSegment | undefined {
     const segs = pl.segments
     if (!segs.length) return undefined
-    if (this.last && this.last.level === this.level) {
-      const next = segs.find((s) => s.sn === (this.last as { sn: number }).sn + 1)
+    const last = this.last
+    if (last && last.source === this.source.id) {
+      const next = segs.find((s) => s.sn === last.sn + 1)
       if (next) return next
-      if (segs[segs.length - 1].sn <= this.last.sn) return undefined
+      if (segs[segs.length - 1].sn <= last.sn) return undefined
     }
-    if (this.live && !this.startPositioned && !this.last) {
-      return segs[Math.max(0, segs.length - 3)]
+    if (this.engine.live && !this.engine.startPositioned && !last) {
+      // Live start: the main stream picks the window, the audio stream follows its playlist time.
+      if (this.kind === 'main') return segs[Math.max(0, segs.length - 3)]
     }
-    const t = bufferedEnd(this.media, this.media.currentTime)
+    const t = this.bufferedEnd(this.engine.targetTime())
     if (t < segs[0].start) return segs[0]
     return segs.find((s) => t >= s.start - 0.05 && t < s.start + s.duration - 0.05)
   }
 
-  private tick(): void {
-    if (this.destroyed || this.failed || this.loading || !this.ms) return
-    const level = this.all[this.level]
-    const pl = level?.playlist
+  tick(): void {
+    const engine = this.engine
+    if (engine.destroyed || engine.failed || this.loading || !engine.ms) return
+    if (this.kind === 'audio' && engine.live && !engine.startPositioned) return
+    const pl = this.source.playlist
     if (!pl) return
-    const pos = this.media.currentTime
-    this.jumpGap(pos)
+    const pos = engine.media.currentTime
     this.evict(pos)
-    const ahead = bufferedEnd(this.media, pos) - pos
-    if (ahead >= this.opts.maxBufferAhead) return
+    if (this.bufferedEnd(pos) - pos >= engine.opts.maxBufferAhead) return
     const seg = this.nextSegment(pl)
     if (!seg) {
-      if (pl.endList && !this.ended && this.last) {
-        this.ended = true
-        this.enqueue({ kind: 'eos' }).catch(() => {})
-      }
+      if (pl.endList && this.last) this.ended = true
+      engine.maybeEndOfStream()
       return
     }
+    this.ended = false
     this.loading = true
-    this.loadSegment(seg, this.level)
+    const sourceId = this.source.id
+    this.loadSegment(seg, sourceId)
       .catch((e) => {
-        if (!isAbort(e)) this.fail(e)
+        if (!isAbort(e)) engine.fail(e)
       })
       .finally(() => {
         this.loading = false
-        if (!this.destroyed) setTimeout(() => this.tick(), 0)
+        if (!engine.destroyed) setTimeout(() => this.tick(), 0)
       })
   }
 
-  private stallPos = -1
-  private stallSince = 0
-
-  private jumpGap(pos: number): void {
-    const ranges = rangesOf(this.media)
-    if (!ranges.length || this.media.seeking) return
-    const current = ranges.find(([s, e]) => pos >= s && pos < e)
-    const ahead = ranges.find(([s]) => s > pos)
-    if (!current) {
-      // The first append of a live window, or the playhead sits in a hole between fragments.
-      if (ahead && (ahead[0] - pos < 1 || (!this.startPositioned && this.live))) this.media.currentTime = ahead[0] + 0.01
-      return
-    }
-    // Stuck just before the end of a range with the next one right after it (timestamp jitter at a discontinuity).
-    const stuck = !this.media.paused && this.media.readyState < 3
-    if (!stuck) {
-      this.stallPos = -1
-      return
-    }
-    if (this.stallPos !== pos) {
-      this.stallPos = pos
-      this.stallSince = performance.now()
-      return
-    }
-    if (performance.now() - this.stallSince < 500) return
-    if (ahead && current[1] - pos < 0.5 && ahead[0] - current[1] < 1) this.media.currentTime = ahead[0] + 0.01
-  }
-
   private evict(pos: number): void {
-    const ranges = rangesOf(this.media)
+    const ranges = this.buffered()
     if (!ranges.length || !this.sb || this.queue.some((q) => q.op.kind === 'remove')) return
-    const limit = pos - this.opts.maxBufferBehind
+    const limit = pos - this.engine.opts.maxBufferBehind
     if (ranges[0][0] < limit - 1) this.enqueue({ kind: 'remove', start: 0, end: limit }).catch(() => {})
   }
 
-  private async loadInit(map: HlsInitSection, levelIndex: number, signal: AbortSignal): Promise<void> {
-    const key = `${levelIndex}|${map.uri}|${map.byteRange?.offset ?? ''}`
+  private async loadInit(map: HlsInitSection, signal: AbortSignal): Promise<void> {
+    const key = `${this.source.id}|${map.uri}|${map.byteRange?.offset ?? ''}`
     if (key === this.appendedInit) return
-    let { data } = await this.fetchBytes(map.uri, map.byteRange, signal)
+    let { data } = await this.engine.fetchBytes(map.uri, map.byteRange, signal)
     if (map.key?.method === 'AES-128' && !isFmp4(data)) {
-      data = new Uint8Array(await decryptSegment(data.slice().buffer, map.key, 0, this.loadKey))
+      data = new Uint8Array(await decryptSegment(data.slice().buffer, map.key, 0, this.engine.loadKey))
     }
     this.tracks = parseInit(data)
-    const variantCodecs = this.all[levelIndex].variant.codecs
-    const codecs = this.tracks.map((t) => t.codec).filter(Boolean).join(',') || variantCodecs || ''
-    const kind = this.tracks.some((t) => t.kind === 'video') || !this.tracks.length ? 'video' : 'audio'
+    const codecs = this.tracks.map((t) => t.codec).filter(Boolean).join(',') || this.source.codecs || ''
+    const kind = this.tracks.some((t) => t.kind === 'video') ? 'video' : this.tracks.length ? 'audio' : this.kind === 'audio' ? 'audio' : 'video'
     this.ensureBuffer(`${kind}/mp4; codecs="${codecs}"`)
-    await this.enqueue({ kind: 'append', data })
+    await this.append(data)
     this.appendedInit = key
   }
 
-  private async loadSegment(seg: HlsSegment, levelIndex: number): Promise<void> {
+  private async loadSegment(seg: HlsSegment, sourceId: number): Promise<void> {
+    const engine = this.engine
     const ctrl = new AbortController()
     this.segmentAbort = ctrl
     const abortAll = (): void => ctrl.abort()
-    this.abort.signal.addEventListener('abort', abortAll, { once: true })
+    engine.abort.signal.addEventListener('abort', abortAll, { once: true })
     try {
       if (seg.key && seg.key.method !== 'AES-128') {
         throw new HlsError('encrypted', `${seg.key.method} encryption is not supported`)
       }
       if (seg.key && !aesSupported()) throw new HlsError('encrypted', 'WebCrypto is not available')
-      if (seg.map) await this.loadInit(seg.map, levelIndex, ctrl.signal)
+      if (seg.map) await this.loadInit(seg.map, ctrl.signal)
 
-      const { data: raw, ms } = await this.fetchBytes(seg.uri, seg.byteRange, ctrl.signal)
-      this.est.sample({ bytes: raw.length, ms })
+      const { data: raw, ms } = await engine.fetchBytes(seg.uri, seg.byteRange, ctrl.signal)
+      if (this.kind === 'main') engine.est.sample({ bytes: raw.length, ms })
       let data = raw
-      if (seg.key) data = new Uint8Array(await decryptSegment(raw.slice().buffer, seg.key, seg.sn, this.loadKey))
+      if (seg.key) data = new Uint8Array(await decryptSegment(raw.slice().buffer, seg.key, seg.sn, engine.loadKey))
       if (ctrl.signal.aborted) return
 
-      const sequential = !!this.last && this.last.level === levelIndex && this.last.sn + 1 === seg.sn && this.last.cc === seg.cc
+      const sequential = !!this.last && this.last.source === sourceId && this.last.sn + 1 === seg.sn && this.last.cc === seg.cc
       let startTime: number | null
-      if (isMpegTs(data)) {
-        if (this.opts.transmuxer === null) throw new HlsError('codec', 'MPEG-TS segments need a transmuxer')
-        this.transmuxer ??= (this.opts.transmuxer ?? createTsTransmuxer)()
+      if (isMpegTs(data) || (!isFmp4(data) && isPackedAudio(data))) {
+        if (engine.opts.transmuxer === null) throw new HlsError('codec', 'MPEG-TS segments need a transmuxer')
+        this.transmuxer ??= (engine.opts.transmuxer ?? createTsTransmuxer)()
+        if (!this.transmuxer.canHandle(data)) throw new HlsError('codec', 'The transmuxer cannot read this segment')
         const out = this.transmuxer.push(data, { discontinuity: !sequential })
         if (out.init) {
           this.ensureBuffer(out.mimeType)
-          await this.enqueue({ kind: 'append', data: out.init })
+          await this.append(out.init)
           this.appendedInit = ''
         }
         this.tracks = out.tracks
@@ -618,34 +487,392 @@ class HlsEngine implements HlsSession {
         throw new HlsError('codec', 'Unknown segment container')
       }
 
-      // One offset per discontinuity domain maps media time onto the playlist timeline.
       if (startTime !== null) {
-        let offset = this.offsets.get(seg.cc)
-        if (offset === undefined) {
-          offset = seg.start - startTime
-          this.offsets.set(seg.cc, offset)
-        }
+        const offset = engine.offsetFor(seg, startTime)
         if (this.sb && Math.abs(this.sb.timestampOffset - offset) > 1e-3) await this.enqueue({ kind: 'offset', value: offset })
+        // Renditions share the media clock: an audio playlist whose times drifted from it is re-anchored.
+        const actual = startTime + offset
+        const drift = actual - seg.start
+        if (this.kind === 'audio' && Math.abs(drift) > Math.max(0.5, seg.duration / 2) && this.source.playlist) {
+          for (const s of this.source.playlist.segments) s.start += drift
+        }
       }
       if (ctrl.signal.aborted) return
-      await this.enqueue({ kind: 'append', data })
-      this.last = { level: levelIndex, sn: seg.sn, cc: seg.cc }
+      await this.append(data)
+      this.last = { source: sourceId, sn: seg.sn, cc: seg.cc }
+
+      if (this.kind === 'main' && !engine.startPositioned) {
+        engine.startPositioned = true
+        if (engine.live) {
+          engine.media.currentTime = seg.start + 0.01
+          engine.updateSeekable(this.source.playlist as HlsMediaPlaylist)
+        }
+        engine.tickAll()
+      }
+      if (this.kind === 'main') engine.afterMainSegment()
+    } finally {
+      engine.abort.signal.removeEventListener('abort', abortAll)
+      if (this.segmentAbort === ctrl) this.segmentAbort = null
+    }
+  }
+
+  destroy(): void {
+    this.segmentAbort?.abort()
+    if (this.reloadTimer) clearTimeout(this.reloadTimer)
+    for (const q of this.queue) q.reject(new DOMException('Aborted', 'AbortError'))
+    this.queue = []
+    this.sb = null
+  }
 
-      if (!this.startPositioned) {
-        this.startPositioned = true
-        if (this.live) this.media.currentTime = seg.start + 0.01
-        if (this.live) this.updateSeekable(this.all[levelIndex].playlist as HlsMediaPlaylist)
+  stopTimers(): void {
+    if (this.reloadTimer) clearTimeout(this.reloadTimer)
+  }
+}
+
+class HlsEngine implements HlsSession {
+  readonly native = false
+  live = false
+  levels: HlsLevel[] = []
+  level = -1
+  autoLevel = true
+  audioTracks: HlsAudioTrack[] = []
+  audioTrack = -1
+
+  readonly opts: Required<Pick<HlsOptions, 'maxBufferAhead' | 'maxBufferBehind' | 'retries'>> & HlsOptions
+  readonly abort = new AbortController()
+  readonly est: BandwidthEstimator
+  ms: MediaSource | null = null
+  destroyed = false
+  failed = false
+  startPositioned = false
+  private readonly fetchFn: typeof fetch
+  private all: Level[] = []
+  private renditions: HlsRendition[] = []
+  private audioSources: AudioRendition[] = []
+  private streams: Stream[] = []
+  private main: Stream | null = null
+  private audio: Stream | null = null
+  private objectUrl = ''
+  private offsets = new Map<number, number>()
+  private timer: ReturnType<typeof setInterval> | null = null
+  private created = 0
+  private readyWaiters: (() => void)[] = []
+  private stallPos = -1
+  private stallSince = 0
+
+  constructor(readonly media: HTMLMediaElement, private readonly url: string, options: HlsOptions) {
+    this.opts = { maxBufferAhead: 30, maxBufferBehind: 30, retries: 3, ...options }
+    this.est = new BandwidthEstimator(options.initialBandwidth ?? 1_000_000)
+    this.fetchFn = options.fetch ?? ((...args) => fetch(...args))
+    this.media.addEventListener('seeking', this.onSeeking)
+    this.start().catch((e) => this.fail(e))
+  }
+
+  get bandwidth(): number {
+    return this.est.estimate
+  }
+
+  // ---- lifecycle ----
+
+  private async start(): Promise<void> {
+    const MS = getMediaSource()
+    if (!MS) throw new HlsError('mse', 'MediaSource is not available')
+    const text = await this.fetchText(this.url)
+    const parsed = parsePlaylist(text, this.url)
+    if (parsed.type === 'master') {
+      const supported = (codecs: string): boolean =>
+        MS.isTypeSupported(`video/mp4; codecs="${codecs}"`) || MS.isTypeSupported(`audio/mp4; codecs="${codecs}"`)
+      const variants = parsed.variants
+        .filter((v) => !v.codecs || supported(v.codecs))
+        .sort((a, b) => a.bandwidth - b.bandwidth)
+      if (!variants.length) throw new HlsError('codec', 'No variant has codecs this browser supports')
+      this.all = variants.map((variant, index) => ({
+        id: index,
+        uri: variant.uri,
+        codecs: variant.codecs,
+        variant,
+        info: { index, bandwidth: variant.bandwidth, width: variant.width, height: variant.height, codecs: variant.codecs, label: levelLabel(variant) },
+      }))
+      this.renditions = parsed.media.filter((m) => m.type === 'AUDIO')
+    } else {
+      const variant: HlsVariant = { uri: this.url, bandwidth: 0 }
+      this.all = [{ id: 0, uri: this.url, variant, playlist: parsed, info: { index: 0, bandwidth: 0, label: 'auto' } }]
+    }
+    this.levels = this.all.map((l) => l.info)
+    this.opts.onLevels?.(this.levels)
+
+    const start = this.opts.startLevel ?? -1
+    this.autoLevel = start < 0
+    this.level = start >= 0 && start < this.all.length ? start : this.pickLevel()
+    this.buildAudioTracks(this.all[this.level].variant.audio)
+
+    const ms = new MS()
+    this.ms = ms
+    if ('disableRemotePlayback' in this.media && (window as unknown as { ManagedMediaSource?: unknown }).ManagedMediaSource === MS) {
+      this.media.disableRemotePlayback = true
+    }
+    this.objectUrl = URL.createObjectURL(ms)
+    const opened = new Promise<void>((resolve) => ms.addEventListener('sourceopen', () => resolve(), { once: true }))
+    this.media.src = this.objectUrl
+    await opened
+    if (this.destroyed) return
+
+    this.main = new Stream(this, 'main', this.all[this.level])
+    this.streams = [this.main]
+    const audioSource = this.audioSources[this.audioTrack]
+    if (audioSource) {
+      this.audio = new Stream(this, 'audio', audioSource)
+      this.streams.push(this.audio)
+    }
+    const [pl] = await Promise.all(this.streams.map((s) => s.loadPlaylist()))
+    this.live = !pl.endList
+    if (!this.live) ms.duration = pl.totalDuration
+    this.opts.onLevelSwitched?.(this.level)
+    if (this.audio) this.opts.onAudioTrackSwitched?.(this.audioTrack)
+    if (this.live) for (const s of this.streams) s.scheduleReload((s.source.playlist as HlsMediaPlaylist).targetDuration)
+    this.timer = setInterval(() => this.tickAll(), 250)
+    this.tickAll()
+  }
+
+  private buildAudioTracks(group: string | undefined): void {
+    const list = group ? this.renditions.filter((r) => r.groupId === group && r.uri) : []
+    this.audioSources = list.map((rendition, index) => ({
+      id: 1000 + index,
+      uri: rendition.uri as string,
+      rendition,
+      info: { index, label: rendition.name || rendition.language || `#${index + 1}`, language: rendition.language, default: !!rendition.default },
+    }))
+    this.audioTracks = this.audioSources.map((a) => a.info)
+    const preferred = this.audioTrack >= 0 ? this.audioSources[this.audioTrack]?.rendition.language ?? this.opts.audioLanguage : this.opts.audioLanguage
+    this.audioTrack = pickAudioRendition(list, preferred)
+    this.opts.onAudioTracks?.(this.audioTracks)
+  }
+
+  destroy(): void {
+    if (this.destroyed) return
+    this.destroyed = true
+    this.abort.abort()
+    if (this.timer) clearInterval(this.timer)
+    this.media.removeEventListener('seeking', this.onSeeking)
+    for (const s of this.streams) s.destroy()
+    if (this.objectUrl) {
+      this.media.removeAttribute('src')
+      this.media.load()
+      URL.revokeObjectURL(this.objectUrl)
+    }
+    this.ms = null
+  }
+
+  fail(e: unknown): void {
+    if (this.destroyed || isAbort(e) || this.failed) return
+    this.failed = true
+    let err: HlsError
+    if (e instanceof HlsError) err = e
+    else if (e instanceof HlsParseError) err = new HlsError('manifest', e.message)
+    else if (e instanceof TransmuxError) err = new HlsError('codec', e.message)
+    else if ((e as DOMException)?.name === 'NotSupportedError') err = new HlsError('codec', (e as Error).message)
+    else err = new HlsError('network', (e as Error)?.message ?? String(e))
+    if (this.timer) clearInterval(this.timer)
+    for (const s of this.streams) s.stopTimers()
+    this.opts.onError?.(err)
+  }
+
+  // ---- shared services for the streams ----
+
+  bufferCreated(): void {
+    this.created++
+    if (this.created >= this.streams.length) this.readyWaiters.splice(0).forEach((r) => r())
+  }
+
+  buffersReady(): Promise<void> {
+    if (this.created >= this.streams.length) return Promise.resolve()
+    return new Promise((resolve) => this.readyWaiters.push(resolve))
+  }
+
+  /** One timestamp offset per discontinuity domain, shared by all streams so audio and video stay in sync. */
+  offsetFor(seg: HlsSegment, startTime: number): number {
+    let offset = this.offsets.get(seg.cc)
+    if (offset === undefined) {
+      offset = seg.start - startTime
+      this.offsets.set(seg.cc, offset)
+    }
+    return offset
+  }
+
+  targetTime(): number {
+    return this.media.currentTime
+  }
+
+  tickAll(): void {
+    if (this.destroyed || this.failed) return
+    this.jumpGap(this.media.currentTime)
+    for (const s of this.streams) s.tick()
+  }
+
+  maybeEndOfStream(): void {
+    const ms = this.ms
+    if (!ms || ms.readyState !== 'open' || this.live) return
+    if (this.streams.length && this.streams.every((s) => s.ended && s.idle)) {
+      try {
+        ms.endOfStream()
+      } catch {
+        // A buffer started updating meanwhile; the next tick retries.
       }
+    }
+  }
 
-      if (this.autoLevel && this.all.length > 1) {
-        const next = this.pickLevel()
-        if (next !== this.level) this.switchTo(next, false)
+  async request(url: string, range: HlsByteRange | undefined, signal: AbortSignal): Promise<Response> {
+    const headers: Record<string, string> = {}
+    if (range) headers.Range = `bytes=${range.offset}-${range.offset + range.length - 1}`
+    let attempt = 0
+    for (;;) {
+      try {
+        const res = await this.fetchFn(url, { headers, signal })
+        if (res.ok) return res
+        if (!RETRYABLE(res.status) || attempt >= this.opts.retries) {
+          throw new HlsError('network', `HTTP ${res.status} for ${url}`)
+        }
+      } catch (e) {
+        if (isAbort(e) || e instanceof HlsError || attempt >= this.opts.retries) throw e
       }
-    } finally {
-      this.abort.signal.removeEventListener('abort', abortAll)
-      if (this.segmentAbort === ctrl) this.segmentAbort = null
+      await sleep(500 * 2 ** attempt, signal)
+      attempt++
     }
   }
+
+  async fetchText(url: string): Promise<string> {
+    return (await this.request(url, undefined, this.abort.signal)).text()
+  }
+
+  async fetchBytes(url: string, range: HlsByteRange | undefined, signal: AbortSignal): Promise<{ data: Uint8Array, ms: number }> {
+    const t0 = performance.now()
+    const res = await this.request(url, range, signal)
+    const buf = await res.arrayBuffer()
+    let data = new Uint8Array(buf)
+    // A server that ignores Range sends the whole file.
+    if (range && res.status === 200 && data.length > range.length) data = data.subarray(range.offset, range.offset + range.length)
+    return { data, ms: performance.now() - t0 }
+  }
+
+  loadKey = async (uri: string): Promise<ArrayBuffer> => {
+    const { data } = await this.fetchBytes(uri, undefined, this.abort.signal)
+    return data.slice().buffer
+  }
+
+  updateSeekable(pl: HlsMediaPlaylist): void {
+    const ms = this.ms as (MediaSource & { setLiveSeekableRange?: (s: number, e: number) => void }) | null
+    if (!ms || ms.readyState !== 'open' || !pl.segments.length) return
+    const first = pl.segments[0]
+    const last = pl.segments[pl.segments.length - 1]
+    try {
+      if (ms.duration !== Infinity && !this.streams.some((s) => s.sb?.updating)) ms.duration = Infinity
+      ms.setLiveSeekableRange?.(first.start, last.start + last.duration)
+    } catch {
+      // Not every implementation accepts the change while updating.
+    }
+  }
+
+  // ---- ABR and switching ----
+
+  private pickLevel(): number {
+    const levels = this.all.map((l) => l.info)
+    const maxHeight = this.opts.capToPlayerSize === false
+      ? undefined
+      : Math.round((this.media.clientHeight || 0) * (window.devicePixelRatio || 1)) || undefined
+    const t = this.media.currentTime
+    const ahead = this.main ? this.main.bufferedEnd(t) - t : 0
+    return chooseLevel(levels, this.est.estimate, {
+      maxHeight,
+      bufferAhead: this.est.hasSamples ? ahead : undefined,
+      current: this.level >= 0 ? this.level : undefined,
+    })
+  }
+
+  afterMainSegment(): void {
+    if (this.autoLevel && this.all.length > 1) {
+      const next = this.pickLevel()
+      if (next !== this.level) this.switchTo(next, false)
+    }
+  }
+
+  setLevel(index: number): void {
+    if (index < 0) {
+      this.autoLevel = true
+      return
+    }
+    if (index >= this.all.length) return
+    this.autoLevel = false
+    if (index === this.level) return
+    this.switchTo(index, true)
+  }
+
+  private switchTo(index: number, flush: boolean): void {
+    const prevGroup = this.all[this.level]?.variant.audio
+    this.level = index
+    this.opts.onLevelSwitched?.(index)
+    this.main?.switchSource(this.all[index], flush ? 'ahead' : 'none')
+    const group = this.all[index].variant.audio
+    if (group !== prevGroup && this.audio) {
+      // Another audio group: keep the same language / name.
+      const before = this.audioSources[this.audioTrack]?.rendition
+      this.buildAudioTracks(group)
+      const same = this.audioSources.findIndex((a) => a.rendition.language === before?.language && a.rendition.name === before?.name)
+      if (same >= 0) this.audioTrack = same
+      const src = this.audioSources[this.audioTrack]
+      if (src) this.audio.switchSource(src, 'all')
+      this.opts.onAudioTrackSwitched?.(this.audioTrack)
+    }
+  }
+
+  stats(): HlsStats {
+    return {
+      buffered: { main: this.main?.buffered() ?? [], ...(this.audio ? { audio: this.audio.buffered() } : {}) },
+      level: this.level,
+      audioTrack: this.audioTrack,
+      bandwidth: this.est.estimate,
+    }
+  }
+
+  setAudioTrack(index: number): void {
+    const src = this.audioSources[index]
+    if (!src || index === this.audioTrack || !this.audio) return
+    this.audioTrack = index
+    this.audio.switchSource(src, 'all')
+    this.opts.onAudioTrackSwitched?.(index)
+  }
+
+  // ---- playback position ----
+
+  private onSeeking = (): void => {
+    const t = this.media.currentTime
+    for (const s of this.streams) s.onSeeking(t)
+    setTimeout(() => this.tickAll(), 0)
+  }
+
+  private jumpGap(pos: number): void {
+    const ranges = rangesOf(this.media.buffered)
+    if (!ranges.length || this.media.seeking) return
+    const current = ranges.find(([s, e]) => pos >= s && pos < e)
+    const ahead = ranges.find(([s]) => s > pos)
+    if (!current) {
+      // The first append of a live window, or the playhead sits in a hole between fragments.
+      if (ahead && (ahead[0] - pos < 1 || (!this.startPositioned && this.live))) this.media.currentTime = ahead[0] + 0.01
+      return
+    }
+    // Stuck just before the end of a range with the next one right after it (timestamp jitter at a discontinuity).
+    const stuck = !this.media.paused && this.media.readyState < 3
+    if (!stuck) {
+      this.stallPos = -1
+      return
+    }
+    if (this.stallPos !== pos) {
+      this.stallPos = pos
+      this.stallSince = performance.now()
+      return
+    }
+    if (performance.now() - this.stallSince < 500) return
+    if (ahead && current[1] - pos < 0.5 && ahead[0] - current[1] < 1) this.media.currentTime = ahead[0] + 0.01
+  }
 }
 
 /** Keeps playlist times stable across reloads and renditions by matching media sequence numbers. */
@@ -671,28 +898,70 @@ export function alignTimes(reference: HlsMediaPlaylist, next: HlsMediaPlaylist):
   for (const s of next.segments) s.start += shift
 }
 
-/** Plays an HLS stream in `media`: natively where the browser can, otherwise through MediaSource. */
-export function attachHls(media: HTMLMediaElement, url: string, options: HlsOptions = {}): HlsSession {
-  if (options.preferNative !== false && canPlayNativeHls(media)) {
-    media.src = url
-    return {
-      native: true,
-      get live() { return media.duration === Infinity },
-      levels: [],
-      level: -1,
-      autoLevel: true,
-      bandwidth: 0,
-      setLevel: () => {},
-      destroy: () => {
-        media.removeAttribute('src')
-        media.load()
-      },
+type NativeAudioTrack = { id: string, label: string, language: string, enabled: boolean, kind: string }
+type NativeAudioTrackList = EventTarget & { length: number, [index: number]: NativeAudioTrack }
+
+function nativeSession(media: HTMLMediaElement, url: string, options: HlsOptions): HlsSession {
+  media.src = url
+  const list = (media as unknown as { audioTracks?: NativeAudioTrackList }).audioTracks
+  const session = {
+    native: true as const,
+    get live() { return media.duration === Infinity },
+    levels: [] as HlsLevel[],
+    level: -1,
+    autoLevel: true,
+    audioTracks: [] as HlsAudioTrack[],
+    audioTrack: -1,
+    bandwidth: 0,
+    setLevel: () => {},
+    stats: () => ({ buffered: { main: rangesOf(media.buffered) }, level: -1, audioTrack: session.audioTrack, bandwidth: 0 }),
+    setAudioTrack(index: number) {
+      if (!list || index < 0 || index >= list.length) return
+      for (let i = 0; i < list.length; i++) list[i].enabled = i === index
+    },
+    destroy() {
+      list?.removeEventListener('addtrack', sync)
+      list?.removeEventListener('removetrack', sync)
+      list?.removeEventListener('change', sync)
+      media.removeAttribute('src')
+      media.load()
+    },
+  }
+  // Safari exposes the stream's audio renditions as media.audioTracks.
+  function sync(): void {
+    if (!list) return
+    const tracks: HlsAudioTrack[] = []
+    let current = -1
+    for (let i = 0; i < list.length; i++) {
+      const t = list[i]
+      tracks.push({ index: i, label: t.label || t.language || `#${i + 1}`, language: t.language || undefined, default: t.kind === 'main' })
+      if (t.enabled) current = i
+    }
+    const changed = tracks.length !== session.audioTracks.length
+    session.audioTracks = tracks
+    if (changed) options.onAudioTracks?.(tracks)
+    if (current !== session.audioTrack) {
+      session.audioTrack = current
+      options.onAudioTrackSwitched?.(current)
     }
   }
+  list?.addEventListener('addtrack', sync)
+  list?.addEventListener('removetrack', sync)
+  list?.addEventListener('change', sync)
+  return session
+}
+
+/** Plays an HLS stream in `media`: natively where the browser can, otherwise through MediaSource. */
+export function attachHls(media: HTMLMediaElement, url: string, options: HlsOptions = {}): HlsSession {
+  if (options.preferNative !== false && canPlayNativeHls(media)) return nativeSession(media, url, options)
   if (!getMediaSource()) {
     const err = new HlsError('mse', 'MediaSource is not available')
     queueMicrotask(() => options.onError?.(err))
-    return { native: false, live: false, levels: [], level: -1, autoLevel: true, bandwidth: 0, setLevel: () => {}, destroy: () => {} }
+    return {
+      native: false, live: false, levels: [], level: -1, autoLevel: true, audioTracks: [], audioTrack: -1, bandwidth: 0,
+      setLevel: () => {}, setAudioTrack: () => {}, destroy: () => {},
+      stats: () => ({ buffered: { main: [] }, level: -1, audioTrack: -1, bandwidth: 0 }),
+    }
   }
   const absolute = typeof location !== 'undefined' ? new URL(url, location.href).href : url
   return new HlsEngine(media, absolute, options)
diff --git a/src/hls/index.ts b/src/hls/index.ts
index 16f3c52..678e8e6 100644
--- a/src/hls/index.ts
+++ b/src/hls/index.ts
@@ -1,7 +1,7 @@
 export {
-  attachHls, canPlayNativeHls, isHlsSupported, getMediaSource, alignTimes, HlsError,
+  attachHls, canPlayNativeHls, isHlsSupported, getMediaSource, alignTimes, pickAudioRendition, HlsError,
 } from './engine.js'
-export type { HlsErrorCode, HlsLevel, HlsOptions, HlsSession } from './engine.js'
+export type { HlsErrorCode, HlsLevel, HlsAudioTrack, HlsOptions, HlsSession, HlsStats } from './engine.js'
 export { parsePlaylist, parseAttributes, sequenceIv, HlsParseError } from './playlist.js'
 export type {
   HlsPlaylist, HlsMasterPlaylist, HlsMediaPlaylist, HlsVariant, HlsSegment, HlsKey, HlsByteRange, HlsInitSection, HlsRendition,
@@ -12,3 +12,4 @@ export { TsTransmuxer, createTsTransmuxer } from './ts/transmuxer.js'
 export { TransmuxError } from './transmux.js'
 export type { SegmentTransmuxer, TransmuxerFactory, TransmuxResult, TransmuxContext } from './transmux.js'
 export { isFmp4, isMpegTs, parseInit, fragmentStart } from './mp4.js'
+export { isPackedAudio, parsePackedAudio } from './ts/id3.js'
diff --git a/src/hls/playlist.ts b/src/hls/playlist.ts
index 138bb89..1a29eb9 100644
--- a/src/hls/playlist.ts
+++ b/src/hls/playlist.ts
@@ -61,6 +61,8 @@ export interface HlsRendition {
   language?: string
   uri?: string
   default?: boolean
+  autoselect?: boolean
+  channels?: string
 }
 
 export interface HlsMasterPlaylist {
@@ -158,6 +160,8 @@ function parseMaster(lines: string[], url: string): HlsMasterPlaylist {
         language: a.LANGUAGE,
         uri: a.URI ? resolve(a.URI, url) : undefined,
         default: a.DEFAULT === 'YES',
+        autoselect: a.AUTOSELECT === 'YES',
+        channels: a.CHANNELS,
       })
     }
   }
diff --git a/src/hls/ts/id3.ts b/src/hls/ts/id3.ts
new file mode 100644
index 0000000..7734e88
--- /dev/null
+++ b/src/hls/ts/id3.ts
@@ -0,0 +1,54 @@
+const PTS_OWNER = 'com.apple.streaming.transportStreamTimestamp'
+
+function syncsafe(d: Uint8Array, o: number): number {
+  return ((d[o] & 0x7f) << 21) | ((d[o + 1] & 0x7f) << 14) | ((d[o + 2] & 0x7f) << 7) | (d[o + 3] & 0x7f)
+}
+
+function isId3(d: Uint8Array, o: number): boolean {
+  return d.length >= o + 10 && d[o] === 0x49 && d[o + 1] === 0x44 && d[o + 2] === 0x33 && d[o + 3] < 0xff && d[o + 4] < 0xff
+}
+
+export function isAdtsSync(d: Uint8Array, o = 0): boolean {
+  return d.length > o + 1 && d[o] === 0xff && (d[o + 1] & 0xf6) === 0xf0
+}
+
+/** Packed audio (HLS "raw" AAC segments): ID3 tags followed by ADTS frames. */
+export function isPackedAudio(d: Uint8Array): boolean {
+  return isId3(d, 0) || isAdtsSync(d, 0)
+}
+
+export interface PackedAudio {
+  /** 90 kHz timestamp from the ID3 PRIV frame of Apple's transport stream timestamp. */
+  pts?: number
+  /** ADTS payload after the leading ID3 tags. */
+  data: Uint8Array
+}
+
+export function parsePackedAudio(d: Uint8Array): PackedAudio {
+  let o = 0
+  let pts: number | undefined
+  while (isId3(d, o)) {
+    const version = d[o + 3]
+    const size = syncsafe(d, o + 6)
+    const end = o + 10 + size
+    let f = o + 10
+    while (f + 10 <= end) {
+      const id = String.fromCharCode(d[f], d[f + 1], d[f + 2], d[f + 3])
+      const frameSize = version >= 4 ? syncsafe(d, f + 4) : ((d[f + 4] << 24) >>> 0) + (d[f + 5] << 16) + (d[f + 6] << 8) + d[f + 7]
+      if (!id.trim() || frameSize <= 0) break
+      const body = f + 10
+      if (id === 'PRIV') {
+        let z = body
+        while (z < body + frameSize && d[z] !== 0) z++
+        const owner = String.fromCharCode(...d.subarray(body, z))
+        if (owner === PTS_OWNER && z + 9 <= body + frameSize) {
+          const b = z + 1
+          pts = (d[b + 3] & 1) * 4294967296 + ((d[b + 4] << 24) >>> 0) + (d[b + 5] << 16) + (d[b + 6] << 8) + d[b + 7]
+        }
+      }
+      f = body + frameSize
+    }
+    o = end
+  }
+  return { pts, data: d.subarray(o) }
+}
diff --git a/src/hls/ts/transmuxer.ts b/src/hls/ts/transmuxer.ts
index 6057827..a8ccb12 100644
--- a/src/hls/ts/transmuxer.ts
+++ b/src/hls/ts/transmuxer.ts
@@ -2,6 +2,7 @@ import { isMpegTs, type Mp4TrackInfo } from '../mp4.js'
 import { TransmuxError, type SegmentTransmuxer, type TransmuxContext, type TransmuxResult } from '../transmux.js'
 import { audioSpecificConfig, parseAdts, type AdtsConfig } from './adts.js'
 import { demuxTs, STREAM_AAC, STREAM_H264, type DemuxState, type PesPacket } from './demux.js'
+import { isPackedAudio, parsePackedAudio } from './id3.js'
 import { avcCodec, nalType, NAL_AUD, NAL_IDR, NAL_PPS, NAL_SPS, parseSps, splitNals, toAvcc } from './h264.js'
 import { concatBytes, fragment, initSegment, type MuxSample, type MuxTrack } from './mp4mux.js'
 
@@ -10,6 +11,8 @@ const AUDIO_ID = 2
 const WRAP = 8589934592
 const FRAME = 1024
 
+interface Samples { base: number, samples: MuxSample[], payload: Uint8Array }
+
 interface VideoConfig { sps: Uint8Array, pps: Uint8Array, width: number, height: number, codec: string }
 
 function sameBytes(a: Uint8Array, b: Uint8Array): boolean {
@@ -31,7 +34,7 @@ export class TsTransmuxer implements SegmentTransmuxer {
   private videoDuration = 3000
 
   canHandle(data: Uint8Array): boolean {
-    return isMpegTs(data)
+    return isMpegTs(data) || isPackedAudio(data)
   }
 
   reset(): void {
@@ -56,6 +59,7 @@ export class TsTransmuxer implements SegmentTransmuxer {
       this.nextVideoDts = null
       this.nextAudioDts = null
     }
+    if (!isMpegTs(data)) return this.pushPacked(data)
     const res = demuxTs(data, this.demux)
     this.demux = res
     if (res.videoType !== undefined && res.videoType !== STREAM_H264) {
@@ -70,7 +74,22 @@ export class TsTransmuxer implements SegmentTransmuxer {
 
     const video = res.video.length ? this.videoSamples(res.video) : null
     const audio = res.audio.length ? this.audioSamples(res.audio) : null
+    return this.output(video, audio)
+  }
+
+  private pushPacked(data: Uint8Array): TransmuxResult {
+    const packed = parsePackedAudio(data)
+    if (packed.pts === undefined && this.nextAudioDts === null) {
+      throw new TransmuxError('Packed audio segment without an ID3 timestamp', 'format')
+    }
+    // Without a timestamp the segment continues the previous one.
+    const pts = packed.pts ?? Math.round(((this.nextAudioDts as number) * 90000) / (this.audio?.sampleRate ?? 90000))
+    const audio = this.audioSamples([{ pts, dts: pts, data: packed.data }])
+    if (!audio) throw new TransmuxError('No AAC frames in the packed audio segment', 'format')
+    return this.output(null, audio)
+  }
 
+  private output(video: Samples | null, audio: Samples | null): TransmuxResult {
     const tracks: MuxTrack[] = []
     const info: Mp4TrackInfo[] = []
     const codecs: string[] = []
@@ -113,7 +132,7 @@ export class TsTransmuxer implements SegmentTransmuxer {
     }
   }
 
-  private videoSamples(pes: PesPacket[]): { base: number, samples: MuxSample[], payload: Uint8Array } | null {
+  private videoSamples(pes: PesPacket[]): Samples | null {
     const units: { dts: number, pts: number, key: boolean, data: Uint8Array }[] = []
     let lastDts: number | null = null
     for (const p of pes) {
@@ -165,7 +184,7 @@ export class TsTransmuxer implements SegmentTransmuxer {
     return { base: units[0].dts, samples, payload: concatBytes(units.map((u) => u.data)) }
   }
 
-  private audioSamples(pes: PesPacket[]): { base: number, samples: MuxSample[], payload: Uint8Array } | null {
+  private audioSamples(pes: PesPacket[]): Samples | null {
     const frames: Uint8Array[] = []
     let firstPts: number | null = null
     let carry: Uint8Array = new Uint8Array(0)
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 9d5ef43..1804dde 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -141,6 +141,7 @@ export const en: UidLocale = {
     speed: 'Speed',
     normalSpeed: 'Normal',
     quality: 'Quality',
+    audioTrack: 'Audio',
     auto: 'Auto',
     captions: 'Subtitles',
     captionsOff: 'Off',
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
index e54501b..e395f3e 100644
--- a/src/locales/ru.ts
+++ b/src/locales/ru.ts
@@ -141,6 +141,7 @@ export const ru: UidLocale = {
     speed: 'Скорость',
     normalSpeed: 'Обычная',
     quality: 'Качество',
+    audioTrack: 'Аудиодорожка',
     auto: 'Авто',
     captions: 'Субтитры',
     captionsOff: 'Выкл.',
diff --git a/src/locales/types.ts b/src/locales/types.ts
index 662c6a3..9d887be 100644
--- a/src/locales/types.ts
+++ b/src/locales/types.ts
@@ -286,6 +286,7 @@ export interface UidMediaLocale {
   speed: string
   normalSpeed: string
   quality: string
+  audioTrack: string
   auto: string
   captions: string
   captionsOff: string