《我有一個夢想》 有聲繪本

# 建立並部署互動式 HTML：寫實黑白攝影風格 + 男聲旁白 《我有一個夢想》互動有聲書（英文頁面）  


## 1. 總體目標  
將 馬丁·路德·金於 1963 年 8 月 28 日發表的完整演講（《我有一個夢想》文本） 製作成橫向全螢幕有聲書：  
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 | 我很高興今天能與你們相聚…… | 遠景中的林肯紀念堂、聚集的人群、逆光剪影 | 低機位拍攝，天空高光，人物呈剪影 | 「我很高興與你們相聚……」開場，禮堂回聲 |
| 2 | ……將作為最偉大的示威活動載入史冊…… | 密集人群的俯視畫面，橫幅寫著「我們要求平等權利」 | 航拍黑白畫面，高對比度 | 持續鋪陳，背景中傳來遠處掌聲 |
| 3 | 但一百年後…… | 《解放宣言》紀念碑特寫，纏繞著鏽蝕鎖鏈 | 中焦距，深色背景突顯紀念碑 | 放慢語速，強調「一百年後」 |
| 4 | 黑人生活在一座孤獨的島嶼上…… | 一名孤立的黑人男子坐在廢墟上，凝望遠方城市 | 廣角鏡頭，前景深黑，遠處摩天樓被照亮 | 孤寂的環境聲 |
| 5 | ……種族隔離的鐐銬…… | 戴著鐐銬的雙手特寫，鎖鏈部分斷裂 | 微距，強光照在手部，鏈環高光鮮明 | 鐐銬碰撞聲 + 男聲低語 |
| 6 | ……歧視的鎖鏈。 | 被拒於門外的黑人青年，「僅限白人」標誌 | 從門縫視角拍攝，標誌過曝 | 門被「砰地」關上的聲音 |
| 7 | 我們來到這裡兌現這張支票…… | 銀行櫃檯前，一名黑人遞出空白支票 | 對稱構圖，櫃檯燈光照亮畫面 | 紙張滑動聲 |
| 8 | 這對國家將是致命的…… | 法官木槌懸在半空，背景人群虛化 | 低機位，木槌剪影 | 木槌聲的延遲迴響 |
| 9 | 我們不能獨自前行。 | 黑人和白人的手交疊，膚色各異 | 柔光箱頂光，手部紋理清晰 | 低頻心跳聲 |
|10| 我們不能回頭。 | 逆光中的遊行人群，前方是一道光門 | 逆光，人物邊緣泛光 | 同步腳步聲、低頻鼓點 |
|11| 今天我有一個夢想！（第 1 次） | 仰望光線的孩子，眼中映著光 | 眼部特寫，針尖般高光 | 首次高喊「我有一個夢想！」，帶迴聲 |
|12| 我夢想有一天…… | 白人和黑人少年並肩奔跑 | 動態跟拍，膠片顆粒 | 呼吸聲 + 風聲 |
|13| ……昔日奴隸的兒子……坐在一起…… | 大學長椅上，兩名學生一起閱讀 | 水平對稱構圖，背景虛化 | 書頁翻動聲 |
|14| 今天我有一個夢想！（第 2 次） | 演講者側臉，張開的嘴，背景為光斑 | 35 mm 鏡頭，逆光中塵埃飄浮 | 第二次高喊，人群齊聲回應 |
|15| 讓自由響徹…… | 自由鐘特寫，裂縫清晰可見 | 頂光，鐘體高亮，黑色背景 | 持續的鐘聲 |
|16| 終於自由了！終於自由了！ | 鳥群向上飛起，人群舉起雙手 | 高速快門，定格翅膀動作 | 「終於自由了！」連呼三遍，雷鳴般掌聲 |

---

## 3. 統一圖像生成提示詞  
超寫實 20 世紀 60 年代民權集會，林肯紀念堂背景, 決定性瞬間，--ar 16:9 --v 5 --q 2  

將 `Page-X Scene` 替換為每頁對應的事件；保持一致的顆粒感與對比度。  

---

## 4. 統一音訊生成提示詞  
男中音，MLK 風格的演講方式, 緩慢節奏，國會大廈大廳混響，44.1 kHz，128 kbps MP3，15-25 秒，[Starting Sentence]，強調「我有一個夢想」, 峰值 -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. 交付自檢  
[ ] 16 張黑白 JPG，命名為 page-01 ~ page-16，≤ 600 KB  
[ ] 16 個 MP3，命名為 01.mp3 ~ 16.mp3，≤ 400 KB  
[ ] 網頁可橫向滑動且不出現空白畫面，字幕隨音訊高亮  
[ ] 自動彈出行動裝置橫屏提示

# 建立並部署互動式 HTML：《我有一個夢想》互動有聲書（英文頁面），寫實黑白攝影風格 + 男聲旁白  


## 1. 總體目標  
將馬丁·路德·金於 1963 年 8 月 28 日發表的完整演講（《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! (1st) | 兒童仰望光芒，眼中映出光影 | 眼部特寫，針尖般的高光 | 第一次高喊 "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! (2nd) | 演講者側臉，張口呼喊，背景有光斑 | 35 mm 鏡頭，逆光下塵粒飄浮 | 第二次高喊，人群齊聲回應 |
|15| Let freedom ring... | 自由鐘特寫，裂縫清晰可見 | 頂光，鐘身高亮，黑色背景 | 悠長的鐘聲 |
|16| Free at last! Free at last! | 鳥兒向上飛翔，人群舉起雙手 | 高速快門，定格翅膀運動 | "Free at last!" 重複三遍，雷鳴般的掌聲 |

---

## 3. 統一圖像生成提示詞  
超寫實黑白照片，50 mm 鏡頭，高對比度，膠片顆粒感，淺景深，[Page-X Scene]，20 世紀 60 年代民權集會，林肯紀念堂背景，決定性瞬間，--ar 16:9 --v 5 --q 2  

將 `Page-X Scene` 替換為每一頁對應的事件；保持一致的顆粒感和對比度。  

---

## 4. 統一音訊生成提示詞  
男中低音，MLK 風格演繹，緩慢節奏，國會大廈大廳混響，44.1 kHz，128 kbps MP3，15-25 秒，[起始句]，突顯 "I have a dream"，-3 dB 峰值  

每段音訊以該頁的起始句作為旁白內容，結尾加入 1 秒的掌聲淡出。  

---

## 5. Web 技術堆疊與目錄  
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. 交付自檢  
[ ] 16 張黑白 JPG，命名為 page-01 ~ page-16，≤ 600 KB  
[ ] 16 個 MP3，命名為 01.mp3 ~ 16.mp3，≤ 400 KB  
[ ] 網頁水平滑動時不出現空白畫面，字幕隨音訊高亮  
[ ] 自動跳出手機橫向提示