家庭英语点读站 · 使用手册

纯本地 · 零依赖 · 家庭私用 | 更新：2026-09-05 | 打印可用（A4 紧凑排版）

一、这是什么

一个"哪里不会点哪里"的英语点读站，完全复刻了小程序的核心体验，并做了超越：

功能原小程序本站
点哪读哪✔✔ 页面热区点读
整页连读✔✔ 可调停顿
变速✔✔ 0.5x–1.6x 无级
翻译显示✔✔ 气泡 + 列表，可隐藏做测试
跟读对比会员功能✔ 免费跟读录音回放
内容出版社授权（不可导出）自购课本自制（完全属于你）
单句重复部分版本有✔ 1–9 次可调
标注新课本✘✔ 家长拖拽标注工具

二、怎么打开（三种方式任选）

方式 1 · 双击直接打开（最简单）

双击 index.html → 浏览器自动打开。语音朗读用浏览器内置 TTS，离线可用、无需联网、无需安装任何东西。

方式 2 · 语音质量更好：Edge 浏览器

用 Microsoft Edge 打开，点读声音是微软自然语音（Microsoft Aria / Google 语音），比普通 TTS 更像真人。Edge 是 Windows 自带的，无需下载。

方式 3 · 最优体验：自录人声

家长（或让孩子听原课文音频跟读）自己录 MP3 放进 audio/ 目录，点读会优先播放你的录音，没有录音的句子自动降级 TTS。见第四节。

本机推荐：Edge 打开 + 右上角加入收藏夹，孩子点桌面快捷方式就能用。

三、日常使用（孩子视角）

  1. 打开网站 → 书架页点一本课本
  2. 点哪读哪：直接点课本页面上的句子，句子上会出现绿色框，同时弹出中文翻译气泡
  3. 整页连读：右侧「整页连读」，可当"听课文"磨耳朵
  4. 预习：语速拉到 0.7x，单句重复 3 次；熟练后拉回 1x
  5. 跟读：点「开始跟读」→ 孩子说话 → 「停止录音」→「听我的录音」对比
  6. 翻页：底部按钮或键盘 ← →
  7. 测试模式：点「隐藏中文」，句子的翻译变成 …，让孩子口头说出来再点开验证

四、接真课本（智能批量标注 · 推荐）

核心思路（先框后识）：你先在图上按阅读顺序画好热区（框的位置 = 句子位置，框的序号自动排好）→ 点「🎯 AI 填充已画热区」→ AI 把每个框里的英文识别出来、翻译好、填进对应的框。框不动、序号不变，AI 内容和你画的框永远一一对应。

第 0 步 · 配置 AI（只填一次）

  1. 双击 智能标注.bat → 浏览器自动打开智能标注工具
  2. 展开「AI 识别设置」，选服务商（通义千问 VL / OpenAI / 腾讯混元 / DeepSeek / 智谱 / 自定义），填 API Key，点「保存配置」（仅存在本机浏览器）
  3. 没有 Key 也能用：跳过 AI，手动在图上拖拽框句子（旧流程）

第 1 步 · 批量上传（1 分钟）

第 2 步 · 画热区 + AI 填充（推荐，几十页约 3–5 分钟）

  1. 在图上按阅读顺序拖拽画框：每个框 = 一句话，序号自动从上到下排好（也可用「新增一句」快速铺框再微调）
  2. 点 🎯 AI 填充已画热区：AI 逐页识别每个框范围内的英文 + 翻译，按序号填回对应框——框不动、序号不变，永远不错位
  3. 核对：点任意框在右侧改英文/中文；AI 没认出的框保持空，手动补填即可
  4. 个别页失败不影响其他页，失败页重试或手动补
两种 AI 模式怎么选：「🎯 AI 填充已画热区」（推荐）——你定框、AI 填内容，序号天然一致；「🤖 AI 自由识别」——AI 自己画框更快，但框的位置和序号可能要手动调整，适合快速打底再修正。
🆓 免费识别（无需 API Key）：用本地 Tesseract OCR 引擎（已换用 eng_best 高精度模型，引擎文件已随项目放在 tesseract/ 目录，离线可用）自动识别英文并画框；识别前会先对图片做灰度、对比度拉伸、小图放大到 1200px 的预处理，再用字符白名单过滤中文/符号噪声。最后用免费翻译接口补中文。识别精度仍不如付费 AI 视觉模型，但零成本、无需配置，适合快速打底后手动微调。注意：首次运行会在浏览器里加载约 11MB 模型，稍慢属正常。

第 2.5 步 · 序号关联（手动补框不再打乱顺序）

规则：图上角的数字 N ↔ 右侧列表第 N 条，永远一一对应，且始终代表"从上往下"的阅读顺序。为此工具做了四件事：

机制作用
新增热区按位置插入在图上拖出的新框会按 Y 坐标插到正确序号，不再追加到末尾。提示会告诉你"已插入为第 N 句"
就近吸附选中点在图上有偏差（上下 4%、左右 3% 内）时，选中已有热区而不是新建一个乱序空框
拖动后自动重排把某个框拖到别处，松手后序号自动按新位置重排，选中项跟随
🔃 按位置重排序号一键把所有热区按图上位置重新编号，序号与阅读顺序强制对齐

双向悬停对照：鼠标移到右侧列表某条 → 图上对应热区描琥珀色边框；鼠标移到图上热区 → 列表对应项高亮。用来一眼确认"第 N 条 = 第 N 个框"。

补框建议：AI 漏掉的句子，直接在图上那个位置拖一个框，系统会自动插到正确序号；发现序号乱了就点「🔃 按位置重排序号」，一步修正。

第 3 步 · 一键导入（点一下）

  1. 点 ⚡ 智能导入 → 照片和整本课本数据自动写入 english-reader（无需复制粘贴、无需改文件名）
  2. 刷新 index.html，书架里就有这本几十页的新书
离线 / 无 Key 备选：双击 editor.html（不是 bat）以普通模式打开，手动框句 → 点「下载数据文件」→ 把 page-data-xxx.js 放 english-reader/ 根目录 → 双击 import-book.bat 导入。
API 费用：识别按页调用，几十页通常几分钱；Key 由你自己在服务商处申请，站点不代收、不存储你的 Key（仅存本机浏览器）。

第 4 步 · 进阶：自录人声（可选）

想用真人发音，把 MP3 放进 english-reader/audio/my-book/，文件名与 data.js 里生成的 audio: "audio/my-book/p1.mp3" 对应即可。没有的句子自动用 TTS。

批量 TTS 小技巧：Windows 设置 → 时间和语言 → 语音 → 添加 en-US 语音包后，Edge 的 TTS 质量会明显提升。

五、语音引擎说明（为什么有的句子声音不同）

情况播放来源质量
audio/ 目录有对应 MP3你的录音★★★ 真人
无 MP3（默认）浏览器 TTS（Edge 最好）★★☆ 自然
浏览器太老无法发声换 Edge / Chrome

识别逻辑：先探测 MP3 文件是否存在（3 秒超时），不存在自动转 TTS 并记住，后续不再重复探测，点读零延迟。

六、法律与边界（重要，请务必读一遍）

✅ 允许：把自购课本拍照做进本站，在家庭内部（父母 + 子女）学习使用。这是"为个人学习、研究目的少量复制"，属于合理使用范围。
❌ 不允许：把课本照片、音频或本站链接发给同学家长、传班级群、放公开网站、出售或带广告运营。课本内容（文字、插图、排版）版权归出版社，超出家庭范围传播即侵权。本站默认不含任何教材原文，内容全部为自制。
❌ 不可批量抓取原小程序音频：原小程序的课文音频是出版社授权资产，抓取下载并重新分发属侵犯著作权（复制权 + 信息网络传播权），技术上可行不代表法律上可行。本站因此采用"自制素材"路线。

七、文件结构速查

文件/目录作用改不改
index.html点读站主页不用改
reader.js speech.js styles.css引擎和样式不用改
editor.html课本标注工具（家长用）不用改
data/data.js课本内容数据常用，加课本就改它
智能标注.bat + editor-server.js智能批量标注的本地服务（双击启动浏览器）常用，优先用
import-book.bat离线/无 Key 时的一键导入（配合下载的数据文件）备选
pages/课本页面照片常用，放照片
audio/自录音频（可选）可选

八、常见问题

Q1 点了没声音？

① 确认用 Edge/Chrome 打开；② 第一次播放需点击页面任意处（浏览器要求交互后才能出声）；③ 右下角/地址栏检查是否静音或被安全软件拦了。

Q2 声音是机器味？

默认 TTS 已选最自然的音色。要更好：Windows 设置添加 en-US 语音包，或自录 MP3（见第四节）。

Q3 热区框偏了？

editor 里可拖动微调，右下角绿点可缩放。热区是百分比坐标，换设备也保持对位。

Q4 想加第二册？

editor 里改课本标题重新标注一册，导出粘贴即可。书架自动多一本书。

Q5 手机能用吗？

页面响应式适配，把整个 english-reader 文件夹发到手机（微信文件传输助手）或家里局域网共享，手机浏览器打开同样可用。

← 返回点读站