I Have a Dream หนังสือภาพเสียง

# สร้างและปรับใช้ HTML อินเทอร์แอ็กทีฟ: สไตล์ภาพถ่ายขาวดำสมจริง + คำบรรยายเสียงผู้ชาย "I Have a Dream" หนังสือเสียงอินเทอร์แอ็กทีฟ (หน้าภาษาอังกฤษ)  


## 1. เป้าหมายโดยรวม  
แปลงสุนทรพจน์ฉบับเต็มของ Martin Luther King Jr. เมื่อวันที่ 28 สิงหาคม 1963 (เนื้อหา "I Have a Dream") ให้เป็นหนังสือเสียงเต็มหน้าจอแนวนอน:  
1. ภาพประกอบสไตล์ภาพถ่ายขาวดำสมจริงสูง 16 ภาพ (1920×1080, คอนทราสต์สูง, เกรนฟิล์ม, มุมมองเลนส์ไพรม์ 50 mm)  
2. คลิปเสียงบรรยาย 16 คลิป (เสียงบาริโทนผู้ชายต้นฉบับ, คลิปละ 15-25 วินาที, 44.1 kHz, MP3, เสียงก้องแบบหอประชุม)  
3. เว็บเพจภาษาอังกฤษ: เลื่อนแนวนอน, พลิกหน้าอัตโนมัติ/ด้วยตนเอง, ไฮไลต์คำบรรยายให้ตรงกับเสียง, รองรับ PC และมือถือ  
4. แพ็กเกจปรับใช้ด้วยคลิกเดียว (index.html / assets / README.md)  

---

## 2. สตอรีบอร์ดและไทม์ไลน์ข้อความเต็ม (รวม 16 หน้า)  
| หน้า | ประโยคเปิด (ภาษาอังกฤษต้นฉบับ) | เหตุการณ์ภาพ | องค์ประกอบและแสง | เสียงสำคัญ |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | มุมไกลของอนุสรณ์สถานลินคอล์น ฝูงชนกำลังรวมตัว เงาร่างย้อนแสง | มุมกล้องต่ำ ไฮไลต์บนท้องฟ้า ตัวละครเป็นเงาดำ | เปิดด้วย "I am happy to join with you..." พร้อมเสียงก้องในหอประชุม |
| 2 | ...will go down as the greatest demonstration... | มุมสูงของฝูงชนหนาแน่น ป้าย "We Demand Equal Rights" | ภาพขาวดำมุมสูง คอนทราสต์สูง | การไต่ระดับอย่างต่อเนื่อง เสียงปรบมือเบา ๆ จากระยะไกล |
| 3 | But one hundred years later... | ภาพระยะใกล้ของอนุสาวรีย์ประกาศเลิกทาส มีโซ่ขึ้นสนิมพันรอบ | ระยะโฟกัสปานกลาง พื้นหลังมืดเน้นอนุสาวรีย์ | จังหวะการพูดช้าลง เน้นคำว่า "one hundred years later" |
| 4 | the Negro lives on a lonely island... | ชายผิวดำโดดเดี่ยวนั่งอยู่บนซากปรัก มองไปยังเมืองที่อยู่ไกล | มุมกว้าง ฉากหน้าดำสนิท ตึกระฟ้าไกล ๆ สว่าง | เสียงบรรยากาศอันเงียบงัน |
| 5 | ...the manacles of segregation... | ภาพระยะใกล้ของมือที่ถูกใส่ตรวน โซ่ขาดออกบางส่วน | มาโคร แสงแรงส่องที่มือ ข้อต่อโซ่โดดเด่น | เสียงตรวนกระทบกัน + เสียงผู้ชายพึมพำ |
| 6 | ...chains of discrimination. | เยาวชนผิวดำถูกปฏิเสธที่ประตู มีป้าย "WHITES ONLY" | มุมมองผ่านช่องแง้มประตู ป้ายสว่างจ้าจนเกินพอดี | เสียงประตู "ปิดกระแทก" |
| 7 | We have come to cash this check... | เคาน์เตอร์ธนาคาร คนผิวดำยื่นเช็คเปล่า | องค์ประกอบสมมาตร แสงจากเคาน์เตอร์ส่องสว่าง | เสียงเลื่อนกระดาษ |
| 8 | It would be fatal for the nation... | ค้อนผู้พิพากษาลอยค้างกลางอากาศ ฝูงชนด้านหลังเบลอ | มุมต่ำ เงาร่างของค้อน | เสียงค้อนสะท้อนก้องอย่างหน่วง |
| 9 | We cannot walk alone. | มือของคนผิวดำและผิวขาวซ้อนทับกัน โทนสีผิวต่างกัน | แสงบนจากซอฟต์บ็อกซ์ เห็นพื้นผิวมือชัดเจน | เสียงหัวใจเต้นย่านความถี่ต่ำ |
|10| We cannot turn back. | ฝูงชนเดินขบวนย้อนแสง มีช่องแสงอยู่ข้างหน้า | แสงย้อน ขอบร่างมีฮาโล | เสียงฝีเท้าพร้อมกัน จังหวะกลองย่านความถี่ต่ำ |
|11| I have a dream today! (ครั้งที่ 1) | เด็กมองขึ้นไปยังแสง แสงสะท้อนในดวงตา | ภาพระยะใกล้ของดวงตา ไฮไลต์คมดุจเข็ม | ตะโกน "I have a dream!" ครั้งแรกพร้อมเสียงก้อง |
|12| I have a dream that one day... | วัยรุ่นผิวขาวและผิวดำวิ่งเคียงบ่าเคียงไหล่ | ช็อตติดตามที่มีไดนามิก เกรนฟิล์ม | เสียงหายใจ + ลม |
|13| ...sons of former slaves... sit together... | ม้านั่งในมหาวิทยาลัย นักศึกษาสองคนอ่านหนังสือด้วยกัน | สมมาตรแนวนอน พื้นหลังเบลอ | เสียงพลิกหน้าหนังสือ |
|14| I have a dream today! (ครั้งที่ 2) | ภาพด้านข้างของผู้ปราศรัย อ้าปาก ฉากหลังเป็นจุดแสง | เลนส์ 35 mm อนุภาคฝุ่นลอยในแสงย้อน | ตะโกนครั้งที่สอง ฝูงชนขานรับพร้อมกัน |
|15| Let freedom ring... | ภาพระยะใกล้ของระฆังเสรีภาพ เห็นรอยร้าวชัดเจน | แสงจากด้านบน ตัวระฆังสว่างเด่น ฉากหลังดำ | เสียงระฆังกังวานยาวนาน |
|16| Free at last! Free at last! | นกบินขึ้น ฝูงชนยกมือ | ชัตเตอร์ความเร็วสูง หยุดการเคลื่อนไหวของปีก | "Free at last!" ซ้ำสามครั้ง ตามด้วยเสียงปรบมือกึกก้อง |

---

## 3. พรอมป์ต์สร้างภาพแบบรวม  
ภาพถ่ายขาวดำสมจริงสูง, เลนส์ 50 mm, คอนทราสต์สูง, เกรนฟิล์ม, DOF ตื้น, [ฉากหน้า-X], การชุมนุมเรียกร้องสิทธิพลเมืองในทศวรรษ 1960, ฉากหลังอนุสรณ์สถานลินคอล์น, ช่วงเวลาชี้ขาด, --ar 16:9 --v 5 --q 2  

แทนที่ `Page-X Scene` ด้วยเหตุการณ์ที่ตรงกับแต่ละหน้า โดยคงระดับเกรนและคอนทราสต์ให้สม่ำเสมอ  

---

## 4. พรอมป์ต์สร้างเสียงแบบรวม  
เสียงบาริโทนผู้ชาย การถ่ายทอดสไตล์ MLK จังหวะช้า เสียงก้องแบบ Capitol Hall, 44.1 kHz, MP3 128 kbps, 15-25 วินาที, [ประโยคเปิด] เน้น "I have a dream", จุดพีก -3 dB  

แต่ละคลิปใช้ประโยคเปิดของหน้านั้นเป็นเนื้อหาบรรยาย และให้เสียงปรบมือเฟดหาย 1 วินาทีในตอนท้าย  

---

## 5. เทคโนโลยีเว็บและโครงสร้างไดเรกทอรี  
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  

- ไม่มี dependencies ใช้ vanilla JS  
- แถบเลื่อนแนวนอน หน้าละ 100 vw/vh  
- ไฮไลต์คำบรรยายให้ซิงก์กับเสียง  
- ส่วนควบคุม: เล่น / หยุดชั่วคราว / ถัดไป / ก่อนหน้า / ปิดเสียง  

---

## 6. โค้ดหลัก (จำเป็น)  
```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. การปรับใช้ด้วยคลิกเดียว  

README มีลิงก์และคำแนะนำในการสลับเอฟเฟกต์เสียง  

## 8. รายการตรวจสอบก่อนส่งมอบ  
[ ] JPG ขาวดำ 16 ไฟล์ ชื่อ page-01 ~ page-16 ขนาด ≤ 600 KB  
[ ] MP3 16 ไฟล์ ชื่อ 01.mp3 ~ 16.mp3 ขนาด ≤ 400 KB  
[ ] เว็บเพจปัดแนวนอนได้โดยไม่มีหน้าจอว่าง คำบรรยายไฮไลต์ตามเสียง  
[ ] มีข้อความแจ้งให้หมุนหน้าจอมือถือเป็นแนวนอนปรากฏอัตโนมัติ

# สร้างและปรับใช้ HTML อินเทอร์แอ็กทีฟ: สไตล์ภาพถ่ายสมจริง ขาวดำ หนังสือเสียงอินเทอร์แอกทีฟ "I Have a Dream" (หน้าเว็บภาษาอังกฤษ) สไตล์ภาพถ่าย + เสียงบรรยายชาย  


## 1. เป้าหมายโดยรวม  
แปลงสุนทรพจน์ฉบับเต็มของ Martin Luther King Jr. เมื่อวันที่ 28 สิงหาคม 1963 (เนื้อหา "I Have a Dream") เป็นหนังสือเสียงเต็มจอแบบแนวนอน:  
1. ภาพประกอบสไตล์ภาพถ่ายสมจริงขั้นสูง 16 ภาพ ขาวดำ สไตล์ภาพถ่าย (1920×1080 คอนทราสต์สูง เกรนฟิล์ม มุมมองเลนส์ไพรม์ 50 mm)  
2. คลิปเสียงบรรยาย 16 คลิป (เสียงบาริโทนชายต้นฉบับ คลิปละ 15-25 วินาที, 44.1 kHz, MP3, รีเวิร์บแบบหอประชุม)  
3. หน้าเว็บภาษาอังกฤษ: เลื่อนแนวนอน พลิกหน้าอัตโนมัติ/ด้วยตนเอง ไฮไลต์คำบรรยายซิงก์กับเสียง รองรับ PC และมือถือ  
4. แพ็กเกจสำหรับดีพลอยด้วยคลิกเดียว (index.html / assets / README.md)  

---

## 2. สตอรีบอร์ดและไทม์ไลน์ข้อความเต็ม (รวม 16 หน้า)  
| หน้า | ประโยคเริ่มต้น (ภาษาอังกฤษต้นฉบับ) | เหตุการณ์ภาพ | องค์ประกอบและแสง | เสียงสำคัญ |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | มุมไกลของอนุสรณ์สถานลินคอล์น ฝูงชนเริ่มรวมตัว เงาคนย้อนแสง | มุมกล้องต่ำ แสงเด่นบนท้องฟ้า บุคคลเป็นเงาดำ | เปิดด้วย "I am happy to join with you..." พร้อมเสียงก้องของหอประชุม |
| 2 | ...will go down as the greatest demonstration... | มุมสูงของฝูงชนหนาแน่น ป้าย "We Demand Equal Rights" | มุมมองทางอากาศ ขาวดำ, คอนทราสต์สูง | การไต่ระดับอย่างต่อเนื่อง มีเสียงปรบมือแผ่ว ๆ อยู่เบื้องหลัง |
| 3 | But one hundred years later... | ภาพระยะใกล้ของอนุสรณ์สถาน Emancipation Proclamation ที่มีโซ่ขึ้นสนิมพันอยู่ | ระยะโฟกัสปานกลาง ฉากหลังมืดเพื่อเน้นอนุสรณ์สถาน | จังหวะการพูดช้าลง เน้นคำว่า "one hundred years later" |
| 4 | the Negro lives on a lonely island... | ชายผิวดำที่โดดเดี่ยวนั่งอยู่บนซากปรัก มองไปยังเมืองที่อยู่ไกลออกไป | เลนส์มุมกว้าง พื้นหน้าดำสนิท ตึกระฟ้าไกล ๆ มีแสงส่อง | เสียงบรรยากาศอันเดียวดาย |
| 5 | ...the manacles of segregation... | ภาพระยะใกล้ของมือที่ถูกใส่ตรวน โซ่ขาดออกบางส่วน | มาโคร แสงจัดบนมือ ข้อต่อโซ่เด่นชัด | เสียงตรวนกระทบกัน + เสียงชายพึมพำ |
| 6 | ...chains of discrimination. | เยาวชนผิวดำถูกปฏิเสธที่หน้าประตู มีป้าย "WHITES ONLY" | มุมมองผ่านรอยแง้มของประตู ป้ายสว่างจ้าเกินพอดี | เสียงประตู "ปิดกระแทก" |
| 7 | We have come to cash this check... | เคาน์เตอร์ธนาคาร คนผิวดำยื่นเช็คเปล่า | องค์ประกอบสมมาตร มีแสงจากเคาน์เตอร์ส่อง | เสียงกระดาษเลื่อน |
| 8 | It would be fatal for the nation... | ค้อนผู้พิพากษาลอยค้างกลางอากาศ ฝูงชนด้านหลังพร่ามัว | มุมต่ำ เงารูปทรงของค้อน | เสียงค้อนก้องสะท้อนแบบหน่วงเวลา |
| 9 | We cannot walk alone. | มือของคนผิวดำและผิวขาวซ้อนทับกัน ผิวต่างเฉดสี | แสงด้านบนจากซอฟต์บ็อกซ์ เห็นพื้นผิวมือชัดเจน | เสียงหัวใจเต้นความถี่ต่ำ |
|10| We cannot turn back. | ฝูงชนเดินขบวนย้อนแสง มีช่องแสงอยู่เบื้องหน้า | แสงย้อน ขอบตัวบุคคลเป็นวงเรืองแสง | เสียงฝีเท้าพร้อมเพรียง กลองจังหวะความถี่ต่ำ |
|11| I have a dream today! (ครั้งที่ 1) | เด็กมองขึ้นไปยังแสง มีเงาสะท้อนในดวงตา | ภาพระยะใกล้ของดวงตา มีไฮไลต์เล็กคมดุจเข็ม | ตะโกน "I have a dream!" ครั้งแรกพร้อมเสียงก้อง |
|12| I have a dream that one day... | วัยรุ่นผิวขาวและผิวดำวิ่งเคียงบ่าเคียงไหล่ | ช็อตติดตามที่เคลื่อนไหว เกรนฟิล์ม | เสียงหายใจ + ลม |
|13| ...sons of former slaves... sit together... | ม้านั่งมหาวิทยาลัย นักศึกษาสองคนอ่านหนังสือด้วยกัน | สมมาตรตามแนวนอน ฉากหลังเบลอ | เสียงพลิกหน้าหนังสือ |
|14| I have a dream today! (ครั้งที่ 2) | ใบหน้าด้านข้างของผู้พูด ปากอ้า ฉากหลังเป็นจุดแสง | เลนส์ 35 mm ฝุ่นละอองลอยอยู่ในแสงย้อน | ตะโกนครั้งที่สอง ฝูงชนขานรับพร้อมกัน |
|15| Let freedom ring... | ภาพระยะใกล้ของระฆังเสรีภาพ เห็นรอยร้าวชัดเจน | แสงจากด้านบน ตัวระฆังสว่างเด่น ฉากหลังดำ | เสียงระฆังดังกังวานยาวนาน |
|16| Free at last! Free at last! | นกบินทะยานขึ้น ฝูงชนชูมือ | ชัตเตอร์ HighSpeed หยุดการเคลื่อนไหวของปีกไว้ | "Free at last!" ซ้ำสามครั้ง พร้อมเสียงปรบมือกึกก้อง |

---

## 3. พรอมป์ต์สร้างภาพแบบเดียวกัน  
ภาพถ่ายสมจริงขั้นสูง ขาวดำ ภาพถ่าย, เลนส์ 50 mm, คอนทราสต์สูง, เกรนฟิล์ม, DOF ตื้น, [ฉากหน้า X], การชุมนุมเรียกร้องสิทธิพลเมืองในทศวรรษ 1960, ฉากหลังเป็นอนุสรณ์สถานลินคอล์น, ช่วงเวลาชี้ขาด, --ar 16:9 --v 5 --q 2  

แทนที่ `Page-X Scene` ด้วยเหตุการณ์ที่ตรงกับแต่ละหน้า และรักษาระดับเกรนกับคอนทราสต์ให้สม่ำเสมอ  

---

## 4. พรอมป์ต์สร้างเสียงแบบเดียวกัน  
เสียงบาริโทนชาย การถ่ายทอดสไตล์ MLK จังหวะช้า รีเวิร์บ Capitol Hall, 44.1 kHz, MP3 128 kbps, 15-25 วินาที, [ประโยคเริ่มต้น] เน้นคำว่า "I have a dream", ระดับสูงสุด -3 dB  

แต่ละคลิปใช้ประโยคเริ่มต้นของหน้านั้นเป็นเนื้อหาบรรยาย และปิดท้ายด้วยเสียงปรบมือเฟดออก 1 วินาที  

---

## 5. ชุดเทคโนโลยีเว็บและโครงสร้างไดเรกทอรี  
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  

- ไม่มี dependencies ใช้ vanilla JS  
- แถบเลื่อนแนวนอน หน้าละ 100 vw/vh  
- ไฮไลต์คำบรรยายซิงก์กับเสียง  
- ปุ่มควบคุม: เล่น / หยุดชั่วคราว / ถัดไป / ก่อนหน้า / ปิดเสียง  

---

## 6. โค้ดสำคัญ (ต้องมี)  
```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. การดีพลอยด้วยคลิกเดียว  

README มีลิงก์และคำแนะนำการสลับเอฟเฟ็กต์เสียง  

## 8. ตรวจสอบก่อนส่งมอบ  
[ ] 16 ขาวดำ JPG 16 ไฟล์ ชื่อ page-01 ~ page-16 ขนาดไม่เกิน 600 KB  
[ ] MP3 16 ไฟล์ ชื่อ 01.mp3 ~ 16.mp3 ขนาดไม่เกิน 400 KB  
[ ] ปัดหน้าเว็บในแนวนอนได้โดยไม่มีหน้าจอว่าง คำบรรยายไฮไลต์ตามเสียง  
[ ] มีข้อความแจ้งให้หมุนเป็นแนวนอนบนมือถือปรากฏขึ้นอัตโนมัติ