# GAB-173 · AudioVocabularyListen — « Vocabulaire audio »

**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 (stage `data-tpl="173"`, handlers `vlRender/vlPlay/vlPrev/vlNext`).
**Critère validé :** changer le JSON change les mots, la phonétique et les exemples sans modifier le HTML. ✅ check.py 12/12.

## Pack (structure officielle par-GAB)
```
GAB-173/
  renderer.html            ← moteur vocabulaire audio (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` · `vocabulary_listen_id` · `title` · `words[]{word, phonetic, definition, example, audio_rate?}`

Optionnels : `subject`, `chapter`, `accessibility`, `child_safety`.

## Ce qui vient du JSON vs HTML
- **JSON** : chaque mot, sa phonétique, sa définition, son exemple contextuel, le taux audio, le titre de session, le chapitre/matière.
- **HTML** : layout carte, bouton speaker, barre de navigation Précédent/Suivant, compteur, animations, fallback TTS.

## Archétype
Unité minimale : 1 mot + prononciation + définition + exemple. Conçu pour les séries de vocabulaire de chapitre et le support lexique pour mineurs (collège/lycée). Audio via Web Speech API (SpeechSynthesisUtterance, taux 0.85 par défaut) avec fallback animation timeout 1200 ms si TTS indisponible.

## Garde-fous (child_safety)
- **Anti-invention** : les 3 mots de l'instance (Abolition, Privilège, Tiers état) sont extraits strictement du source HTML. Aucun contenu inventé.
- **Navigation cyclique** : `vlIdx = (vlIdx ± 1 + length) % length` — jamais d'index hors-bornes.
- **BLOCKED** si `words` absent/vide, `gab_id` absent, ou `vocabulary_listen_id` absent.
- **Ombres colorées uniquement** (DS V2) : box-shadow violet `rgba(123,97,255,…)` ou coral `rgba(255,107,126,…)`, jamais `rgba(0,0,0,…)`.

## QA à vérifier
1. Modifier un `word`/`definition`/`example` → rendu change sans toucher au HTML (critère d'or).
2. `words:[]` → BLOCKED propre.
3. `gab_id` absent → BLOCKED propre.
4. Bouton 🔊 → SpeechSynthesisUtterance avec taux `audio_rate` ou fallback 1200 ms.
5. Navigation Précédent/Suivant → cyclique, counter `N / total` mis à jour.
6. Instance externe injectée via `GAB173.init(ext)` → rendu change.
7. Responsive 375/768/1024.

## use_when / do_not_use_when (extrait source)
- ✅ **use_when** : unité minimale (1 mot · prononciation · définition · exemple) ; série de mots de chapitre ; support lexique pour mineurs.
- ⛔ **do_not_use_when** : flashcards mémorisation (→ GAB-101) ; glossaire complet d'un chapitre ; questionnement lexique (→ GAB-117).

## Source
`INDEX-300-audiolearning-GAB-171-175-PLAYABLE.html` (stage `data-tpl="173"`, CSS `.vl-*`, handlers `vlRender/vlPlay/vlPrev/vlNext`, données `VL_WORDS` JS).

## external_refs / dependencies
- **GAB-101** (FlashcardMemorization) : alternative mémorisation — hors lot audiolearning.
- **GAB-117** (LexiqueQuestion) : alternative questionnement lexical — hors lot audiolearning.
- **SpeechSynthesisUtterance** (Web API standard) : dépendance navigateur, fallback implémenté.