I Have a Dream Sách ảnh có âm thanh

# Tạo và triển khai HTML tương tác: Phong cách chân thực Sách nói tương tác "I Have a Dream" (Trang tiếng Anh)  


## 1. Mục tiêu tổng thể  
Chuyển toàn bộ bài diễn văn ngày 28 tháng 8 năm 1963 của Martin Luther King Jr. (văn bản "I Have a Dream") thành sách nói toàn màn hình theo chiều ngang:  
1. 16 minh họa ảnh đen trắng siêu chân thực (1920×1080, tương phản cao, hạt phim, góc nhìn ống kính prime 50 mm)  
2. 16 đoạn thuyết minh âm thanh (giọng nam trầm nguyên bản, 15-25 giây mỗi đoạn, 44.1 kHz, MP3, vang âm khán phòng)  
3. Trang web tiếng Anh: cuộn ngang, lật trang tự động/thủ công, tô sáng phụ đề đồng bộ, thích ứng PC & di động  
4. Gói triển khai một cú nhấp (index.html / assets / README.md)  

---

## 2. Phân cảnh toàn văn & tiến trình (tổng cộng 16 trang)  
| Trang | Câu mở đầu (tiếng Anh gốc) | Sự kiện hình ảnh | Bố cục & ánh sáng | Âm thanh chính |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Góc nhìn xa Đài tưởng niệm Lincoln, đám đông tụ họp, bóng người ngược sáng | Góc máy thấp, điểm sáng trên trời, nhân vật thành bóng đen | Mở đầu "I am happy to join with you...", tiếng vang khán phòng |
| 2 | ...will go down as the greatest demonstration... | Góc nhìn từ trên cao của đám đông dày đặc, biểu ngữ "We Demand Equal Rights" | Đen trắng từ trên không, tương phản cao | Cao trào duy trì, tiếng vỗ tay xa xa ở nền |
| 3 | But one hundred years later... | Cận cảnh đài tưởng niệm Tuyên ngôn Giải phóng, quấn xích sắt hoen gỉ | Tiêu cự trung bình, nền tối làm nổi bật đài tưởng niệm | Nhịp nói chậm hơn, nhấn mạnh "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Một người đàn ông Da đen cô độc ngồi trên tàn tích, nhìn về thành phố xa | Góc rộng, tiền cảnh đen sâu, các tòa nhà chọc trời xa xa được chiếu sáng | Âm thanh môi trường cô quạnh |
| 5 | ...the manacles of segregation... | Cận cảnh đôi tay bị cùm, sợi xích đứt một phần | Macro, ánh sáng mạnh trên bàn tay, các mắt xích nổi bật rõ nét | Tiếng lách cách của cùm + giọng nam thì thầm |
| 6 | ...chains of discrimination. | Thanh niên Da đen bị từ chối ở cửa, biển "WHITES ONLY" | Góc nhìn qua khe cửa, biển hiệu phơi sáng quá mức | Âm thanh cửa "sập" lại |
| 7 | We have come to cash this check... | Quầy ngân hàng, một người Da đen đưa tấm séc chưa điền | Bố cục đối xứng, ánh sáng quầy chiếu rọi | Tiếng giấy trượt |
| 8 | It would be fatal for the nation... | Búa của thẩm phán lơ lửng giữa không trung, đám đông mờ ở hậu cảnh | Góc máy thấp, bóng đen của búa | Tiếng vang chậm của tiếng búa |
| 9 | We cannot walk alone. | Những bàn tay Da đen và da trắng chồng lên nhau, các sắc da khác nhau | Ánh sáng softbox từ trên, rõ kết cấu bàn tay | Nhịp tim tần số thấp |
|10| We cannot turn back. | Đám đông diễu hành ngược sáng, phía trước là cổng ánh sáng | Ngược sáng, viền sáng quanh nhân vật | Tiếng bước chân đồng bộ, tiếng trống tần số thấp |
|11| I have a dream today! (lần 1) | Đứa trẻ ngước nhìn ánh sáng, phản chiếu trong mắt | Cận cảnh đôi mắt, điểm sáng sắc như kim | Tiếng hô đầu tiên "I have a dream!" kèm tiếng vang |
|12| I have a dream that one day... | Thiếu niên da trắng và Da đen chạy sát vai nhau | Góc máy bám theo đầy động năng, hạt phim | Tiếng thở + gió |
|13| ...sons of former slaves... sit together... | Ghế băng đại học, hai sinh viên cùng đọc sách | Đối xứng ngang, nền mờ | Tiếng lật sách xào xạc |
|14| I have a dream today! (lần 2) | Nghiêng mặt diễn giả, miệng mở, nền có đốm sáng | Ống kính 35 mm, hạt bụi lơ lửng trong ngược sáng | Tiếng hô lần hai, đám đông đồng thanh hưởng ứng |
|15| Let freedom ring... | Cận cảnh Chuông Tự do, vết nứt rõ ràng | Ánh sáng từ trên, thân chuông được chiếu sáng mạnh, nền đen | Tiếng chuông ngân kéo dài |
|16| Free at last! Free at last! | Chim bay vút lên, đám đông giơ tay | Tốc độ màn trập cao, chuyển động cánh chim đóng băng | "Free at last!" lặp lại ba lần, tiếng vỗ tay như sấm |

---

## 3. Prompt tạo ảnh thống nhất  
ảnh đen trắng siêu chân thực, ống kính 50 mm, tương phản cao, hạt phim, DOF nông, [Cảnh Trang-X], cuộc tuần hành dân quyền thập niên 1960, phông nền Đài tưởng niệm Lincoln, khoảnh khắc quyết định, --ar 16:9 --v 5 --q 2  

Thay `Page-X Scene` bằng sự kiện tương ứng của từng trang; duy trì mức hạt phim và độ tương phản nhất quán.  

---

## 4. Prompt tạo âm thanh thống nhất  
Giọng nam trầm, cách thể hiện theo phong cách MLK, nhịp chậm, vang âm Capitol Hall, 44.1 kHz, MP3 128 kbps, 15-25 giây, [Câu mở đầu] nhấn mạnh "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

# Tạo và triển khai HTML tương tác: Sách âm thanh tương tác "I Have a Dream" (trang tiếng Anh) theo phong cách nhiếp ảnh đen trắng chân thực + thuyết minh giọng nam  


## 1. Mục tiêu tổng thể  
Chuyển toàn bộ bài phát biểu ngày 28 tháng 8 năm 1963 của Martin Luther King Jr. (văn bản "I Have a Dream") thành một sách âm thanh toàn màn hình cuộn ngang:  
1. 16 ảnh minh họa nhiếp ảnh đen trắng siêu chân thực (1920×1080, tương phản cao, hạt phim, góc nhìn ống kính prime 50 mm)  
2. 16 đoạn thuyết minh âm thanh (giọng nam trầm nguyên bản, mỗi đoạn 15-25 giây, 44.1 kHz, MP3, vang âm hội trường)  
3. Trang web tiếng Anh: cuộn ngang, lật trang tự động/thủ công, tô sáng phụ đề đồng bộ, tương thích PC & thiết bị di động  
4. Gói triển khai một cú nhấp (index.html / assets / README.md)  

---

## 2. Phân cảnh toàn văn & dòng thời gian (tổng cộng 16 trang)  
| Trang | Câu mở đầu (tiếng Anh gốc) | Sự kiện hình ảnh | Bố cục & ánh sáng | Âm thanh chính |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Toàn cảnh xa Đài tưởng niệm Lincoln, đám đông tụ họp, bóng người ngược sáng | Góc máy thấp, vùng sáng trên bầu trời, nhân vật thành bóng đen | Mở đầu "I am happy to join with you...", tiếng vang hội trường |
| 2 | ...will go down as the greatest demonstration... | Góc nhìn từ trên cao xuống đám đông dày đặc, biểu ngữ "We Demand Equal Rights" | Ảnh đen trắng chụp từ trên không, tương phản cao | Cao trào kéo dài, tiếng vỗ tay xa xa ở nền |
| 3 | But one hundred years later... | Cận cảnh tượng đài Tuyên ngôn Giải phóng, quấn xiềng xích gỉ sét | Tiêu cự trung bình, nền tối làm nổi bật tượng đài | Nhịp nói chậm hơn, nhấn mạnh "one hundred years later" |
| 4 | the Negro lives on a lonely island... | Một người đàn ông Da đen cô độc ngồi trên phế tích, nhìn về thành phố xa xăm | Góc rộng, tiền cảnh đen sâu, các tòa nhà chọc trời phía xa được chiếu sáng | Âm thanh môi trường cô quạnh |
| 5 | ...the manacles of segregation... | Cận cảnh đôi tay bị cùm, sợi xích đã đứt một phần | Macro, ánh sáng mạnh chiếu vào tay, các mắt xích nổi bật rõ nét | Tiếng cùm va chạm + giọng nam thì thầm |
| 6 | ...chains of discrimination. | Thanh niên Da đen bị từ chối ở cửa, biển "WHITES ONLY" | Góc nhìn qua khe cửa, biển hiệu phơi sáng quá mức | Âm thanh cửa "sập" lại |
| 7 | We have come to cash this check... | Quầy ngân hàng, một người Da đen đưa tấm séc để trống | Bố cục đối xứng, ánh đèn quầy chiếu sáng | Tiếng giấy trượt |
| 8 | It would be fatal for the nation... | Búa của thẩm phán lơ lửng giữa không trung, đám đông mờ phía sau | Góc máy thấp, bóng búa | Tiếng vang trễ của búa gõ |
| 9 | We cannot walk alone. | Những bàn tay Da đen và da trắng chồng lên nhau, các sắc da khác nhau | Ánh sáng softbox từ trên, kết cấu bàn tay rõ nét | Nhịp tim tần số thấp |
|10| We cannot turn back. | Đám đông tuần hành ngược sáng, phía trước là cổng ánh sáng | Ngược sáng, viền sáng quanh nhân vật | Tiếng bước chân đồng bộ, nhịp trống tần số thấp |
|11| I have a dream today! (1st) | Đứa trẻ ngước nhìn ánh sáng, ánh phản chiếu trong mắt | Cận cảnh đôi mắt, điểm sáng mảnh như kim | Lần hô đầu tiên "I have a dream!" kèm tiếng vang |
|12| I have a dream that one day... | Thanh thiếu niên da trắng và Da đen chạy sát vai nhau | Cảnh quay bám theo đầy động lực, hạt phim | Tiếng thở + gió |
|13| ...sons of former slaves... sit together... | Ghế băng đại học, hai sinh viên cùng đọc sách | Đối xứng ngang, nền mờ | Tiếng lật trang sách |
|14| I have a dream today! (2nd) | Góc nghiêng của diễn giả, miệng mở, nền có đốm sáng | Ống kính 35 mm, các hạt bụi lơ lửng ngược sáng | Lần hô thứ hai, đám đông đồng thanh hưởng ứng |
|15| Let freedom ring... | Cận cảnh Chuông Tự do, vết nứt rõ ràng | Ánh sáng từ trên, thân chuông được chiếu sáng mạnh, nền đen | Tiếng chuông ngân dài |
|16| Free at last! Free at last! | Chim bay vút lên, đám đông giơ tay | Tốc độ màn trập cao, chuyển động cánh chim đóng băng | "Free at last!" lặp lại ba lần, tiếng vỗ tay như sấm |

---

## 3. Prompt tạo ảnh thống nhất  
nhiếp ảnh đen trắng siêu chân thực, ống kính 50 mm, tương phản cao, hạt phim, DOF nông, [Cảnh Trang-X], cuộc tuần hành vì dân quyền thập niên 1960, phông nền Đài tưởng niệm Lincoln, khoảnh khắc quyết định, --ar 16:9 --v 5 --q 2  

Thay `Page-X Scene` bằng sự kiện tương ứng cho từng trang; duy trì mức hạt phim và độ tương phản nhất quán.  

---

## 4. Prompt tạo âm thanh thống nhất  
Giọng nam trầm, cách diễn đạt theo phong cách MLK, nhịp chậm, vang âm Capitol Hall, 44.1 kHz, MP3 128 kbps, 15-25 giây, [Câu mở đầu] nhấn vào "I have a dream", đỉnh -3 dB  

Mỗi đoạn dùng câu mở đầu của trang làm nội dung thuyết minh, với tiếng vỗ tay mờ dần trong 1 giây ở cuối.  

---

## 5. Công nghệ web & thư mục  
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  

- Không phụ thuộc, JS thuần  
- Dải cuộn ngang, mỗi trang 100 vw/vh  
- Tô sáng phụ đề đồng bộ với âm thanh  
- Điều khiển: Phát / Tạm dừng / Tiếp / Trước / Tắt tiếng  

---

## 6. Mã chính (bắt buộc)  
```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. Triển khai chỉ với một cú nhấp  

README bao gồm các liên kết và hướng dẫn bật/tắt hiệu ứng âm thanh.  

## 8. Tự kiểm tra trước khi bàn giao  
[ ] 16 ảnh JPG đen trắng, đặt tên page-01 ~ page-16, ≤ 600 KB  
[ ] 16 tệp MP3, đặt tên 01.mp3 ~ 16.mp3, ≤ 400 KB  
[ ] Vuốt ngang trang web không xuất hiện màn hình trống, phụ đề được tô sáng đồng bộ với âm thanh  
[ ] Tự động hiện lời nhắc xoay ngang trên thiết bị di động