# GAB-168 · AudioTranscriptSync — « Transcript synchronisé (karaoke) »

**Archétype / renderer_key :** `media_viewer` (cartographie) · **module :** EdTechAudioLearning
**renderer_key à concevoir (pas de moteur kit)** : `media_viewer` n'a pas de moteur kit de référence dans le lot. Le renderer est dérivé directement de l'écran source GAB-168 du fichier PLAYABLE.
**Critère validé :** changer le JSON change le transcript sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-168/
  renderer.html            ← moteur transcript sync karaoke (ne pas modifier par instance)
  instance.example.json    ← SOURCE DE VÉRITÉ (contenu réel, à plat)
  schema.contract.json     ← contrat de validation
  README-contract.md       ← ce fichier
```

## Archétype pédagogique
- **Karaoke éducatif** : chaque phrase du transcript s'illumine (`.ts-seg.active`) au fur et à mesure de la lecture audio synthétisée.
- **Navigation segmentée** : clic sur un segment ou une puce numérotée = saut direct à ce moment.
- **Lecture simulée** : Web Speech API (`speechSynthesis`) en fallback de démonstration. En production, `audio_src.src` pointe vers un vrai fichier audio.

## Champs requis (instance, à plat)
`gab_id` · `segments[]{index, text}` · `title`

Optionnels : `audio_transcript_sync_id`, `info_label`, `info_text`, `speech_lang`, `speech_rate`, `audio_src`.

## Ce qui vient du JSON vs HTML
- **JSON** : textes de chaque segment, titre hero, libellés bannière info, langue de synthèse, vitesse.
- **HTML** : structure player, rendu transcript, chips de navigation, logique karaoke, layout.

## Garde-fous (child_safety)
- **TRANSCRIPT TOUJOURS VISIBLE** : doctrine module — le transcript textuel reste accessible même sans audio (accessibilité, RGPD, enfants).
- **Audio LOCAL** : la source utilise `speechSynthesis` locale. Aucun enregistrement, aucune transmission audio.
- **BLOCKED** si `segments` vide ou absent / `gab_id` absent.

## _TODO / Contenus manquants
- `audio_src.src` : l'écran source utilise `speechSynthesis` comme simulation. Aucune URL de fichier audio réel n'est présente dans le HTML source. À renseigner lors de l'intégration de vrais contenus audio (mp3/ogg).

## external_refs / dependencies
- **GAB-166** (AudioPlayerBasic) : lecteur audio simple, à utiliser pour introductions sans transcript.
- **GAB-167** (AudioPhraseRepeat) : répétition d'une phrase isolée, à privilégier pour drills de prononciation.
- **GAB-169** (AudioPronunciationFeedback) : feedback de prononciation — complémentaire, peut suivre GAB-168.

## QA à vérifier
1. Modifier un `text` dans `segments` → le segment affiché change sans toucher au HTML (critère d'or).
2. `segments:[]` → BLOCKED propre.
3. Clic segment 3 → `.ts-seg[data-i="2"]` passe `.active` + chip 3 `.active`.
4. Bouton lecture → segments s'illuminent séquentiellement.
5. Responsive 375px : player ne déborde pas.

## Source
`INDEX-300-audiolearning-GAB-166-170-PLAYABLE.html` (stage `data-tpl="168"`, handlers `tsPlay / tsStop / tsJump / tsHighlight`).