I Have a Dream Buku Gambar Audio

# Buat dan Deploy HTML Interaktif: Fotografi Realistis Hitam-Putih + Narasi Suara Pria Buku Audio Interaktif "I Have a Dream" (Halaman Bahasa Inggris)  


## 1. Tujuan Keseluruhan  
Ubah pidato lengkap Martin Luther King Jr. pada 28 Agustus 1963 (teks "I Have a Dream") menjadi buku audio layar penuh horizontal:  
1. 16 ilustrasi fotografi hitam-putih ultra-realistis (1920×1080, kontras tinggi, butiran film, perspektif lensa prime 50 mm)  
2. 16 klip narasi audio (bariton pria orisinal, 15-25 detik per klip, 44.1 kHz, MP3, reverberasi auditorium)  
3. Halaman web bahasa Inggris: gulir horizontal, pergantian halaman otomatis/manual, penyorotan subtitle tersinkron, adaptif untuk PC & seluler  
4. Paket deployment sekali klik (index.html / assets / README.md)  

---

## 2. Storyboard & Linimasa Teks Lengkap (Total 16 Halaman)  
| Halaman | Kalimat Awal (Bahasa Inggris Asli) | Peristiwa Visual | Komposisi & Pencahayaan | Suara Utama |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Tampak jauh Lincoln Memorial, kerumunan berkumpul, siluet dengan cahaya dari belakang | Sudut pengambilan rendah, sorotan langit, figur sebagai siluet | Pembukaan "I am happy to join with you...", gema auditorium |
| 2 | ...will go down as the greatest demonstration... | Tampak atas kerumunan padat, spanduk "We Demand Equal Rights" | Tampak udara hitam-putih, kontras tinggi | Peningkatan berkelanjutan, tepuk tangan samar di latar belakang |
| 3 | But one hundred years later... | Close-up monumen Emancipation Proclamation, dililit rantai berkarat | Panjang fokus menengah, latar gelap yang menonjolkan monumen | Tempo pidato lebih lambat, penekanan pada "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Pria kulit hitam terasing duduk di reruntuhan, memandang kota di kejauhan | Sudut lebar, latar depan hitam pekat, gedung pencakar langit jauh bercahaya | Suara ambient sunyi |
| 5 | ...the manacles of segregation... | Close-up tangan dalam belenggu, rantai sebagian putus | Makro, cahaya kuat pada tangan, mata rantai sangat disorot | Bunyi belenggu beradu + gumaman suara pria |
| 6 | ...chains of discrimination. | Pemuda kulit hitam ditolak di pintu, papan "WHITES ONLY" | Perspektif celah pintu, papan terlalu terang | Suara pintu "dibanting" menutup |
| 7 | We have come to cash this check... | Loket bank, seseorang kulit hitam menyerahkan cek kosong | Komposisi simetris, cahaya loket menerangi | Suara kertas bergeser |
| 8 | It would be fatal for the nation... | Palu hakim melayang di udara, kerumunan kabur di latar belakang | Sudut rendah, siluet palu hakim | Gema bunyi palu yang tertunda |
| 9 | We cannot walk alone. | Tangan kulit hitam dan putih saling bertumpuk, warna kulit berbeda | Cahaya atas softbox, tekstur tangan jelas | Detak jantung frekuensi rendah |
|10| We cannot turn back. | Kerumunan berbaris dengan cahaya dari belakang, portal cahaya di depan | Pencahayaan belakang, halo di tepi figur | Langkah kaki tersinkron, ketukan drum frekuensi rendah |
|11| I have a dream today! (ke-1) | Anak memandang ke arah cahaya, pantulan di mata | Close-up mata, sorotan setipis jarum | Teriakan pertama "I have a dream!" dengan gema |
|12| I have a dream that one day... | Remaja kulit putih dan hitam berlari berdampingan | Pengambilan gambar pelacakan dinamis, butiran film | Napas + angin |
|13| ...sons of former slaves... sit together... | Bangku universitas, dua mahasiswa membaca bersama | Simetri horizontal, latar belakang kabur | Suara halaman buku berdesir |
|14| I have a dream today! (ke-2) | Profil samping pembicara, mulut terbuka, latar titik cahaya | Lensa 35 mm, partikel debu melayang dengan cahaya dari belakang | Teriakan kedua, kerumunan menanggapi serempak |
|15| Let freedom ring... | Close-up Liberty Bell, retakan jelas | Cahaya dari atas, badan lonceng sangat terang, latar hitam | Dentang lonceng berkepanjangan |
|16| Free at last! Free at last! | Burung terbang ke atas, kerumunan mengangkat tangan | Rana berkecepatan tinggi, gerakan sayap membeku | "Free at last!" diulang tiga kali, tepuk tangan menggelegar |

---

## 3. Prompt Pembuatan Gambar Terpadu  
fotografi hitam-putih ultra-realistis, lensa 50 mm, kontras tinggi, butiran film, DOF dangkal, [Page-X Scene], demonstrasi hak-hak sipil tahun 1960-an, latar Lincoln Memorial, momen menentukan, --ar 16:9 --v 5 --q 2  

Ganti `Page-X Scene` dengan peristiwa yang sesuai untuk setiap halaman; pertahankan tingkat butiran dan kontras yang konsisten.  

---

## 4. Prompt Pembuatan Audio Terpadu  
Bariton pria, penyampaian bergaya MLK, tempo lambat, reverberasi Capitol Hall, 44.1 kHz, 128 kbps MP3, 15-25 dtk, [Starting Sentence] penekanan pada "I have a dream", puncak -3 dB  

Setiap klip menggunakan kalimat awal halaman sebagai konten narasi, dengan fade-out tepuk tangan selama 1 detik di akhir.  

---

## 5. Tumpukan Teknologi Web & Direktori  
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  

- Tanpa dependensi, JS murni  
- Strip gulir horizontal, 100 vw/vh per halaman  
- Penyorotan subtitle tersinkron dengan audio  
- Kontrol: Putar / Jeda / Berikutnya / Sebelumnya / Bisukan  

---

## 6. Kode Utama (Wajib)  
```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. Deployment Sekali Klik  

README menyertakan tautan dan petunjuk untuk mengaktifkan/menonaktifkan efek audio.  

## 8. Pemeriksaan Mandiri Pengiriman  
[ ] 16 JPG hitam-putih, bernama page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, bernama 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Usap horizontal halaman web tanpa layar kosong, subtitle disorot selaras dengan audio  
[ ] Petunjuk orientasi lanskap seluler muncul otomatis

# Buat dan Terapkan HTML Interaktif: Gaya Fotografi Hitam-Putih Realistis + Buku Audio Interaktif "I Have a Dream" dengan Narasi Suara Pria (Halaman Bahasa Inggris)  


## 1. Tujuan Utama  
Ubah pidato lengkap Martin Luther King Jr. pada 28 Agustus 1963 (teks "I Have a Dream") menjadi sebuah buku audio layar penuh horizontal:  
1. 16 ilustrasi fotografi hitam-putih yang sangat realistis (1920×1080, kontras tinggi, butiran film, perspektif lensa prime 50 mm)  
2. 16 klip narasi audio (bariton pria orisinal, 15-25 detik per klip, 44.1 kHz, MP3, reverb auditorium)  
3. Halaman web berbahasa Inggris: gulir horizontal, pergantian halaman otomatis/manual, sorotan subtitel tersinkron, adaptif untuk PC & seluler  
4. Paket penerapan sekali klik (index.html / assets / README.md)  

---

## 2. Storyboard Teks Lengkap & Linimasa (Total 16 Halaman)  
| Halaman | Kalimat Awal (Bahasa Inggris Asli) | Peristiwa Visual | Komposisi & Pencahayaan | Suara Utama |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Tampak jauh Lincoln Memorial, kerumunan berkumpul, siluet dengan cahaya dari belakang | Bidikan sudut rendah, sorotan langit, sosok sebagai siluet | Pembuka "I am happy to join with you...", gema auditorium |
| 2 | ...will go down as the greatest demonstration... | Tampak atas kerumunan padat, spanduk "We Demand Equal Rights" | Foto udara hitam-putih, kontras tinggi | Intensitas yang terus meningkat, tepuk tangan samar di latar belakang |
| 3 | But one hundred years later... | Close-up monumen Proklamasi Emansipasi, dililit rantai berkarat | Panjang fokus sedang, latar gelap yang menonjolkan monumen | Kecepatan bicara lebih lambat, penekanan pada "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Pria kulit hitam yang terasing duduk di reruntuhan, menatap kota di kejauhan | Sudut lebar, latar depan hitam pekat, gedung pencakar langit jauh bercahaya | Suara ambient yang sunyi |
| 5 | ...the manacles of segregation... | Close-up tangan dalam belenggu, rantai sebagian putus | Makro, cahaya kuat pada tangan, mata rantai sangat disorot | Bunyi gemerincing belenggu + gumaman suara pria |
| 6 | ...chains of discrimination. | Remaja kulit hitam ditolak di pintu, papan "WHITES ONLY" | Perspektif celah pintu, papan terekspos berlebih | Suara pintu "dibanting" tertutup |
| 7 | We have come to cash this check... | Meja loket bank, seseorang berkulit hitam menyerahkan cek kosong | Komposisi simetris, cahaya loket menerangi | Suara kertas digeser |
| 8 | It would be fatal for the nation... | Palu hakim melayang di udara, kerumunan kabur di latar belakang | Sudut rendah, siluet palu | Gema tertunda dari suara palu |
| 9 | We cannot walk alone. | Tangan kulit hitam dan putih yang bertumpuk, warna kulit berbeda | Cahaya atas softbox, tekstur tangan jelas | Detak jantung berfrekuensi rendah |
|10| We cannot turn back. | Kerumunan berbaris dengan cahaya dari belakang, portal cahaya di depan | Pencahayaan dari belakang, halo di tepi sosok | Langkah kaki tersinkron, ketukan drum berfrekuensi rendah |
|11| I have a dream today! (1st) | Anak memandang ke arah cahaya, pantulan pada mata | Close-up mata, sorotan setipis jarum | Seruan pertama "I have a dream!" dengan gema |
|12| I have a dream that one day... | Remaja kulit putih dan kulit hitam berlari berdampingan | Bidikan pelacakan dinamis, butiran film | Napas + angin |
|13| ...sons of former slaves... sit together... | Bangku universitas, dua mahasiswa membaca bersama | Simetri horizontal, latar belakang kabur | Suara halaman buku dibalik |
|14| I have a dream today! (2nd) | Profil samping pembicara, mulut terbuka, latar titik cahaya | Lensa 35 mm, partikel debu melayang dengan cahaya dari belakang | Seruan kedua, kerumunan menanggapi serempak |
|15| Let freedom ring... | Close-up Liberty Bell, retak terlihat jelas | Cahaya dari atas, badan lonceng sangat terang, latar hitam | Dentang lonceng yang berkepanjangan |
|16| Free at last! Free at last! | Burung terbang ke atas, kerumunan mengangkat tangan | Rana berkecepatan tinggi, gerak sayap membeku | "Free at last!" tiga kali, tepuk tangan menggelegar |

---

## 3. Prompt Pembuatan Gambar Terpadu  
fotograf hitam-putih yang sangat realistis, lensa 50 mm, kontras tinggi, butiran film, DOF dangkal, [Adegan Halaman-X], aksi unjuk rasa hak-hak sipil tahun 1960-an, latar Lincoln Memorial, momen penentu, --ar 16:9 --v 5 --q 2  

Ganti `Page-X Scene` dengan peristiwa yang sesuai untuk setiap halaman; pertahankan tingkat butiran dan kontras yang konsisten.  

---

## 4. Prompt Pembuatan Audio Terpadu  
Bariton pria, penyampaian bergaya MLK, tempo lambat, reverb Capitol Hall, 44.1 kHz, MP3 128 kbps, 15-25 dtk., penekanan [Kalimat Awal] pada "I have a dream", puncak -3 dB  

Setiap klip menggunakan kalimat awal halaman sebagai materi narasi, dengan tepuk tangan memudar selama 1 detik di akhir.  

---

## 5. Tumpukan Teknologi Web & Direktori  
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  

- Tanpa dependensi, JS murni  
- Strip gulir horizontal, 100 vw/vh per halaman  
- Sorotan subtitel tersinkron dengan audio  
- Kontrol: Putar / Jeda / Berikutnya / Sebelumnya / Bisukan  

---

## 6. Kode Utama (Wajib)  
```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. Penerapan Sekali Klik  

README mencakup tautan dan petunjuk untuk mengaktifkan/menonaktifkan efek audio.  

## 8. Pemeriksaan Mandiri Hasil Akhir  
[ ] 16 JPG hitam-putih, bernama page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, bernama 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Usap horizontal pada halaman web tanpa layar kosong, sorotan subtitel tersinkron dengan audio  
[ ] Prompt orientasi lanskap seluler muncul otomatis