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

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


## 1. Mục tiêu tổng thể  
Chuyển toàn văn 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 một 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 vọng 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ộ, tương thích PC & thiết bị di động  
4. Gói triển khai một cú nhấp chuột (index.html / assets / README.md)  

---

## 2. Storyboard và dòng thời gian toàn văn (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 | Tôi vui mừng được cùng các bạn hiện diện ở đây hôm nay... | Góc nhìn xa Đài tưởng niệm Lincoln, đám đông đang tập 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 "Tôi vui mừng được cùng các bạn...", tiếng vang khán phòng |
| 2 | ...sẽ đi vào lịch sử như cuộc biểu tình vĩ đại nhất... | Góc nhìn từ trên cao của đám đông dày đặc, biểu ngữ "Chúng tôi đòi quyền bình đẳng" | Ảnh đen trắng chụp từ trên không, tương phản cao | Cao trào dâng lên liên tục, tiếng vỗ tay xa xa phía nền |
| 3 | Nhưng một trăm năm sau... | Cận cảnh tượng đài 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 tượng đài | Nhịp nói chậm hơn, nhấn mạnh "một trăm năm sau" |
| 4 | người da đen sống trên một hòn đảo cô độc... | 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 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 | ...xiềng xích của sự phân biệt... | Cận cảnh đôi tay bị còng, sợi xích đã đứt một phần | Chụp macro, ánh sáng mạnh trên bàn tay, các mắt xích được làm nổi bật | Tiếng xiềng xích va chạm + giọng nam trầm thấp |
| 6 | ...xiềng xích của sự kỳ thị. | Một thanh niên da đen bị từ chối ở cửa, biển "CHỈ DÀNH CHO NGƯỜI DA TRẮNG" | 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" đóng |
| 7 | Chúng ta đến đây để đổi tấm séc này... | 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 | Điều đó sẽ là tai họa cho quốc gia... | Búa của thẩm phán lơ lửng giữa không trung, đám đông phía sau nhòe mờ | Góc máy thấp, bóng búa | Tiếng búa vang vọng chậm trễ |
| 9 | Chúng ta không thể bước đi một mình. | Bàn tay da đen và da trắng chồng lên nhau, các sắc da khác nhau | Đèn softbox từ trên cao, kết cấu bàn tay rõ nét | Nhịp tim tần số thấp |
|10| Chúng ta không thể quay đầu. | Đám đông tuần hành ngược sáng, phía trước là cánh cổng ánh sáng | Ánh sáng ngược, 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| Hôm nay tôi có một giấc mơ! (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 "Tôi có một giấc mơ!" cùng tiếng vang |
|12| Tôi có một giấc mơ rằng một ngày nào đó... | Thiếu niên da trắng và da đen chạy sát vai nhau | Cảnh quay bám theo đầy năng động, hạt phim | Tiếng thở + gió |
|13| ...con cháu của những người từng là nô lệ... cùng ngồi lại... | Ghế dài trong trường đại học, hai sinh viên cùng đọc sách | Đối xứng ngang, nền nhòe | Tiếng lật trang sách |
|14| Hôm nay tôi có một giấc mơ! (lần 2) | Nghiêng mặt 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 trong ánh sáng ngược | Tiếng hô lần hai, đám đông đồng thanh hưởng ứng |
|15| Hãy để tự do ngân vang... | 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| Cuối cùng chúng ta tự do! Cuối cùng chúng ta tự do! | 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 | "Cuối cùng chúng ta tự do!" 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, bối cảnh Đà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 vọng Capitol Hall, 44.1 kHz, MP3 128 kbps, 15-25 giây, [Câu mở đầu] nhấn mạnh "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, kèm 1 giây tiếng vỗ tay mờ dần ở 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, vanilla JS  
- Dải cuộn ngang, 100 vw/vh mỗi trang  
- 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 một cú nhấp chuột  

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

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

# Tạo và triển khai HTML tương tác: Phong cách ảnh chân thực Đen trắng Sách âm thanh tương tác "I Have a Dream" theo phong cách nhiếp ảnh + thuyết minh giọng nam (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 âm thanh toàn màn hình theo chiều ngang:  
1. 16 hình minh họa siêu chân thực đen trắng theo phong cách nhiếp ảnh (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 baritone nam 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, làm nổi bật phụ đề đồng bộ, tương thích PC và thiết bị di động  
4. Gói triển khai một cú nhấp chuột (index.html / assets / README.md)  

---

## 2. Phân cảnh toàn văn & mốc thời gian (tổ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, bầu trời nổi bật, 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 về đám đông dày đặc, biểu ngữ "We Demand Equal Rights" | Góc nhìn trên không đen trắng, tương phản cao | Cao trào dâng lên liên tục, 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 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 đơn độc ngồi trên đống đổ nát, 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 trong còng, dây xích đã đứt một phần | Macro, ánh sáng mạnh chiếu lên bàn tay, mắt xích nổi bật rõ nét | Tiếng còng xích va nhau + giọng nam trầm ngâ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" đóng 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 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 dá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 tông da khác nhau | Ánh sáng top-light từ softbox, 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 diễu hành ngược sáng, phía trước là cánh cổng ánh sáng | Ngược sáng, viền hào quang 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 mảnh như kim | Tiếng hô "I have a dream!" đầu tiên 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 | Cảnh quay bám theo năng độ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 trang sách |
|14| I have a dream today! (lần 2) | Góc nghiêng của diễn giả, miệng mở, nền có đốm sáng | Ống kính 35 mm, hạt bụi lơ lửng 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 nổi bật, 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 vang dội |

---

## 3. Prompt tạo ảnh thống nhất  
siêu chân thực đen trắng ảnh chụp, ống kính 50 mm, tương phản cao, hạt phim, DOF nông, [Cảnh Trang-X], cuộc biểu tì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 baritone nam, cách thể hiện kiểu 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", đỉnh -3 dB  

Mỗi đoạn dùng câu mở đầu của trang làm nội dung thuyết minh, kết thúc bằng 1 giây tiếng vỗ tay nhỏ dần.  

---

## 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 có phần phụ thuộc, JS thuần  
- Dải cuộn ngang, mỗi trang 100 vw/vh  
- Phụ đề được làm nổi bật đồ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 một cú nhấp chuột  

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 đen trắng ảnh JPG, đặ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 trên trang web không xuất hiện màn hình trống, phụ đề được làm nổi bật theo âm thanh  
[ ] Tự động hiện lời nhắc xoay ngang trên thiết bị di động