我有一個夢想 有聲繪本
將金恩 1963 年的演講重製為水平有聲書，包含 16 個黑白照片場景、男中低音旁白與隨音訊同步高亮的字幕。
Loading preview...
12969 views
# 建立並部署互動式 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. 統一圖片生成提示詞
超寫實黑白照片，50 mm 鏡頭，高對比，底片顆粒，淺景深，[Page-X 場景]，1960 年代民權集會，林肯紀念堂背景，決定性瞬間，--ar 16:9 --v 5 --q 2
請將 `Page-X Scene` 替換為各頁對應事件；維持一致的顆粒與對比程度。
---
## 4. 統一音訊生成提示詞
男中低音、金恩風格的演說方式、緩慢節奏、國會大廳殘響、44.1 kHz、128 kbps MP3、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. 交付自檢
[ ] 16 張黑白 JPG，命名為 page-01 ~ page-16，≤ 600 KB
[ ] 16 個 MP3，命名為 01.mp3 ~ 16.mp3，≤ 400 KB
[ ] 網頁可橫向滑動且不出現空白畫面，字幕隨音訊反白
[ ] 行動裝置自動跳出橫向使用提示# 建立並部署互動式 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. 統一圖片生成提示詞 超寫實黑白照片，50 mm 鏡頭，高對比，底片顆粒，淺景深，[Page-X 場景]，1960 年代民權集會，林肯紀念堂背景，決定性瞬間，--ar 16:9 --v 5 --q 2 請將 `Page-X Scene` 替換為各頁對應事件；維持一致的顆粒與對比程度。 --- ## 4. 統一音訊生成提示詞 男中低音、金恩風格的演說方式，緩慢節奏、國會大廳殘響、44.1 kHz、128 kbps MP3、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. 交付自檢 [ ] 16 張黑白 JPG，命名為 page-01 ~ page-16，≤ 600 KB [ ] 16 個 MP3，命名為 01.mp3 ~ 16.mp3，≤ 400 KB [ ] 網頁可橫向滑動且不出現空白畫面，字幕隨音訊反白 [ ] 行動裝置自動跳出橫向使用提示
# 建立並部署互動式 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. 統一圖片生成提示詞 超寫實黑白 攝影作品，50 mm 鏡頭，高對比度，底片顆粒，淺景深，[第 X 頁場景]，1960 年代民權集會，林肯紀念堂為背景，決定性瞬間，--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. 網頁技術堆疊與目錄 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：寫實黑白攝影風格＋男聲旁白《I Have a Dream》互動有聲書（英文頁面） ## 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 鏡頭，高對比度，底片顆粒，淺景深，[第 X 頁場景]，1960 年代民權集會，林肯紀念堂為背景，決定性瞬間，--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. 網頁技術堆疊與目錄 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 [ ] 網頁可水平滑動，且不出現空白畫面，字幕隨音訊高亮 [ ] 自動彈出手機橫向提示