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 « I Have a Dream », livre audio interactif (page en anglais)  


## 1. Objectif général  
Transformer le discours intégral de Martin Luther King Jr. du 28 août 1963 (texte « I Have a Dream ») en un 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 | I am happy to join with you today... | Vue lointaine du Lincoln Memorial, foule qui se rassemble, silhouettes à contre-jour | Prise de vue en contre-plongée, rehauts du ciel, personnages en silhouettes | Ouverture « I am happy to join with you... », écho d’auditorium |
| 2 | ...will go down as the greatest demonstration... | Vue en plongée d’une foule dense, banderole « WE DEMAND EQUAL RIGHTS » | Vue aérienne en noir et blanc, fort contraste | Montée continue, applaudissements lointains en fond |
| 3 | But one hundred years later... | Gros plan du 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, insistance sur « one hundred years later » |
| 4 | the Negro lives on a lonely island... | 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 | ...the manacles of segregation... | Gros plan de mains entravées, chaîne partiellement brisée | Macro, lumière forte sur les mains, maillons très mis en évidence | Cliquetis des entraves + murmure d’une voix masculine |
| 6 | ...chains of discrimination. | Jeune Noir refoulé à une porte, panneau « WHITES ONLY » | Perspective à travers l’entrebâillement de la porte, panneau surexposé | Bruit d’une porte qui « claque » |
| 7 | We have come to cash this check... | Guichet de banque, une personne noire tendant un chèque vierge | Composition symétrique, lumière du comptoir éclairante | Bruit du papier qui glisse |
| 8 | It would be fatal for the 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 | We cannot walk alone. | Mains noires et blanches superposées, différentes carnations | Lumière zénithale de softbox, texture des mains nette | Battement de cœur dans les basses fréquences |
|10| We cannot turn back. | Foule en marche à contre-jour, portail lumineux devant elle | Contre-jour, halos sur les contours des silhouettes | Pas synchronisés, battements de tambour dans les basses fréquences |
|11| I have a dream today! (1st) | Enfant levant les yeux vers la lumière, reflets dans les yeux | Gros plan des yeux, rehaut en forme d’aiguille | Premier cri de « I have a dream! » avec écho |
|12| I have a dream that one day... | Adolescents blancs et noirs courant côte à côte | Plan de suivi dynamique, grain de pellicule | Respiration + vent |
|13| ...sons of former slaves... sit together... | Banc d’université, deux étudiants lisant ensemble | Symétrie horizontale, arrière-plan flou | Froissement des pages d’un livre |
|14| I have a dream today! (2nd) | Profil du locuteur, bouche ouverte, arrière-plan ponctué de lumière | Objectif de 35 mm, particules de poussière flottant à contre-jour | Second cri, la foule répond à l’unisson |
|15| Let freedom ring... | Gros plan de la Liberty Bell, fissure bien visible | Lumière zénithale, corps de la cloche très éclairé, fond noir | Long carillon de cloche |
|16| Free at last! Free at last! | Oiseaux s’envolant vers le haut, foule levant les mains | Obturateur haute vitesse, mouvement des ailes figé | « Free at last! » 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, [Page-X Scene], 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 homogènes.  

---

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

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

---

## 5. Pile 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 principal (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 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 de passage en orientation paysage sur mobile s’affiche automatiquement

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


## 1. Objectif général  
Transformer le discours intégral de Martin Luther King Jr. du 28 août 1963 (texte « I Have a Dream ») en un livre audio horizontal en plein écran :  
1. 16 illustrations photographiques ultra-réalistes en noir et blanc photographiques (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 | I am happy to join with you today... | Vue lointaine du Lincoln Memorial, foule qui se rassemble, silhouettes à contre-jour | Prise de vue en contre-plongée, rehauts du ciel, personnages en silhouettes | Ouverture « I am happy to join with you... », écho d’auditorium |
| 2 | ...will go down as the greatest demonstration... | Vue en plongée d’une foule dense, banderole « WE DEMAND EQUAL RIGHTS » | Vue aérienne en noir et blanc, fort contraste | Montée continue, applaudissements lointains en fond |
| 3 | But one hundred years later... | Gros plan du 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, insistance sur « one hundred years later » |
| 4 | the Negro lives on a lonely island... | 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 | ...the manacles of segregation... | Gros plan de mains entravées, chaîne partiellement brisée | Macro, lumière forte sur les mains, maillons très mis en évidence | Cliquetis des entraves + murmure d’une voix masculine |
| 6 | ...chains of discrimination. | Jeune Noir refoulé à une porte, panneau « WHITES ONLY » | Perspective à travers l’entrebâillement de la porte, panneau surexposé | Bruit d’une porte qui « claque » |
| 7 | We have come to cash this check... | Guichet de banque, une personne noire tendant un chèque vierge | Composition symétrique, lumière du comptoir éclairante | Bruit du papier qui glisse |
| 8 | It would be fatal for the 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 | We cannot walk alone. | Mains noires et blanches superposées, différentes carnations | Lumière zénithale de softbox, texture des mains nette | Battement de cœur dans les basses fréquences |
|10| We cannot turn back. | Foule en marche à contre-jour, portail lumineux devant elle | Contre-jour, halos sur les contours des silhouettes | Pas synchronisés, battements de tambour dans les basses fréquences |
|11| I have a dream today! (1st) | Enfant levant les yeux vers la lumière, reflets dans les yeux | Gros plan des yeux, rehaut en forme d’aiguille | Premier cri de « I have a dream! » avec écho |
|12| I have a dream that one day... | Adolescents blancs et noirs courant côte à côte | Plan de suivi dynamique, grain de pellicule | Respiration + vent |
|13| ...sons of former slaves... sit together... | Banc d’université, deux étudiants lisant ensemble | Symétrie horizontale, arrière-plan flou | Froissement des pages d’un livre |
|14| I have a dream today! (2nd) | Profil du locuteur, bouche ouverte, arrière-plan ponctué de lumière | Objectif de 35 mm, particules de poussière flottant à contre-jour | Second cri, la foule répond à l’unisson |
|15| Let freedom ring... | Gros plan de la Liberty Bell, fissure bien visible | Lumière zénithale, corps de la cloche très éclairé, fond noir | Long carillon de cloche |
|16| Free at last! Free at last! | Oiseaux s’envolant vers le haut, foule levant les mains | Obturateur haute vitesse, mouvement des ailes figé | « Free at last! » répété trois fois, applaudissements tonitruants |

---

## 3. Prompt unifié de génération d’images  
photographie ultra-réaliste en noir et blanc photographie, objectif 50 mm, contraste élevé, grain argentique, faible profondeur de champ, [Page-X Scene], 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 homogènes.  

---

## 4. Prompt unifié de génération audio  
Baryton masculin, interprétation dans le style de MLK, débit lent, réverbération de Capitol Hall, 44,1 kHz, MP3 128 kbps, 15 à 25 s, [Starting Sentence], insistance sur "I have a dream", pic à -3 dB  

Chaque clip utilise comme contenu narratif la phrase initiale de la page, avec un fondu de sortie des applaudissements d'une seconde à la fin.  

---

## 5. Stack technologique et répertoire web  
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 de 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 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 inclut les liens et les instructions pour activer ou désactiver les effets audio.  

## 8. Vérification avant livraison  
[ ] 16 noir et blanc JPG, 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 de passage en orientation paysage sur mobile s’affiche automatiquement