《我有一个梦想》有声绘本

将金于 1963 年的演讲重制为横向有声书，包含 16 个黑白摄影场景、男中低音旁白和随音频同步高亮的字幕。

正在加载预览…

从此提示词开始

将金 1963 年的完整演讲重构为横向全屏有声书，包含 16 幕高对比度黑白照片场景、男中音旁白片段，以及随页面自动翻动同步高亮的字幕。

# 创建并部署互动 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 Scene]，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  
[ ] 网页可横向滑动且不出现空白屏，字幕随音频高亮  
[ ] 自动弹出移动端横屏提示

替换为另一篇演讲

将金的演讲替换为林肯的《葛底斯堡演说》，保留 16 幕有声书形式，但根据 1863 年文本和葛底斯堡场景重新设计分镜。

在 Websites Agent 中做同款

# 创建并部署互动 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  
[ ] 网页可横向滑动且不出现空白屏，字幕随音频高亮  
[ ] 自动弹出移动端横屏提示

用彩色胶片呈现

将 16 幕黑白照片场景改为温暖的 20 世纪 60 年代彩色胶片风格，保留浓重颗粒感和决定性瞬间构图。

在 Websites Agent 中做同款

# 创建并部署互动 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 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  
[ ] 网页可横向滑动且不出现空白屏，字幕随音频高亮  
[ ] 自动弹出移动端横屏提示

重新制作竖屏移动端版本

将水平滚动条改造成竖屏纵向滚动，让这部由 16 个场景组成的有声书能在竖握手机上自然播放。

在 Websites Agent 中做同款

# 创建并部署交互式 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  
[ ] 网页横向滑动时不出现空白屏幕，字幕随音频高亮  
[ ] 自动弹出手机横屏提示

《我有一个梦想》 有声绘本

《我有一个梦想》有声绘本