零成本给娃做了个英语启蒙工具：108个MP3，自动排课，微信打开就能用

零成本给娃做了个英语启蒙工具：108个MP3，自动排课，微信打开就能用

三年级是小学英语的起点。报班动辄两三千。花了两天时间，用 GitHub Pages + edge-tts，做了一个免费英语学习网页。这篇文章记录从想法到上线的完整过程。

---

背景

女儿今年暑假开学上三年级，学校开始教英语。身边家长都在讨论报班，但我不想让她暑假太累，也不觉得花两三千报个启蒙班有多大必要。

我的想法：暑假每天 15 分钟，先熟悉 26 个字母和 68 个核心单词，开学不慌。 与其花时间接送培训班的路上，不如用代码做一个随时能打开的工具。

---

技术方案

核心要求就三条：

1. 微信打开就能用（不用下载 App）
2. 单词发音必须清晰（不能是机器人合成音）
3. 每天自动换新内容（家长不用操心今天学什么）

最终方案：

• 前端：纯 HTML/CSS/JS，零依赖，单文件搞定
• 音频：edge-tts 生成 108 个 MP3，托管在 GitHub Pages
• 排课：localStorage 存进度，根据日期自动计算每天学什么
• 部署：GitHub Pages，免费，永久在线

---

实现细节

1. 自动排课算法

每天 2 个新字母 + 5 个新单词，系统根据当天日期自动轮换：

dayNum = (today - startDate).days + 1
# 每天学 2 个新字母，13 天学完 26 个
letterIdx = ((dayNum - 1) * 2) % 26
# 7 个类别每天轮换：动物、颜色、数字、学校、食物、身体、家庭
catIdx = (dayNum - 1) % 7

localStorage 记录学过的字母和单词，下次不会再安排重复内容。

2. 音频——踩了个大坑

最初用 speechSynthesis API，结果：

平台	结果
桌面 Chrome	✅ 正常
iOS Safari	❌ 无声
微信浏览器	❌ 完全不支持
部分安卓浏览器	❌ 无声

问题根源：Web Speech API 在移动端支持极差，尤其是微信内置浏览器。

换方案：Google TTS URL（translate.google.com/translate_tts）→ 国内被墙。

最终方案：edge-tts 生成 108 个 MP3 文件，直接托管在 GitHub Pages 上，<audio> 标签播放。

import asyncio
from edge_tts import Communicate

async def gen(word):
    comm = Communicate(word, "en-US-JennyNeural")
    await comm.save(f"audio/{word}.mp3")

108 个文件总共不到 500KB，GitHub Pages 加载无压力。所有平台通吃。

3. 三个学习任务

打开页面后显示三个任务卡片：

• 任务一：自然拼读 — 26 个字母逐个学，点击听发音和对应单词
• 任务二：单词闪卡 — 68 个核心单词，7 大类，每天轮换一个类别
• 任务三：趣味测验 — 看 Emoji 选单词，答对加星，答错显示正确答案

4. 激励系统

• 每学一个字母/单词 → +1 星
• 三个任务全完成 → +3 额外星 + 撒花动画
• 连续打卡 → 天数累计，7 天日历显示

做完之后自己都觉得——孩子应该会喜欢那个撒花。

---

部署 & 上线

全站就是一个 index.html + 108 个 MP3 文件，推送到 GitHub Pages：

git init
git add .
git commit -m "英语启蒙小课堂"
git push github master
# GitHub Pages: Settings → Pages → Source: master → Save

两分钟后，https://mixuecoding.github.io/english-kids 就上线了。

---

给有娃的程序员们

如果你也在给孩子做工具或者想做类似的，几点参考：

1. 声音是个硬骨头。 Web Speech API 移动端基本不可靠，直接上音频文件省心。微软 TTS 的 Jenny 女声质量很高，比 Google TTS 更自然。

2. localStorage 足够。 不用后端，不用数据库。孩子的学习进度全存浏览器里，换设备会丢，但一般都在同一个手机上用。

3. 微信的链接限制。 公众号文章里的链接不能直接跳转，得用「阅读原文」。但可以直接把网址发到文件传输助手，点开就能用。

---

在线体验

https://mixuecoding.github.io/english-kids

数据全存本地，不收集任何信息。如果你也有娃正在学英语，欢迎试用提意见。开源在 GitHub：github.com/mixuecoding/english-kids

---

关注「蜜学编程」，更多用代码改善生活的实战分享。