I Have a Dream Audio-Bilderbuch

# Interaktives HTML erstellen und bereitstellen: realistischer Schwarz-Weiß-Fotostil + männliche Sprecherstimme Interaktives Hörbuch „I Have a Dream“ (englische Seite)  


## 1. Gesamtziel  
Verwandle Martin Luther King Jr.s vollständige Rede vom 28. August 1963 (Text „I Have a Dream“) in ein horizontales Vollbild-Hörbuch:  
1. 16 ultrarealistische Schwarz-Weiß-Fotoillustrationen (1920×1080, hoher Kontrast, Filmkorn, Perspektive eines 50-mm-Objektivs)  
2. 16 Audio-Erzählclips (originaler männlicher Bariton, 15–25 Sekunden pro Clip, 44,1 kHz, MP3, Hall eines Auditoriums)  
3. Englische Webseite: horizontaler Bildlauf, automatisches/manuelles Umblättern, synchrone Untertitelhervorhebung, angepasst für PC und Mobilgeräte  
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 | Zentraler Ton |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Fernansicht des Lincoln Memorial, sich versammelnde Menge, Silhouetten im Gegenlicht | Aufnahme aus niedriger Perspektive, Lichtakzente am Himmel, Figuren als Silhouetten | Eröffnung „I am happy to join with you...“, Echo im Auditorium |
| 2 | ...will go down as the greatest demonstration... | Draufsicht auf dichte Menschenmenge, Banner „We Demand Equal Rights“ | Schwarz-Weiß-Luftaufnahme, hoher Kontrast | Anhaltender Spannungsaufbau, leiser 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 eine ferne Stadt | Weitwinkel, tiefschwarzer Vordergrund, beleuchtete ferne Wolkenkratzer | 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 gleitendem Papier |
| 8 | It would be fatal for the nation... | Richterhammer schwebt in der Luft, Menge im Hintergrund unscharf | Niedrige Perspektive, Silhouette des Richterhammers | Verzögertes Echo des Hammerschlags |
| 9 | We cannot walk alone. | Überlappende schwarze und weiße Hände mit unterschiedlichen Hauttönen | Oberlicht aus einer Softbox, klare Handstruktur | Tieffrequenter Herzschlag |
|10| We cannot turn back. | Marschierende Menge im Gegenlicht, Lichtportal voraus | Gegenlicht, Lichtkränze an den Figurenrändern | Synchronisierte Schritte, tieffrequente Trommelschläge |
|11| I have a dream today! (1st) | Kind blickt zum Licht auf, Spiegelungen in den Augen | Nahaufnahme der Augen, nadelförmiger Lichtreflex | Erster Ausruf „I have a dream!“ mit Echo |
|12| I have a dream that one day... | Weiße und Schwarze Jugendliche laufen Schulter an Schulter | Dynamische Kamerafahrt, 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, offener Mund, Hintergrund mit Lichtflecken | 35-mm-Objektiv, im Gegenlicht schwebende Staubpartikel | Zweiter Ausruf, Menge antwortet geschlossen |
|15| Let freedom ring... | Nahaufnahme der Liberty Bell, deutlich sichtbarer Riss | Oberlicht, Glockenkörper stark beleuchtet, schwarzer Hintergrund | Langanhaltender Glockenklang |
|16| Free at last! Free at last! | Aufwärtsfliegende 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  

Ersetze `Page-X Scene` durch das jeweilige Ereignis der entsprechenden Seite; halte Filmkorn und Kontrast einheitlich.  

---

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

Jeder Clip verwendet den Anfangssatz der Seite als Sprechertext und endet mit 1 Sekunde ausblendendem Applaus.  

---

## 5. Web-Technologie-Stack 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, Vanilla JS  
- Horizontaler Scrollstreifen, 100 vw/vh pro Seite  
- Mit 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. 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  
[ ] Horizontaler Wischvorgang auf der Webseite ohne leere Bildschirme, Untertitelhervorhebung mit Audio  
[ ] Hinweis zur Querformatausrichtung auf Mobilgeräten wird automatisch eingeblendet

# Erstelle und veröffentliche ein interaktives HTML: Realistischer Schwarz-Weiß-Fotografiestil + männliche Sprecherstimme für das interaktive Audio-Buch „I Have a Dream“ (englische Seite)  


## 1. Gesamtziel  
Verwandle Martin Luther King Jr.s vollständige Rede vom 28. August 1963 (Text von „I Have a Dream“) in ein horizontales Vollbild-Audio-Buch:  
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, Auditorium-Hall)  
3. Englische Webseite: horizontaler Scroll, automatischer/manueller Seitenwechsel, synchronisierte Untertitelhervorhebung, an PC und Mobilgeräte angepasst  
4. Bereitstellungspaket mit einem Klick (index.html / assets / README.md)  

---

## 2. Vollständiges Storyboard & Zeitplan (insgesamt 16 Seiten)  
| Seite | Anfangssatz (englisches Original) | Visuelles Ereignis | Komposition & Beleuchtung | Zentraler Klang |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Fernansicht des Lincoln Memorial, sich versammelnde Menge, Silhouetten im Gegenlicht | Aufnahme aus niedriger Perspektive, Lichtreflexe am Himmel, Figuren als Silhouetten | Eröffnung „I am happy to join with you...“, Auditorium-Echo |
| 2 | ...will go down as the greatest demonstration... | Draufsicht auf eine dichte Menschenmenge, Banner „We Demand Equal Rights“ | Luftaufnahme in Schwarz-Weiß, hoher Kontrast | Anhaltender Aufbau, ferner Applaus im Hintergrund |
| 3 | But one hundred years later... | Nahaufnahme des Denkmals zur Emanzipationsproklamation, umwickelt mit 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 eine ferne Stadt | Weitwinkel, tiefschwarzer Vordergrund, erleuchtete entfernte Wolkenkratzer | 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 stark hervorgehoben | Klirren der Fesseln + murmelnde Männerstimme |
| 6 | ...chains of discrimination. | Schwarzer Jugendlicher wird an einer Tür abgewiesen, Schild „WHITES ONLY“ | Perspektive durch einen Türspalt, Schild überbelichtet | Geräusch einer zuschlagenden Tür |
| 7 | We have come to cash this check... | Bankschalter, eine Schwarze Person reicht einen Blankoscheck hin | Symmetrische Komposition, Licht am Schalter beleuchtet die Szene | Geräusch von gleitendem Papier |
| 8 | It would be fatal for the nation... | Richterhammer schwebt in der Luft, Menschenmenge im Hintergrund verschwommen | Niedrige Perspektive, Silhouette des Richterhammers | Verzögertes Echo des Hammerschlags |
| 9 | We cannot walk alone. | Sich überlagernde schwarze und weiße Hände, unterschiedliche Hauttöne | Weiches Licht von oben, klare Hautstruktur der Hände | Tieffrequenter Herzschlag |
|10| We cannot turn back. | Marschierende Menge im Gegenlicht, vor ihr ein Lichtportal | Gegenlicht, Lichtkränze an den Figurensilhouetten | Synchronisierte Schritte, tieffrequente Trommelschläge |
|11| I have a dream today! (1st) | Kind blickt zum Licht auf, Spiegelungen in den Augen | Nahaufnahme der Augen, nadelförmiger Lichtreflex | Erster Ausruf „I have a dream!“ mit Echo |
|12| I have a dream that one day... | Weiße und Schwarze Teenager laufen Schulter an Schulter | Dynamische Kamerafahrt, Filmkorn | Atmen + Wind |
|13| ...sons of former slaves... sit together... | Universitätsbank, zwei Studierende lesen gemeinsam | Horizontale Symmetrie, verschwommener Hintergrund | Rascheln von Buchseiten |
|14| I have a dream today! (2nd) | Seitenprofil des Redners, geöffneter Mund, Hintergrund mit Lichtflecken | 35-mm-Objektiv, im Gegenlicht schwebende Staubpartikel | Zweiter Ausruf, die Menge antwortet gemeinsam |
|15| Let freedom ring... | Nahaufnahme der Freiheitsglocke, deutlich sichtbarer Riss | Licht von oben, Glockenkörper stark ausgeleuchtet, schwarzer Hintergrund | Lang anhaltender Glockenklang |
|16| Free at last! Free at last! | Aufwärts fliegende Vögel, Menge hebt die Hände | Highspeed-Verschluss, eingefrorene Flügelbewegung | „Free at last!“ dreimal, donnernder Applaus |

---

## 3. Einheitlicher Prompt zur Bildgenerierung  
ultrarealistische 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  

Ersetze `Page-X Scene` durch das entsprechende Ereignis jeder Seite; behalte Filmkorn und Kontrast auf einem einheitlichen Niveau bei.  

---

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

Jeder Clip verwendet den Anfangssatz der Seite als Sprechertext und endet mit einem einsekündigen ausblendenden Applaus.  

---

## 5. Web-Technologie-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, Vanilla JS  
- Horizontaler Scrollstreifen, 100 vw/vh pro Seite  
- Mit dem Audio synchronisierte Untertitelhervorhebung  
- Steuerung: Wiedergabe / Pause / Weiter / Zurück / Stummschalten  

---

## 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  

Die README enthält Links und Anleitungen zum Umschalten von Audioeffekten.  

## 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 dem Audio synchronisierte Untertitelhervorhebung  
[ ] Hinweis zur Ausrichtung im mobilen Querformat wird automatisch eingeblendet