# Create and Deploy an Interactive HTML: Realistic Black-and-White Photography Style + Male Voice Narration "I Have a Dream" Interactive Audio Book (English Page)
## 1. Overall Goal
Transform Martin Luther King Jr.'s complete August 28, 1963 speech ("I Have a Dream" text) into a horizontal full-screen audio book:
1. 16 ultra-realistic black-and-white photography illustrations (1920×1080, high contrast, film grain, 50 mm prime lens perspective)
2. 16 audio narration clips (original male baritone, 15-25 seconds per clip, 44.1 kHz, MP3, auditorium reverb)
3. English webpage: horizontal scroll, auto/manual page flip, subtitle sync highlighting, PC & mobile adaptive
4. One-click deployment package (index.html / assets / README.md)
---
## 2. Full Text Storyboard & Timeline (16 Pages Total)
| Page | Starting Sentence (Original English) | Visual Event | Composition & Lighting | Key Sound |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Distant view of Lincoln Memorial, crowd gathering, backlit silhouettes | Low-angle shot, sky highlights, figures as silhouettes | "I am happy to join with you..." opening, auditorium echo |
| 2 | ...will go down as the greatest demonstration... | Overhead view of dense crowd, banner "We Demand Equal Rights" | Aerial black-and-white, high contrast | Sustained buildup, distant applause in background |
| 3 | But one hundred years later... | Close-up of Emancipation Proclamation monument, rusted chains wrapped | Medium focal length, dark background emphasizing monument | Slower speech pace, "one hundred years later" emphasized |
| 4 | the Negro lives on a lonely island... | Isolated Black man sitting on ruins, gazing at distant city | Wide-angle, deep black foreground, distant skyscrapers lit | Solitary ambient noise |
| 5 | ...the manacles of segregation... | Close-up of hands in manacles, chain partially broken | Macro, strong light on hands, chain links highly highlighted | Manacle clinking + male voice murmuring |
| 6 | ...chains of discrimination. | Black youth rejected at door, "WHITES ONLY" sign | Door crack perspective, sign overexposed | Door "slamming" shut sound |
| 7 | We have come to cash this check... | Bank counter, Black person handing blank check | Symmetrical composition, counter light illuminating | Paper sliding sound |
| 8 | It would be fatal for the nation... | Judge's gavel hovering mid-air, crowd blurred in background | Low angle, gavel silhouette | Delayed echo of gavel sound |
| 9 | We cannot walk alone. | Overlapping Black and white hands, different skin tones | Softbox top light, clear hand texture | heartbeat low frequency |
|10| We cannot turn back. | Backlit marching crowd, light portal ahead | Backlighting, figure edge halos | Synchronized footsteps, low-frequency drumbeats |
|11| I have a dream today! (1st) | Child looking up at light, eye reflections | Close-up of eyes,needle-like highlight | First shout of "I have a dream!" with echo |
|12| I have a dream that one day... | White and Black teenagers running shoulder to shoulder | Dynamic tracking shot, film grain | Breathing + wind |
|13| ...sons of former slaves... sit together... | University bench, two students reading together | Horizontal symmetry, blurred background | Book page rustling |
|14| I have a dream today! (2nd) | Side profile of speaker, mouth open, light-spot background | 35 mm lens, backlit dust particles floating | Second shout, crowd responding in unison |
|15| Let freedom ring... | Liberty Bell close-up, clear crack | Top light, bell body highly lit, black background | Prolonged bell chime |
|16| Free at last! Free at last! | Birds flying upward, crowd raising hands | High-speed shutter, frozen wing motion | "Free at last!" threefold, thunderous applause |
---
## 3. Unified Image Generation Prompt
ultra-realistic black-and-white photograph, 50 mm lens, high contrast, film grain, shallow DOF, [Page-X Scene], 1960s civil rights rally, Lincoln Memorial backdrop, decisive moment, --ar 16:9 --v 5 --q 2
Replace `Page-X Scene` with the corresponding event for each page; maintain consistent grain and contrast levels.
---
## 4. Unified Audio Generation Prompt
Male baritone, MLK-style delivery, slow cadence, Capitol Hall reverb, 44.1 kHz, 128 kbps MP3, 15-25 s, [Starting Sentence] emphasis on "I have a dream", -3 dB peak
Each clip uses the page's starting sentence as narration content, with 1 second of applause fade-out at the end.
---
## 5. Web Technology Stack & Directory
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
- Zero dependencies, vanilla JS
- Horizontal scroll strip, 100 vw/vh per page
- Subtitle highlighting synchronized with audio
- Controls: Play / Pause / Next / Prev / Mute
---
## 6. Key Code (Required)
```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. One-Click Deployment
README includes links and audio effect toggle instructions.
## 8. Delivery Self-Check
[ ] 16 black-and-white JPGs, named page-01 ~ page-16, ≤ 600 KB
[ ] 16 MP3s, named 01.mp3 ~ 16.mp3, ≤ 400 KB
[ ] Webpage horizontal swipe without blank screens, subtitles highlighting with audio
[ ] Mobile landscape orientation prompt auto-pops up