I Have a Dream Livre illustré audio

# Créer et déployer un HTML interactif : style photographique réaliste en noir et blanc + narration par voix masculine Livre audio interactif « I Have a Dream » (page en anglais)  


## 1. Objectif général  
Transformer le discours intégral de Martin Luther King Jr., prononcé le 28 août 1963 (texte de « I Have a Dream ») en livre audio horizontal en plein écran :  
1. 16 illustrations photographiques ultra-réalistes en noir et blanc (1920×1080, fort contraste, grain de pellicule, perspective d’un objectif fixe de 50 mm)  
2. 16 extraits de narration audio (voix de baryton masculine originale, 15 à 25 secondes par extrait, 44,1 kHz, MP3, réverbération d’auditorium)  
3. Page web en anglais : défilement horizontal, changement de page automatique ou manuel, surlignage synchronisé des sous-titres, adaptation PC et mobile  
4. Package de déploiement en un clic (index.html / assets / README.md)  

---

## 2. Storyboard complet et chronologie du texte (16 pages au total)  
| Page | Phrase d’ouverture (anglais original) | Événement visuel | Composition et éclairage | Son principal |
|---|---|---|---|---|
| 1 | Je suis heureux de me joindre à vous aujourd’hui... | Vue lointaine du Lincoln Memorial, foule qui se rassemble, silhouettes en contre-jour | Prise de vue en contre-plongée, ciel lumineux, personnages en silhouettes | Ouverture : « Je suis heureux de me joindre à vous... », écho d’auditorium |
| 2 | ...restera comme la plus grande manifestation... | Vue plongeante d’une foule dense, bannière « Nous exigeons des droits égaux » | Vue aérienne en noir et blanc, fort contraste | Intensification continue, applaudissements lointains en fond |
| 3 | Mais cent ans plus tard... | Gros plan sur le monument de la Proclamation d’émancipation, entouré de chaînes rouillées | Focale moyenne, fond sombre mettant le monument en valeur | Débit plus lent, accent sur « cent ans plus tard » |
| 4 | le Noir vit sur une île solitaire... | Homme noir isolé assis sur des ruines, regardant une ville au loin | Grand-angle, premier plan noir profond, gratte-ciel lointains éclairés | Ambiance sonore solitaire |
| 5 | ...les entraves de la ségrégation... | Gros plan sur des mains entravées, chaîne partiellement brisée | Macro, forte lumière sur les mains, maillons très mis en lumière | Cliquetis d’entraves + murmure d’une voix masculine |
| 6 | ...chaînes de la discrimination. | Jeune Noir refusé à une porte, panneau « RÉSERVÉ AUX BLANCS » | Perspective depuis l’entrebâillement de la porte, panneau surexposé | Bruit de porte qui « claque » |
| 7 | Nous sommes venus encaisser ce chèque... | Guichet de banque, personne noire tendant un chèque vierge | Composition symétrique, lumière du comptoir éclairante | Bruit de papier qui glisse |
| 8 | Ce serait fatal pour la nation... | Marteau de juge suspendu en plein air, foule floue à l’arrière-plan | Contre-plongée, silhouette du marteau | Écho retardé du coup de marteau |
| 9 | Nous ne pouvons pas marcher seuls. | Mains noires et blanches superposées, différentes teintes de peau | Éclairage zénithal par boîte à lumière, texture nette des mains | Battement de cœur dans les basses fréquences |
|10| Nous ne pouvons pas faire demi-tour. | Foule en marche à contre-jour, portail de lumière devant elle | Contre-jour, halos sur les contours des silhouettes | Pas synchronisés, battements de tambour graves |
|11| J’ai un rêve aujourd’hui ! (1re fois) | Enfant levant les yeux vers la lumière, reflets dans les yeux | Gros plan sur les yeux, reflet en forme d’aiguille | Premier cri de « J’ai un rêve ! » avec écho |
|12| J’ai le rêve qu’un jour... | Adolescents blancs et noirs courant côte à côte | Plan de suivi dynamique, grain de pellicule | Respiration + vent |
|13| ...les fils d’anciens esclaves... s’assiéront ensemble... | Banc universitaire, deux étudiants lisant ensemble | Symétrie horizontale, arrière-plan flou | Froissement des pages d’un livre |
|14| J’ai un rêve aujourd’hui ! (2e fois) | Profil du locuteur, bouche ouverte, fond ponctué de lumière | Objectif de 35 mm, particules de poussière flottant en contre-jour | Second cri, réponse unanime de la foule |
|15| Que la liberté retentisse... | Gros plan sur la Liberty Bell, fissure nette | Lumière zénithale, corps de la cloche très éclairé, fond noir | Long tintement de cloche |
|16| Enfin libres ! Enfin libres ! | Oiseaux prenant leur envol, foule levant les mains | Obturateur haute vitesse, mouvement des ailes figé | « Enfin libres ! » répété trois fois, applaudissements tonitruants |

---

## 3. Prompt unifié de génération d’images  
photographie ultra-réaliste en noir et blanc, objectif 50 mm, fort contraste, grain de pellicule, faible profondeur de champ, [Scène de la page X], rassemblement pour les droits civiques des années 1960, Lincoln Memorial en arrière-plan, instant décisif, --ar 16:9 --v 5 --q 2  

Remplacez `Page-X Scene` par l’événement correspondant à chaque page ; conservez des niveaux de grain et de contraste cohérents.  

---

## 4. Prompt unifié de génération audio  
Voix de baryton masculine, diction dans le style de MLK, cadence lente, réverbération de Capitol Hall, 44,1 kHz, MP3 128 kbps, 15 à 25 s, [Phrase d’ouverture] accent sur « I have a dream », pic à -3 dB  

Chaque extrait utilise la phrase d’ouverture de la page comme contenu narratif, avec 1 seconde de fondu d’applaudissements à la fin.  

---

## 5. Stack technologique web et répertoire  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- Aucune dépendance, JS natif  
- Bande de défilement horizontal, 100 vw/vh par page  
- Surlignage des sous-titres synchronisé avec l’audio  
- Commandes : lecture / pause / suivant / précédent / muet  

---

## 6. Code clé (obligatoire)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. Déploiement en un clic  

Le README comprend les liens et les instructions pour activer ou désactiver les effets audio.  

## 8. Vérification avant livraison  
[ ] 16 JPG en noir et blanc, nommés page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, nommés 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Balayage horizontal de la page web sans écran vide, sous-titres surlignés avec l’audio  
[ ] L’invite d’orientation paysage sur mobile s’affiche automatiquement

# Créer et déployer un HTML interactif : livre audio interactif « I Have a Dream » (page en anglais) au style photographique réaliste en noir et blanc avec narration masculine  


## 1. Objectif général  
Transformer l'intégralité du discours prononcé par Martin Luther King Jr. le 28 août 1963 (texte de « I Have a Dream ») en un livre audio plein écran à défilement horizontal:  
1. 16 illustrations photographiques ultra-réalistes en noir et blanc (1920×1080, fort contraste, grain argentique, perspective d'un objectif fixe 50 mm)  
2. 16 extraits de narration audio (baryton masculin original, 15 à 25 secondes par extrait, 44,1 kHz, MP3, réverbération d'auditorium)  
3. Page web en anglais : défilement horizontal, changement de page automatique ou manuel, mise en évidence synchronisée des sous-titres, adaptation PC et mobile  
4. Package de déploiement en un clic (index.html / assets / README.md)  

---

## 2. Storyboard complet et chronologie (16 pages au total)  
| Page | Phrase d'ouverture (anglais d'origine) | Événement visuel | Composition et éclairage | Son principal |
|---|---|---|---|---|
| 1 | Je suis heureux de me joindre à vous aujourd'hui... | Vue lointaine du mémorial Lincoln, foule qui se rassemble, silhouettes à contre-jour | Prise de vue en contre-plongée, reflets du ciel, personnages en silhouettes | Ouverture « Je suis heureux de me joindre à vous... », écho d'auditorium |
| 2 | ...restera comme la plus grande manifestation... | Vue plongeante d'une foule dense, bannière « Nous exigeons l'égalité des droits » | Vue aérienne en noir et blanc, fort contraste | Montée soutenue, applaudissements lointains en fond |
| 3 | Mais cent ans plus tard... | Gros plan sur le monument de la Proclamation d'émancipation, entouré de chaînes rouillées | Focale moyenne, arrière-plan sombre mettant le monument en valeur | Rythme de parole plus lent, accent sur « cent ans plus tard » |
| 4 | le Noir vit sur une île solitaire... | Homme noir isolé assis sur des ruines, regardant une ville au loin | Grand-angle, premier plan noir profond, gratte-ciel lointains éclairés | Ambiance sonore solitaire |
| 5 | ...les menottes de la ségrégation... | Gros plan sur des mains entravées, chaîne partiellement brisée | Macro, lumière forte sur les mains, maillons très mis en lumière | Cliquetis des menottes + murmure d'une voix masculine |
| 6 | ...les chaînes de la discrimination. | Jeune Noir refoulé à une porte, panneau « RÉSERVÉ AUX BLANCS » | Perspective depuis l'entrebâillement de la porte, panneau surexposé | Bruit de porte qui « claque » |
| 7 | Nous sommes venus encaisser ce chèque... | Guichet de banque, une personne noire tendant un chèque vierge | Composition symétrique, lumière du guichet éclairant la scène | Bruit de papier qui glisse |
| 8 | Il serait fatal pour la nation... | Marteau de juge suspendu en plein mouvement, foule floue à l'arrière-plan | Contre-plongée, silhouette du marteau | Écho retardé du coup de marteau |
| 9 | Nous ne pouvons pas marcher seuls. | Mains noires et blanches superposées, différentes carnations | Éclairage supérieur par boîte à lumière, texture des mains nette | Battement cardiaque basse fréquence |
|10| Nous ne pouvons pas revenir en arrière. | Foule en marche à contre-jour, portail de lumière devant elle | Contre-jour, halos sur les contours des silhouettes | Pas synchronisés, battements de tambour à basse fréquence |
|11| J'ai un rêve aujourd'hui ! (1re fois) | Enfant levant les yeux vers la lumière, reflets dans les yeux | Gros plan sur les yeux, reflet en aiguille | Premier cri de « J'ai un rêve ! » avec écho |
|12| J'ai un rêve qu'un jour... | Adolescents blancs et noirs courant côte à côte | Plan de suivi dynamique, grain argentique | Respiration + vent |
|13| ...les fils d'anciens esclaves... s'assiéront ensemble... | Banc d'université, deux étudiants lisant ensemble | Symétrie horizontale, arrière-plan flou | Froissement des pages d'un livre |
|14| J'ai un rêve aujourd'hui ! (2e fois) | Profil du locuteur, bouche ouverte, arrière-plan éclairé par un point lumineux | Objectif 35 mm, particules de poussière flottant à contre-jour | Deuxième cri, foule répondant à l'unisson |
|15| Que la liberté résonne... | Gros plan sur la Liberty Bell, fissure bien visible | Lumière zénithale, corps de la cloche très éclairé, arrière-plan noir | Sonnerie de cloche prolongée |
|16| Enfin libres ! Enfin libres ! | Oiseaux s'envolant, foule levant les mains | Obturateur haute vitesse, mouvement des ailes figé | « Enfin libres ! » répété trois fois, applaudissements tonitruants |

---

## 3. Prompt unifié de génération d'images  
photographie ultra-réaliste en noir et blanc, objectif 50 mm, fort contraste, grain argentique, faible profondeur de champ, [Scène de la page X], rassemblement pour les droits civiques dans les années 1960, mémorial Lincoln en arrière-plan, moment décisif, --ar 16:9 --v 5 --q 2  

Remplacez `Scène de la page X` par l'événement correspondant à chaque page ; conservez des niveaux de grain et de contraste cohérents.  

---

## 4. Prompt unifié de génération audio  
Voix de baryton masculine, diction dans le style de MLK, cadence lente, réverbération de Capitol Hall, 44,1 kHz, MP3 128 kbps, 15 à 25 s, accentuation de [Phrase d'ouverture] sur « I have a dream », pic à -3 dB  

Chaque extrait utilise comme contenu de narration la phrase d'ouverture de la page, avec un fondu des applaudissements d'une seconde à la fin.  

---

## 5. Stack technologique web et répertoire  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- Aucune dépendance, JS natif  
- Bandeau à défilement horizontal, 100 vw/vh par page  
- Mise en évidence des sous-titres synchronisée avec l'audio  
- Commandes : Lecture / Pause / Suivant / Précédent / Muet  

---

## 6. Code essentiel (obligatoire)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. Déploiement en un clic  

Le README comprend les liens et les instructions d'activation/désactivation des effets audio.  

## 8. Vérification avant livraison  
[ ] 16 JPG en noir et blanc, nommés page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, nommés 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Balayage horizontal de la page web sans écran vide, mise en évidence des sous-titres synchronisée avec l'audio  
[ ] Une invite de passage en orientation paysage sur mobile s'affiche automatiquement