Wortgenaues Audio-Highlighting beim Mitlesen #12

New Issue

tobias · 2026-04-23T20:49:53+02:00

tobias commented

2026-04-23 20:49:53 +02:00

Ziel

Beim Abspielen eines Transkripts soll jedes Wort einzeln hervorgehoben werden, synchron zur Audio-Wiedergabe — wie bei Karaoke oder Apple Music Lyrics.

Voraussetzung

Wort-Level-Timestamps pro Episode. Die aktuellen SRTs haben nur Satz-Level-Timestamps (3–8 Sekunden pro Block). Für wortgenaues Highlighting brauchen wir Timestamps pro Wort (~200ms Granularität).

Umsetzung

Phase 1: Wort-Timestamps generieren

Batch-Neutranskription aller 19 NEU-DENKEN-Episoden + 96 LdN-Episoden mit mlx-whisper (bereits installiert)
Output-Format: JSON mit word-level Timestamps ({"word": "Wachstum", "start": 12.34, "end": 12.67})
Ergebnis in DB speichern: neue Tabelle words(paragraph_id, idx, word, start_time, end_time)

Phase 2: Frontend

Jedes Wort als <span data-start="..." data-end="..."> rendern
ontimeupdate vergleicht currentTime mit Wort-Timestamps
CSS-Klasse .word-active für aktuelles Wort (z.B. Hintergrund-Highlight)
Smooth Auto-Scroll bleibt wie bisher auf Absatz-Ebene

Aufwand

Transkription: ~4–6 Stunden Rechenzeit auf Mac Mini (M4, mlx-whisper)
Frontend: ~200 Zeilen JS + CSS
DB-Schema + Import-Script

Hardware

Mac Mini M-Series, 16 GB RAM, mlx-whisper 0.4.3 + mlx-metal 0.29.3

## Ziel Beim Abspielen eines Transkripts soll jedes Wort einzeln hervorgehoben werden, synchron zur Audio-Wiedergabe — wie bei Karaoke oder Apple Music Lyrics. ## Voraussetzung Wort-Level-Timestamps pro Episode. Die aktuellen SRTs haben nur Satz-Level-Timestamps (3–8 Sekunden pro Block). Für wortgenaues Highlighting brauchen wir Timestamps pro Wort (~200ms Granularität). ## Umsetzung ### Phase 1: Wort-Timestamps generieren - Batch-Neutranskription aller 19 NEU-DENKEN-Episoden + 96 LdN-Episoden mit mlx-whisper (bereits installiert) - Output-Format: JSON mit word-level Timestamps (`{"word": "Wachstum", "start": 12.34, "end": 12.67}`) - Ergebnis in DB speichern: neue Tabelle `words(paragraph_id, idx, word, start_time, end_time)` ### Phase 2: Frontend - Jedes Wort als `<span data-start="..." data-end="...">` rendern - `ontimeupdate` vergleicht `currentTime` mit Wort-Timestamps - CSS-Klasse `.word-active` für aktuelles Wort (z.B. Hintergrund-Highlight) - Smooth Auto-Scroll bleibt wie bisher auf Absatz-Ebene ### Aufwand - Transkription: ~4–6 Stunden Rechenzeit auf Mac Mini (M4, mlx-whisper) - Frontend: ~200 Zeilen JS + CSS - DB-Schema + Import-Script ## Hardware - Mac Mini M-Series, 16 GB RAM, mlx-whisper 0.4.3 + mlx-metal 0.29.3

tobias referenced this issue from a commit

2026-04-23 20:53:12 +02:00

#8 Multi-Podcast-Dashboard, #9 PWA, #10 Cross-Podcast-Links, #12 Wort-Timestamps

tobias referenced this issue from a commit

2026-04-23 22:29:43 +02:00

#12 Wort-Highlighting Frontend, #14 Leerstellen-Detektor, #15 Narrative Shift,

tobias referenced this issue from a commit

2026-04-28 00:31:19 +02:00

#12/#14/#15 webapp: AnalysisView, GapsView, ShiftsView; Mindmap+Timeline-Fallback

Sign in to join this conversation.