第 9 课 多媒体课件：音频、视频、字幕、朗读与投屏适配
本课定位
帮助老师把朗读、视频片段、字幕、音效和投屏体验整合进网页课件，让课件更具表现力。
本课技术框架
- HTML5 Audio/Video
- 字幕与配音
- 浏览器语音合成
- 投屏适配 UI
学习目标
- 掌握多媒体元素的基本嵌入与控制
- 让课件更适合语文朗读、英语听说和实验演示
- 掌握投屏环境下的排版与控制习惯
课前准备
- 准备音频、视频或朗读稿
- 准备一段需要配字幕的教学内容
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示多媒体课件对课堂吸引力的提升 | 展示多媒体课件对课堂吸引力的提升 |
| 10-25 分钟 | 讲解音视频、字幕、播放控制与浏览器兼容要点 | 讲解音视频、字幕、播放控制与浏览器兼容要点 |
| 25-45 分钟 | 用 Codex 加入音频播放器、字幕面板或朗读按钮 | 用 Codex 加入音频播放器、字幕面板或朗读按钮 |
| 45-55 分钟 | 学员按学科替换自己的音视频素材 | 学员按学科替换自己的音视频素材 |
| 55-60 分钟 | 投屏可读性检查 | 投屏可读性检查 |
核心讲授点
- 多媒体不是越多越好，而是越贴合知识点越好
- 投屏环境下最重要的是字号、对比度、按钮尺寸和切换清晰度
- 语音合成和朗读按钮特别适合英语、语文和低年级课堂
课堂案例
英语情景对话听说课件
把音频播放、字幕切换和角色朗读整合进同一节网页课件。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“多媒体课件：音频、视频、字幕、朗读与投屏适配”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语八年级
- 课题：At the school festival 情景对话
- 现有素材：英语对话音频 1 段、逐句字幕、角色台词、跟读提示
- 页面需求：播放 / 暂停、逐句字幕、角色切换、跟读提示、适合投屏的大按钮
- 本次要做的课件：多媒体网页课件页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语八年级
- 课题：At the school festival 情景对话
- 现有素材：英语对话音频 1 段、逐句字幕、角色台词、跟读提示
- 页面需求：播放 / 暂停、逐句字幕、角色切换、跟读提示、适合投屏的大按钮
- 本次要做的课件：多媒体网页课件页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语八年级
- 课题：At the school festival 情景对话
- 现有素材：英语对话音频 1 段、逐句字幕、角色台词、跟读提示
- 页面需求：播放 / 暂停、逐句字幕、角色切换、跟读提示、适合投屏的大按钮
- 本次要做的课件：多媒体网页课件页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一个支持音频 / 视频 / 字幕的多媒体课件页
创意扩展
- 给语文古诗词做配乐朗读模式
- 为化学实验视频加步骤字幕分段