I Have a Dream Buku Gambar Audio

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


## 1. Tujuan Utama  
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 yang sangat realistis (1920×1080, kontras tinggi, grain 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 bahasa Inggris: gulir horizontal, pergantian halaman otomatis/manual, penyorotan 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 Pembuka (Bahasa Inggris Asli) | Peristiwa Visual | Komposisi & Pencahayaan | Suara Utama |
|---|---|---|---|---|
| 1 | Saya senang bergabung dengan Anda semua hari ini... | Tampak jauh Lincoln Memorial, kerumunan mulai berkumpul, siluet dengan cahaya dari belakang | Sudut pengambilan rendah, sorotan langit, sosok sebagai siluet | Pembuka "Saya senang bergabung dengan Anda...", gema auditorium |
| 2 | ...akan tercatat sebagai demonstrasi terbesar... | Tampak atas kerumunan padat, spanduk "Kami Menuntut Hak yang Setara" | Hitam-putih dari udara, kontras tinggi | Peningkatan berkelanjutan, tepuk tangan samar di latar belakang |
| 3 | Namun seratus tahun kemudian... | Close-up monumen Proklamasi Emansipasi, dibalut rantai berkarat | Panjang fokus sedang, latar gelap yang menegaskan monumen | Tempo pidato lebih lambat, "seratus tahun kemudian" ditekankan |
| 4 | orang Negro hidup di sebuah pulau kesepian... | Pria kulit hitam yang terasing duduk di reruntuhan, menatap kota di kejauhan | Sudut lebar, latar depan hitam pekat, pencakar langit jauh yang diterangi | Suara ambient sunyi |
| 5 | ...belenggu segregasi... | Close-up tangan dalam belenggu, rantai sebagian putus | Makro, cahaya kuat pada tangan, mata rantai sangat disorot | Bunyi belenggu beradu + gumaman suara pria |
| 6 | ...rantai diskriminasi. | Pemuda kulit hitam ditolak di pintu, papan "KHUSUS KULIT PUTIH" | Perspektif celah pintu, papan terlalu terang | Suara pintu "dibanting" menutup |
| 7 | Kita datang untuk mencairkan cek ini... | Loket bank, seseorang kulit hitam menyerahkan cek kosong | Komposisi simetris, cahaya loket menerangi | Suara kertas digeser |
| 8 | Akan fatal bagi bangsa... | Palu hakim melayang di udara, kerumunan buram di latar belakang | Sudut rendah, siluet palu hakim | Gema tertunda dari bunyi palu hakim |
| 9 | Kita tidak bisa berjalan sendiri. | Tangan kulit hitam dan putih saling bertumpuk, warna kulit berbeda | Cahaya atas softbox, tekstur tangan jelas | detak jantung frekuensi rendah |
|10| Kita tidak bisa berbalik. | Kerumunan berbaris dengan cahaya dari belakang, portal cahaya di depan | Pencahayaan belakang, halo di tepi sosok | Langkah kaki tersinkron, ketukan drum frekuensi rendah |
|11| Saya punya mimpi hari ini! (ke-1) | Anak menengadah ke cahaya, pantulan pada mata | Close-up mata,sorotan setipis jarum | Seruan pertama "Saya punya mimpi!" dengan gema |
|12| Saya bermimpi bahwa suatu hari... | Remaja kulit putih dan kulit hitam berlari berdampingan | Pengambilan gambar pelacakan dinamis, grain film | Napas + angin |
|13| ...putra para mantan budak... duduk bersama... | Bangku universitas, dua mahasiswa membaca bersama | Simetri horizontal, latar belakang buram | Suara halaman buku berdesir |
|14| Saya punya mimpi hari ini! (ke-2) | Profil samping pembicara, mulut terbuka, latar titik cahaya | Lensa 35 mm, partikel debu melayang dengan cahaya dari belakang | Seruan kedua, kerumunan merespons serempak |
|15| Biarkan kebebasan berdentang... | Close-up Lonceng Liberty, retakan terlihat jelas | Cahaya dari atas, badan lonceng sangat terang, latar hitam | Dentang lonceng berkepanjangan |
|16| Akhirnya bebas! Akhirnya bebas! | Burung-burung terbang ke atas, kerumunan mengangkat tangan | Rana HighSpeed, gerakan sayap membeku | "Akhirnya bebas!" tiga kali, tepuk tangan menggelegar |

---

## 3. Prompt Pembuatan Gambar Terpadu  
fotografi hitam-putih sangat realistis, lensa 50 mm, kontras tinggi, grain film, DOF dangkal, [Adegan Halaman-X], aksi unjuk rasa hak-hak sipil 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 grain 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, [Kalimat Pembuka] penekanan pada "I have a dream", puncak -3 dB  

Setiap klip menggunakan kalimat pembuka halaman sebagai konten narasi, dengan fade-out tepuk tangan selama 1 detik di bagian 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 vanilla  
- Strip gulir horizontal, 100 vw/vh per halaman  
- Penyorotan 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 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  
[ ] Geser horizontal halaman web tanpa layar kosong, subtitel disorot selaras dengan audio  
[ ] Prompt 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 buku audio layar penuh horizontal:  
1. 16 ilustrasi fotografi hitam-putih yang sangat realistis (1920×1080, kontras tinggi, grain 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 sinkronisasi subtitle, adaptif untuk PC & seluler  
4. Paket penerapan sekali klik (index.html / assets / README.md)  

---

## 2. Storyboard & Linimasa Teks Lengkap (Total 16 Halaman)  
| Halaman | Kalimat Pembuka (Bahasa Inggris Asli) | Peristiwa Visual | Komposisi & Pencahayaan | Suara Utama |
|---|---|---|---|---|
| 1 | Saya senang dapat bergabung dengan Anda semua hari ini... | Tampak jauh Lincoln Memorial, kerumunan mulai berkumpul, siluet dengan cahaya dari belakang | Sudut pengambilan rendah, sorotan langit, sosok sebagai siluet | Pembuka "Saya senang dapat bergabung dengan Anda...", gema auditorium |
| 2 | ...akan tercatat sebagai demonstrasi terbesar... | Pandangan dari atas atas kerumunan padat, spanduk "Kami Menuntut Hak yang Setara" | Tampak udara hitam-putih, kontras tinggi | Peningkatan berkelanjutan, tepuk tangan samar di latar |
| 3 | Namun seratus tahun kemudian... | Close-up monumen Proklamasi Emansipasi, rantai berkarat melilit | Panjang fokus sedang, latar gelap yang menonjolkan monumen | Tempo bicara lebih lambat, penekanan pada "seratus tahun kemudian" |
| 4 | orang kulit hitam hidup di sebuah pulau kesepian... | Pria kulit hitam yang terisolasi duduk di reruntuhan, memandang kota di kejauhan | Sudut lebar, latar depan hitam pekat, gedung pencakar langit jauh diterangi | Suara ambient yang sunyi |
| 5 | ...belenggu segregasi... | Close-up tangan dalam belenggu, rantai sebagian putus | Makro, cahaya kuat pada tangan, mata rantai sangat disorot | Bunyi gemerincing belenggu + suara pria bergumam |
| 6 | ...rantai diskriminasi. | Pemuda kulit hitam ditolak di pintu, tanda "KHUSUS KULIT PUTIH" | Perspektif celah pintu, tanda terlalu terang | Bunyi pintu "dibanting" menutup |
| 7 | Kita datang untuk mencairkan cek ini... | Loket bank, seseorang berkulit hitam menyerahkan cek kosong | Komposisi simetris, cahaya loket menerangi | Bunyi kertas digeser |
| 8 | Akan fatal bagi bangsa ini... | Palu hakim melayang di udara, kerumunan kabur di latar belakang | Sudut rendah, siluet palu | Gema bunyi palu yang tertunda |
| 9 | Kita tidak dapat berjalan sendiri. | Tangan kulit hitam dan putih saling tumpang tindih, warna kulit berbeda | Cahaya atas softbox, tekstur tangan jelas | detak jantung frekuensi rendah |
|10| Kita tidak dapat berbalik. | Kerumunan berbaris dengan cahaya dari belakang, portal cahaya di depan | Pencahayaan belakang, halo di tepi sosok | Langkah kaki tersinkronisasi, ketukan drum frekuensi rendah |
|11| Saya punya impian hari ini! (ke-1) | Anak memandang cahaya ke atas, pantulan di mata | Close-up mata, sorotan setipis jarum | Seruan pertama "Saya punya impian!" dengan gema |
|12| Saya punya impian bahwa suatu hari nanti... | Remaja kulit putih dan hitam berlari berdampingan | Pengambilan gambar pelacakan dinamis, grain film | Napas + angin |
|13| ...putra-putra mantan budak... duduk bersama... | Bangku universitas, dua mahasiswa membaca bersama | Simetri horizontal, latar belakang kabur | Bunyi halaman buku dibalik |
|14| Saya punya impian hari ini! (ke-2) | Profil samping pembicara, mulut terbuka, latar bercahaya | Lensa 35 mm, partikel debu melayang dengan cahaya dari belakang | Seruan kedua, kerumunan menanggapi serempak |
|15| Biarkan kebebasan bergema... | Close-up Liberty Bell, retakan terlihat jelas | Cahaya dari atas, badan lonceng sangat terang, latar hitam | Dering lonceng yang berkepanjangan |
|16| Bebas akhirnya! Bebas akhirnya! | Burung terbang ke atas, kerumunan mengangkat tangan | Rana berkecepatan tinggi, gerakan sayap membeku | "Bebas akhirnya!" tiga kali, tepuk tangan menggelegar |

---

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

Ganti `Adegan Halaman-X` dengan peristiwa yang sesuai untuk setiap halaman; pertahankan tingkat grain 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 Pembuka] pada "Saya punya impian", puncak -3 dB  

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

---

## 5. Stack 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, vanilla JS  
- Strip gulir horizontal, 100 vw/vh per halaman  
- Sorotan subtitle disinkronkan 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 Pengiriman  
[ ] 16 JPG hitam-putih, bernama page-01 ~ page-16, ≤ 600 KB  
[ ] 16 MP3, bernama 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Gesek horizontal halaman web tanpa layar kosong, sorotan subtitle selaras dengan audio  
[ ] Prompt orientasi lanskap seluler muncul otomatis