# GAB-171 · AudioReadingCoach — « Coach de lecture phrase par phrase »

**Archétype / renderer_key :** `media_viewer` (cartographie) · **module :** EdTechAudioLearning
**Critère validé :** changer le JSON change les phrases, tips et transcript sans modifier le HTML. ✅ check.py 12/12.

> ⚠️ **renderer_key à concevoir (pas de moteur kit)** — `media_viewer` n'a pas de moteur kit de référence dans la bibliothèque GAB. Le renderer a été dérivé directement de l'écran source (`INDEX-300-audiolearning-GAB-171-175-PLAYABLE.html`, stage `data-tpl="171"`, handlers `rcListen / rcPrev / rcNext / rcRender`).

## Pack (structure officielle par-GAB)
```
GAB-171/
  renderer.html          ← moteur coach lecture (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
```

## Champs requis (instance, à plat)
`gab_id` · `title` · `transcript` · `items[]{phrase_html, phrase_plain, tips[]}`

Optionnels : `audio_reading_coach_id`, `subtitle`, `listen_label`, `tts_rate`, `accessibility`.

## Ce qui vient du JSON vs HTML
- **JSON** : chaque phrase (`phrase_html` pour le rendu, `phrase_plain` pour TTS), les conseils (`tips[]`), le titre, le sous-titre, le transcript complet, le libellé du bouton d'écoute, la vitesse TTS.
- **HTML** : structure carte, navigation prev/next, bouton écoute, zone transcript, styles DS V2.

## Archétype : Coach de lecture phrase par phrase
Le moteur affiche une phrase à la fois extraite du tableau `items`. L'utilisateur navigue librement (prev/next). À chaque phrase, des tips typés (`respire` | `articule` | `accent`) sont colorés différemment. Le bouton d'écoute déclenche Web Speech API TTS sur `phrase_plain`. Le transcript complet est toujours visible en bas (accessibilité + SEO).

## Garde-fous
- **BLOCKED** si `items` absent ou vide, `transcript` absent, ou `title` absent.
- `phrase_plain` obligatoire dans chaque item pour le TTS (ne pas confondre avec `phrase_html` qui contient des balises `<mark>`).
- `tips[].type` enum strict (`respire`, `articule`, `accent`) — sert au style CSS via classe `.rc-tip.<type>`.
- Le transcript complet est **toujours visible** même sans interaction — c'est le fallback d'accessibilité.
- Audio = synthèse vocale navigateur (Web Speech API) — pas de fichier audio externe dans cette implémentation de référence.

## QA à vérifier
1. Modifier `phrase_html`/`tips` d'un item → rendu change sans toucher au HTML (critère d'or).
2. `items:[]` → BLOCKED propre, aucun rendu partiel.
3. Navigation : prev désactivé sur phrase 1, next désactivé sur dernière phrase.
4. Clic bouton écouter → TTS sur `phrase_plain` de la phrase courante.
5. Injecter instance externe via `GAB171.init(ext)` → rendu change.
6. Responsive 375/768/1024 : contrôles wrappent, aucun débordement.

## External refs / dependencies
- **GAB-167** : répétition d'une seule phrase (usage différent — ne pas utiliser GAB-171 pour cet usage).
- **GAB-168** : transcript karaoke (ne pas utiliser GAB-171).
- **GAB-172** : entraînement examen oral structuré (ne pas utiliser GAB-171 pour cet usage).

## Source
`INDEX-300-audiolearning-GAB-171-175-PLAYABLE.html` (stage `data-tpl="171"`, handlers `rcListen / rcPrev / rcNext / rcRender`, data `RC_PHRASES`).