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

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


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

---

## 2. สตอรีบอร์ดและไทม์ไลน์ข้อความเต็ม (รวม 16 หน้า)  
| หน้า | ประโยคเปิด (ภาษาอังกฤษต้นฉบับ) | เหตุการณ์ภาพ | องค์ประกอบและแสง | เสียงหลัก |
|---|---|---|---|---|
| 1 | ฉันยินดีที่ได้มาร่วมกับพวกคุณในวันนี้... | ภาพระยะไกลของอนุสรณ์สถานลินคอล์น ฝูงชนกำลังรวมตัว เงาคนย้อนแสง | มุมกล้องต่ำ ไฮไลต์บนท้องฟ้า ตัวละครเป็นเงาดำ | เปิดด้วย "ฉันยินดีที่ได้มาร่วมกับพวกคุณ..." พร้อมเสียงก้องในหอประชุม |
| 2 | ...จะถูกจารึกว่าเป็นการชุมนุมครั้งยิ่งใหญ่ที่สุด... | มุมมองเหนือศีรษะของฝูงชนหนาแน่น ป้าย "เราต้องการสิทธิเท่าเทียม" | ภาพขาวดำมุมสูง คอนทราสต์สูง | เสียงไต่ระดับต่อเนื่อง มีเสียงปรบมือห่าง ๆ อยู่เบื้องหลัง |
| 3 | แต่หนึ่งร้อยปีต่อมา... | ภาพระยะใกล้ของอนุสรณ์สถานประกาศเลิกทาส พันด้วยโซ่ขึ้นสนิม | ทางยาวโฟกัสปานกลาง พื้นหลังมืดเน้นอนุสรณ์สถาน | จังหวะการพูดช้าลง เน้น "หนึ่งร้อยปีต่อมา" |
| 4 | คนผิวดำอาศัยอยู่บนเกาะอันโดดเดี่ยว... | ชายผิวดำผู้โดดเดี่ยวนั่งอยู่บนซากปรักหักพัง มองเมืองที่อยู่ไกลออกไป | มุมกว้าง ฉากหน้าดำลึก ตึกระฟ้าไกล ๆ มีแสงส่อง | เสียงบรรยากาศที่เงียบเหงา |
| 5 | ...ตรวนแห่งการแบ่งแยก... | ภาพระยะใกล้ของมือที่ถูกใส่ตรวน โซ่ขาดออกบางส่วน | มาโคร แสงแรงส่องที่มือ ข้อโซ่ถูกเน้นอย่างชัดเจน | เสียงตรวนกระทบกัน + เสียงชายพึมพำ |
| 6 | ...โซ่ตรวนแห่งการเลือกปฏิบัติ | เยาวชนผิวดำถูกปฏิเสธที่ประตู มีป้าย "เฉพาะคนขาว" | มุมมองผ่านรอยแยกของประตู ป้ายสว่างเกิน | เสียงประตู "ปิดกระแทก" |
| 7 | เรามาขึ้นเงินตามเช็คนี้... | เคาน์เตอร์ธนาคาร คนผิวดำยื่นเช็คเปล่า | องค์ประกอบสมมาตร แสงจากเคาน์เตอร์ส่องสว่าง | เสียงกระดาษเลื่อน |
| 8 | มันจะเป็นอันตรายร้ายแรงต่อชาติ... | ค้อนผู้พิพากษาลอยค้างกลางอากาศ ฝูงชนด้านหลังเบลอ | มุมต่ำ เงารูปทรงของค้อน | เสียงค้อนที่มีเสียงก้องตามหลัง |
| 9 | เราเดินเพียงลำพังไม่ได้ | มือของคนผิวดำและผิวขาวซ้อนทับกัน โทนผิวต่างกัน | แสงซอฟต์บ็อกซ์จากด้านบน พื้นผิวมือชัดเจน | เสียงหัวใจเต้นความถี่ต่ำ |
|10| เราหันหลังกลับไม่ได้ | ฝูงชนเดินขบวนย้อนแสง มีช่องแสงอยู่เบื้องหน้า | ย้อนแสง ขอบตัวละครมีฮาโล | เสียงฝีเท้าพร้อมเพรียง กลองจังหวะความถี่ต่ำ |
|11| วันนี้ฉันมีความฝัน! (ครั้งที่ 1) | เด็กมองขึ้นไปยังแสง มีแสงสะท้อนในดวงตา | ภาพระยะใกล้ของดวงตา ไฮไลต์เรียวแหลม | การตะโกน "ฉันมีความฝัน!" ครั้งแรกพร้อมเสียงก้อง |
|12| ฉันฝันว่าในวันหนึ่ง... | วัยรุ่นผิวขาวและผิวดำวิ่งเคียงไหล่กัน | ช็อตติดตามเคลื่อนไหว เกรนฟิล์ม | เสียงหายใจ + ลม |
|13| ...บุตรของอดีตทาส... นั่งร่วมกัน... | ม้านั่งในมหาวิทยาลัย นักศึกษาสองคนอ่านหนังสือด้วยกัน | สมมาตรแนวนอน พื้นหลังเบลอ | เสียงพลิกหน้าหนังสือ |
|14| วันนี้ฉันมีความฝัน! (ครั้งที่ 2) | ด้านข้างใบหน้าของผู้ปราศรัย อ้าปาก พื้นหลังเป็นจุดแสง | เลนส์ 35 มม. อนุภาคฝุ่นลอยในแสงย้อน | การตะโกนครั้งที่สอง ฝูงชนขานรับพร้อมกัน |
|15| ให้เสรีภาพดังกังวาน... | ภาพระยะใกล้ของระฆังเสรีภาพ รอยร้าวชัดเจน | แสงจากด้านบน ตัวระฆังสว่างเด่น พื้นหลังดำ | เสียงระฆังกังวานยาวนาน |
|16| ในที่สุดก็เป็นอิสระ! ในที่สุดก็เป็นอิสระ! | นกบินพุ่งขึ้น ฝูงชนยกมือ | ชัตเตอร์ความเร็วสูง ตรึงการเคลื่อนไหวของปีก | "ในที่สุดก็เป็นอิสระ!" ซ้ำสามครั้ง พร้อมเสียงปรบมือกึกก้อง |

---

## 3. พรอมต์สร้างภาพแบบรวม  
ภาพถ่ายขาวดำสมจริงสูง, เลนส์ 50 มม., คอนทราสต์สูง, เกรนฟิล์ม, 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  

- ไม่มีส่วนพึ่งพา ใช้ 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 มม.)  
2. คลิปเสียงบรรยาย 16 คลิป (เสียงบาริโทนชายต้นฉบับ คลิปละ 15-25 วินาที, 44.1 kHz, MP3, รีเวิร์บแบบหอประชุม)  
3. หน้าเว็บภาษาอังกฤษ: เลื่อนแนวนอน พลิกหน้าอัตโนมัติ/ด้วยตนเอง, ไฮไลต์คำบรรยายซิงก์กับเสียง รองรับทั้ง PC และมือถือ  
4. แพ็กเกจสำหรับดีพลอยด้วยคลิกเดียว (index.html / assets / README.md)  

---

## 2. สตอรีบอร์ดและไทม์ไลน์ข้อความเต็ม (รวม 16 หน้า)  
| หน้า | ประโยคเปิด (ภาษาอังกฤษต้นฉบับ) | เหตุการณ์ภาพ | องค์ประกอบและแสง | เสียงหลัก |
|---|---|---|---|---|
| 1 | ข้าพเจ้ามีความยินดีที่ได้มาร่วมกับท่านในวันนี้... | มุมมองไกลของอนุสรณ์สถานลินคอล์น ฝูงชนกำลังรวมตัว เงาร่างย้อนแสง | มุมกล้องต่ำ ไฮไลต์ท้องฟ้า ตัวบุคคลเป็นเงาดำ | เปิดด้วย “ข้าพเจ้ามีความยินดีที่ได้มาร่วมกับท่าน...” พร้อมเสียงก้องในหอประชุม |
| 2 | ...จะถูกจารึกไว้ว่าเป็นการชุมนุมครั้งยิ่งใหญ่ที่สุด... | มุมมองจากเหนือศีรษะของฝูงชนหนาแน่น ป้าย “เราต้องการสิทธิที่เท่าเทียม” | มุมสูงขาวดำ คอนทราสต์สูง | การไต่ระดับอารมณ์ต่อเนื่อง มีเสียงปรบมือแผ่วไกลเป็นพื้นหลัง |
| 3 | แต่หนึ่งร้อยปีต่อมา... | ภาพใกล้ของอนุสรณ์สถานประกาศเลิกทาส มีโซ่ขึ้นสนิมพันรอบ | ระยะโฟกัสปานกลาง พื้นหลังมืดเน้นอนุสรณ์สถาน | จังหวะการพูดช้าลง เน้นคำว่า “หนึ่งร้อยปีต่อมา” |
| 4 | ชาวนิโกรยังคงอาศัยอยู่บนเกาะอันโดดเดี่ยว... | ชายผิวดำผู้โดดเดี่ยวนั่งอยู่บนซากปรักหักพัง มองไปยังเมืองที่อยู่ไกลออกไป | มุมกว้าง ฉากหน้าดำสนิท ตึกระฟ้าไกลออกไปมีแสงส่อง | เสียงบรรยากาศอันโดดเดี่ยว |
| 5 | ...ตรวนแห่งการแบ่งแยก... | ภาพใกล้ของมือที่ถูกใส่ตรวน โซ่ขาดออกบางส่วน | มาโคร แสงแรงส่องบนมือ ข้อโซ่เด่นชัด | เสียงตรวนกระทบกัน + เสียงชายพึมพำ |
| 6 | ...โซ่ตรวนแห่งการเลือกปฏิบัติ | เยาวชนผิวดำถูกปฏิเสธที่ประตู มีป้าย “เฉพาะคนผิวขาว” | มุมมองผ่านรอยแง้มของประตู ป้ายสว่างเกิน | เสียงประตู “ปิดกระแทก” |
| 7 | เรามาที่นี่เพื่อขึ้นเงินเช็คใบนี้... | เคาน์เตอร์ธนาคาร คนผิวดำยื่นเช็คเปล่า | องค์ประกอบสมมาตร แสงจากเคาน์เตอร์ส่องสว่าง | เสียงกระดาษเลื่อน |
| 8 | นี่จะเป็นเรื่องร้ายแรงถึงชีวิตสำหรับประเทศ... | ค้อนผู้พิพากษาค้างอยู่กลางอากาศ ฝูงชนด้านหลังเบลอ | มุมต่ำ เงาดำของค้อน | เสียงค้อนกระทบที่ก้องตามมาช้า ๆ |
| 9 | เราไม่อาจเดินไปเพียงลำพัง | มือของคนผิวดำและผิวขาวซ้อนทับกัน โทนสีผิวต่างกัน | แสงบนจากซอฟต์บ็อกซ์ เห็นพื้นผิวมือชัดเจน | เสียงหัวใจเต้นความถี่ต่ำ |
|10| เราไม่อาจหันหลังกลับ | ฝูงชนเดินขบวนย้อนแสง มีช่องแสงอยู่เบื้องหน้า | แสงย้อนขอบ ตัวบุคคลมีฮาโลที่ขอบ | เสียงฝีเท้าพร้อมเพรียง กลองจังหวะความถี่ต่ำ |
|11| วันนี้ข้าพเจ้ามีความฝัน! (ครั้งที่ 1) | เด็กมองขึ้นไปยังแสง มีเงาสะท้อนในดวงตา | ภาพใกล้ดวงตา ไฮไลต์คมดุจเข็ม | ตะโกน “ข้าพเจ้ามีความฝัน!” ครั้งแรกพร้อมเสียงก้อง |
|12| ข้าพเจ้าฝันว่าในวันหนึ่ง... | วัยรุ่นผิวขาวและผิวดำวิ่งเคียงบ่าเคียงไหล่กัน | ช็อตติดตามการเคลื่อนไหวแบบไดนามิก เกรนฟิล์ม | เสียงหายใจ + ลม |
|13| ...บุตรของอดีตทาส... ได้นั่งร่วมกัน... | ม้านั่งในมหาวิทยาลัย นักศึกษาสองคนอ่านหนังสือด้วยกัน | สมมาตรแนวนอน ฉากหลังเบลอ | เสียงพลิกหน้าหนังสือ |
|14| วันนี้ข้าพเจ้ามีความฝัน! (ครั้งที่ 2) | ภาพด้านข้างของผู้กล่าวสุนทรพจน์ อ้าปาก พื้นหลังเป็นจุดแสง | เลนส์ 35 มม. ฝุ่นละอองลอยในแสงย้อน | ตะโกนครั้งที่สอง ฝูงชนขานรับพร้อมกัน |
|15| จงให้เสรีภาพดังกังวาน... | ภาพใกล้ระฆังเสรีภาพ เห็นรอยร้าวชัดเจน | แสงจากด้านบน ตัวระฆังสว่างเด่น ฉากหลังดำ | เสียงระฆังกังวานยาวนาน |
|16| เป็นอิสระในที่สุด! เป็นอิสระในที่สุด! | นกบินทะยานขึ้น ฝูงชนชูมือ | ชัตเตอร์ความเร็วสูง ตรึงการเคลื่อนไหวของปีก | “เป็นอิสระในที่สุด!” สามครั้ง พร้อมเสียงปรบมือกึกก้อง |

---

## 3. พรอมต์สร้างภาพแบบรวม  
ภาพถ่ายขาวดำสมจริงสูง, เลนส์ 50 มม., คอนทราสต์สูง, เกรนฟิล์ม, 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 วินาที, [ประโยคเปิด] เน้นคำว่า “ข้าพเจ้ามีความฝัน”, ระดับพีก -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  

- ไม่ต้องพึ่งพาไลบรารี ใช้ 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  
[ ] ปัดหน้าเว็บแนวนอนโดยไม่มีหน้าจอว่าง, คำบรรยายไฮไลต์ตามเสียง  
[ ] มีข้อความแจ้งให้หมุนหน้าจอเป็นแนวนอนปรากฏขึ้นอัตโนมัติบนมือถือ