I Have a Dream Audio-Bilderbuch

# Interaktives HTML erstellen und bereitstellen: realistischer Schwarz-Weiß-Fotografiestil + männliche Spracherzählung für das interaktive Hörbuch „I Have a Dream“ (englische Seite)  


## 1. Gesamtziel  
Martin Luther King Jr.s vollständige Rede vom 28. August 1963 (Text von „I Have a Dream“) in ein horizontales Vollbild-Hörbuch verwandeln:  
1. 16 ultrarealistische Schwarz-Weiß-Fotografieillustrationen (1920×1080, hoher Kontrast, Filmkorn, Perspektive eines 50-mm-Festbrennweitenobjektivs)  
2. 16 Audio-Erzählclips (originaler männlicher Bariton, 15–25 Sekunden pro Clip, 44,1 kHz, MP3, Hall eines Auditoriums)  
3. Englische Webseite: horizontales Scrollen, automatisches/manuelles Umblättern, synchron hervorgehobene Untertitel, für PC und Mobilgeräte optimiert  
4. Bereitstellungspaket mit einem Klick (index.html / assets / README.md)  

---

## 2. Vollständiges Text-Storyboard und Zeitplan (insgesamt 16 Seiten)  
| Seite | Anfangssatz (englisches Original) | Visuelles Ereignis | Komposition und Beleuchtung | Hauptklang |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Blick aus der Ferne auf das Lincoln Memorial, sich versammelnde Menge, Silhouetten im Gegenlicht | Aufnahme aus niedriger Perspektive, Lichtakzente am Himmel, Figuren als Silhouetten | Beginn „I am happy to join with you...“, Echo eines Auditoriums |
| 2 | ...will go down as the greatest demonstration... | Vogelperspektive auf dichte Menge, Banner „We Demand Equal Rights“ | Schwarz-Weiß-Luftaufnahme, hoher Kontrast | Anhaltender Spannungsaufbau, entfernter Applaus im Hintergrund |
| 3 | But one hundred years later... | Nahaufnahme des Denkmals zur Emanzipationsproklamation, umwickelt von rostigen Ketten | Mittlere Brennweite, dunkler Hintergrund hebt das Denkmal hervor | Langsameres Sprechtempo, Betonung von „one hundred years later“ |
| 4 | the Negro lives on a lonely island... | Isolierter Schwarzer Mann sitzt auf Ruinen und blickt auf die ferne Stadt | Weitwinkel, tiefschwarzer Vordergrund, beleuchtete Wolkenkratzer in der Ferne | Einsame Umgebungsgeräusche |
| 5 | ...the manacles of segregation... | Nahaufnahme von Händen in Fesseln, Kette teilweise gebrochen | Makroaufnahme, starkes Licht auf den Händen, Kettenglieder deutlich hervorgehoben | Klirren von Fesseln + murmelnde Männerstimme |
| 6 | ...chains of discrimination. | Schwarzer Jugendlicher wird an einer Tür abgewiesen, Schild „WHITES ONLY“ | Perspektive durch den Türspalt, Schild überbelichtet | Geräusch einer zuschlagenden Tür |
| 7 | We have come to cash this check... | Bankschalter, Schwarze Person übergibt einen Blankoscheck | Symmetrische Komposition, Licht am Schalter beleuchtet die Szene | Geräusch von über Papier gleitendem Papier |
| 8 | It would be fatal for the nation... | Richterhammer schwebt in der Luft, Menge im Hintergrund unscharf | Niedrige Perspektive, Silhouette des Hammers | Verzögertes Echo des Hammerschlags |
| 9 | We cannot walk alone. | Überlappende schwarze und weiße Hände, unterschiedliche Hauttöne | Oberlicht aus einer Softbox, deutliche Hautstruktur der Hände | Tieffrequenter Herzschlag |
|10| We cannot turn back. | Marschierende Menge im Gegenlicht, vor ihr ein Lichtportal | Gegenlicht, Lichthöfe an den Figurenrändern | Synchronisierte Schritte, tieffrequente Trommelschläge |
|11| I have a dream today! (1st) | Kind blickt zum Licht empor, Lichtreflexe in den Augen | Nahaufnahme der Augen, nadelfeiner Lichtakzent | Erster Ruf „I have a dream!“ mit Echo |
|12| I have a dream that one day... | Weiße und Schwarze Jugendliche laufen Schulter an Schulter | Dynamische Mitziehaufnahme, Filmkorn | Atmen + Wind |
|13| ...sons of former slaves... sit together... | Universitätsbank, zwei Studierende lesen gemeinsam | Horizontale Symmetrie, unscharfer Hintergrund | Rascheln von Buchseiten |
|14| I have a dream today! (2nd) | Seitenprofil des Redners, geöffneter Mund, Hintergrund mit Lichtfleck | 35-mm-Objektiv, im Gegenlicht schwebende Staubpartikel | Zweiter Ruf, Menge antwortet im Chor |
|15| Let freedom ring... | Nahaufnahme der Freiheitsglocke, deutlich sichtbarer Riss | Oberlicht, Glockenkörper stark ausgeleuchtet, schwarzer Hintergrund | Anhaltendes Glockenläuten |
|16| Free at last! Free at last! | Aufsteigende Vögel, Menge hebt die Hände | HighSpeed-Verschluss, eingefrorene Flügelbewegung | „Free at last!“ dreimal, donnernder Applaus |

---

## 3. Einheitlicher Prompt zur Bildgenerierung  
ultrarealistisches Schwarz-Weiß-Foto, 50-mm-Objektiv, hoher Kontrast, Filmkorn, geringe Schärfentiefe, [Page-X Scene], Bürgerrechtskundgebung der 1960er-Jahre, Kulisse des Lincoln Memorial, entscheidender Moment, --ar 16:9 --v 5 --q 2  

Ersetzen Sie `Page-X Scene` durch das jeweilige Ereignis der entsprechenden Seite; behalten Sie einheitliche Korn- und Kontrastwerte bei.  

---

## 4. Einheitlicher Prompt zur Audiogenerierung  
Männlicher Bariton, Vortrag im Stil von MLK, langsamer Rhythmus, Hall der Capitol Hall, 44.1 kHz, 128 kbps MP3, 15–25 s, [Starting Sentence], Betonung auf „I have a dream“, -3 dB Peak  

Jeder Clip verwendet den Anfangssatz der Seite als Erzählinhalt und endet mit einer einsekündigen Ausblendung des Applauses.  

---

## 5. Web-Technologiestack und Verzeichnis  
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  

- Keine Abhängigkeiten, pures JS  
- Horizontaler Scrollstreifen, 100 vw/vh pro Seite  
- Mit dem Audio synchronisierte Untertitelhervorhebung  
- Steuerelemente: Wiedergabe / Pause / Weiter / Zurück / Stumm  

---

## 6. Wichtiger Code (erforderlich)  
```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. Bereitstellung mit einem Klick  

README enthält Links und Anweisungen zum Umschalten der Audioeffekte.  

## 8. Selbstprüfung der Lieferung  
[ ] 16 Schwarz-Weiß-JPGs, benannt page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3s, benannt 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Horizontal wischbare Webseite ohne leere Bildschirme, mit zum Audio hervorgehobenen Untertiteln  
[ ] Hinweis zur Ausrichtung im mobilen Querformat erscheint automatisch

# Interaktives HTML erstellen und bereitstellen: realistischer Schwarz-Weiß Fotografie-Stil + männliche Spracherzählung für das interaktive Hörbuch „I Have a Dream“ (englische Seite)  


## 1. Gesamtziel  
Martin Luther King Jr.s vollständige Rede vom 28. August 1963 (Text von „I Have a Dream“) in ein horizontales Vollbild-Hörbuch verwandeln:  
1. 16 ultrarealistische Schwarz-Weiß Fotografieillustrationen (1920×1080, hoher Kontrast, Filmkorn, Perspektive eines 50-mm-Festbrennweitenobjektivs)  
2. 16 Audio-Erzählclips (originaler männlicher Bariton, 15–25 Sekunden pro Clip, 44,1 kHz, MP3, Hall eines Auditoriums)  
3. Englische Webseite: horizontales Scrollen, automatisches/manuelles Umblättern, synchron hervorgehobene Untertitel, für PC und Mobilgeräte optimiert  
4. Bereitstellungspaket mit einem Klick (index.html / assets / README.md)  

---

## 2. Vollständiges Text-Storyboard und Zeitplan (insgesamt 16 Seiten)  
| Seite | Anfangssatz (englisches Original) | Visuelles Ereignis | Komposition und Beleuchtung | Hauptklang |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Blick aus der Ferne auf das Lincoln Memorial, sich versammelnde Menge, Silhouetten im Gegenlicht | Aufnahme aus niedriger Perspektive, Lichtakzente am Himmel, Figuren als Silhouetten | Beginn „I am happy to join with you...“, Echo eines Auditoriums |
| 2 | ...will go down as the greatest demonstration... | Vogelperspektive auf dichte Menge, Banner „We Demand Equal Rights“ | Luftaufnahme in Schwarz-Weiß, hohem Kontrast | Anhaltender Spannungsaufbau, entfernter Applaus im Hintergrund |
| 3 | But one hundred years later... | Nahaufnahme des Denkmals zur Emanzipationsproklamation, umwickelt von rostigen Ketten | Mittlere Brennweite, dunkler Hintergrund hebt das Denkmal hervor | Langsameres Sprechtempo, Betonung von „one hundred years later“ |
| 4 | the Negro lives on a lonely island... | Isolierter Schwarzer Mann sitzt auf Ruinen und blickt auf die ferne Stadt | Weitwinkel, tiefschwarzer Vordergrund, beleuchtete Wolkenkratzer in der Ferne | Einsame Umgebungsgeräusche |
| 5 | ...the manacles of segregation... | Nahaufnahme von Händen in Fesseln, Kette teilweise gebrochen | Makroaufnahme, starkes Licht auf den Händen, Kettenglieder deutlich hervorgehoben | Klirren von Fesseln + murmelnde Männerstimme |
| 6 | ...chains of discrimination. | Schwarzer Jugendlicher wird an einer Tür abgewiesen, Schild „WHITES ONLY“ | Perspektive durch den Türspalt, Schild überbelichtet | Geräusch einer zuschlagenden Tür |
| 7 | We have come to cash this check... | Bankschalter, Schwarze Person übergibt einen Blankoscheck | Symmetrische Komposition, Licht am Schalter beleuchtet die Szene | Geräusch von über Papier gleitendem Papier |
| 8 | It would be fatal for the nation... | Richterhammer schwebt in der Luft, Menge im Hintergrund unscharf | Niedrige Perspektive, Silhouette des Hammers | Verzögertes Echo des Hammerschlags |
| 9 | We cannot walk alone. | Überlappende schwarze und weiße Hände, unterschiedliche Hauttöne | Oberlicht aus einer Softbox, deutliche Hautstruktur der Hände | Tieffrequenter Herzschlag |
|10| We cannot turn back. | Marschierende Menge im Gegenlicht, vor ihr ein Lichtportal | Gegenlicht, Lichthöfe an den Figurenrändern | Synchronisierte Schritte, tieffrequente Trommelschläge |
|11| I have a dream today! (1st) | Kind blickt zum Licht empor, Lichtreflexe in den Augen | Nahaufnahme der Augen,nadelfeiner Lichtakzent | Erster Ruf „I have a dream!“ mit Echo |
|12| I have a dream that one day... | Weiße und Schwarze Jugendliche laufen Schulter an Schulter | Dynamische Mitziehaufnahme, Filmkorn | Atmen + Wind |
|13| ...sons of former slaves... sit together... | Universitätsbank, zwei Studierende lesen gemeinsam | Horizontale Symmetrie, unscharfer Hintergrund | Rascheln von Buchseiten |
|14| I have a dream today! (2nd) | Seitenprofil des Redners, geöffneter Mund, Hintergrund mit Lichtfleck | 35-mm-Objektiv, im Gegenlicht schwebende Staubpartikel | Zweiter Ruf, Menge antwortet im Chor |
|15| Let freedom ring... | Nahaufnahme der Freiheitsglocke, deutlich sichtbarer Riss | Oberlicht, Glockenkörper stark ausgeleuchtet, schwarzer Hintergrund | Anhaltendes Glockenläuten |
|16| Free at last! Free at last! | Aufsteigende Vögel, Menge hebt die Hände | HighSpeed-Verschluss, eingefrorene Flügelbewegung | „Free at last!“ dreimal, donnernder Applaus |

---

## 3. Einheitlicher Prompt zur Bildgenerierung  
ultrarealistisches Schwarz-Weiß Fotografie, 50-mm-Objektiv, hoher Kontrast, Filmkorn, geringe Schärfentiefe, [Page-X Scene], Bürgerrechtskundgebung der 1960er Jahre, Lincoln Memorial im Hintergrund, entscheidender Moment, --ar 16:9 --v 5 --q 2  

Ersetzen Sie `Page-X Scene` auf jeder Seite durch das entsprechende Ereignis; behalten Sie ein einheitliches Filmkorn und Kontrastniveau bei.  

---

## 4. Einheitlicher Prompt zur Audiogenerierung  
Männlicher Bariton, Vortrag im Stil von MLK, langsames Tempo, Hall der Capitol Hall, 44.1 kHz, 128 kbps MP3, 15–25 s, [Starting Sentence], Betonung von "I have a dream", -3 dB Spitze  

Jeder Clip verwendet den Anfangssatz der jeweiligen Seite als Sprechertext und endet mit einer 1-sekündigen ausblendenden Applausspur.  

---

## 5. Web-Technik-Stack & Verzeichnis  
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  

- Keine Abhängigkeiten, pures JS  
- Horizontaler Scrollstreifen, 100 vw/vh pro Seite  
- Mit dem Audio synchronisierte Untertitelhervorhebung  
- Steuerelemente: Wiedergabe / Pause / Weiter / Zurück / Stummschalten  

---

## 6. Zentraler Code (erforderlich)  
```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. Ein-Klick-Bereitstellung  

README enthält Links und Anweisungen zum Umschalten der Audioeffekte.  

## 8. Lieferumfang prüfen  
[ ] 16 Schwarzweiß JPGs, benannt page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3s, benannt 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Horizontal wischbare Webseite ohne leere Bildschirme, mit zum Audio hervorgehobenen Untertiteln  
[ ] Hinweis zur Ausrichtung im mobilen Querformat erscheint automatisch