拼音乐园（一年级拼音闯关）
给一年级小朋友用的拼音练习工具：可交互、超大字号、标准女声发音、自动错词本。
快速使用
- 起一个本地服务（推荐，这样麦克风才能用）：
bash cd ~/.workbuddy/skills/pinyin-kids/assets python3 -m http.server 8731
然后打开 <http://localhost:8731> - 直接双击
assets/index.html也能玩，但浏览器在file://下会禁用麦克风，只能靠「✅ 读对了」按钮人工确认（首页会给出提示）。 - 用
present_files把assets/index.html或上面的本地地址交给用户预览。
浏览器建议：Chrome / Edge（语音识别与女声最全）；Safari 可用但识别支持较弱。首次使用请允许麦克风权限。
玩法与机制
三个阶段（首页选择，每阶段内都是「声母 → 韵母 → 拼读」三小关，拼读关默认玩 2 轮算过关，通关后可一键挑战下一阶段）：
| 阶段 | 内容 | 规模 |
|---|---|---|
| 🌱 阶段一 · 入门 | 不含翘舌（zh ch sh r 不出现），只练单韵母 a o e i u ü，拼读也只由它们组成 | 19 声母 · 6 韵母 · 58 拼读 |
| 🌿 阶段二 · 进阶 | 加入平翘舌全部声母 + 复韵母/鼻韵母（ai ei ui … ang eng ing ong），不含三拼音节 | 23 声母 · 24 韵母 · 243 拼读 |
| 🌳 阶段三 · 全量 | 全部拼音，含 ia iao ian iang ua uo uai uan uang üan iong 三拼音节 | 23 声母 · 24 韵母 · 296 拼读 |
- 拼音书写：所有拼音按课本写法显示——单层 ɑ(U+0251)、ɡ(U+0261)，i 标调去点（内部逻辑仍用 ASCII，显示时经
PY()转换）；大拼音卡带四线三格背景（线的位置由--l1..--l4变量控制，字体用--py-font，默认宋体系以拿到 GB2312 的 ɑ ɡ 字形）。 - 自动判定：开着麦克风时页面会持续自动听，小朋友读完自动判对错；读对 → 夸奖并立刻进入下一个；读错 → 自动记入不会记录 + 语音鼓励再试。
- 组词同步出现：三个带图组词在出题时就随拼音一起显示（
renderItem()里S.words = wordsFor(it)后直接showWords()），不用等读过；读对时不再重绘（避免闪动），只对拼读补充显示对应汉字。 - 语音控制：说「NOMI，下一个」（唤醒词可被听成糯米/诺米/nomi，非必需，关键是「下一个」）＝按「✅ 读对了」直接过关进入下一题；说「我不会 / 不知道 / 帮帮我」→ 先语音鼓励再试（不动答案）；连续 3 次（说不会或读错合计）→ 机器人读出正确拼音。提醒两轮仍不会就先换一题、稍后再来（避免卡死）。说「回家 / 结束」可语音退出。没有「听一听」按钮，也不会主动读顺口溜/助记图。
- 错词本与频率：读错、求助都自动计入不会记录，该拼音出现权重最高提到 5 倍（读对一次 -0.3）；首页错词本显示次数，可「📕 只练不会的」专项复习（localStorage
pinyin-kids-v1）。 - 点「✅ 读对了 / 下一个」＝立刻进下一题：记一次正确 + 撒花 + 一句夸奖语音（不等语音说完），拼音卡马上换成新题；机器人气泡先亮「真棒！」约 0.8 秒，再自动换成新题的「请你读 + 拼音」（靠
S.holdBubble延迟报题，见robotPresent()）。夸奖期间不开麦，说完由resumeListen()接手。 - 组词在出题时已呈现（每个词配 emoji 图，图来自
pic.js：整词表优先 → 词里的字兜底 → 无图不显示，带汉字和拼音）；组词只呈现、不自动朗读（想听哪个词点词卡上的 🔊）。组词保证三个词互不重复（797 条词典，343 个练习条目全部能给出 3 个不重复的带图词）。 - 操作按钮：练习页只有三个——
🎤 我来读、🙋 我不会读（= 语音说「我不会」，走handleHelp()：鼓励再试，3 次后机器人读出正确拼音）、✅ 读对了 / 下一个。 - 设置：每组数量（5/8/12/全部）、麦克风开关、自动听开关（读完自动判、自动下一个，默认开）、发音老师（自动优先女声，可手动切换并试听）。
- 键盘：空格 / 回车＝读对了・下一个，M＝我来读，H＝我不会读（适合投屏远距离操作）。
界面与小机器人
- 配色走低饱和路线：浅灰白底（#F5F6F8）+ 白卡 + 1px 浅描边 + 柔和长阴影；主色温和蓝 #3B6FD4，辅助沙金 #E9A23C、草绿 #3E9C74、玫瑰 #D96A86；按钮是「浅底+描边+深字」，不刺眼。
- 小机器人参考蔚来 NOMI：白色圆润头身 + 圆形深色显示屏 + 白色眼点，站在小底座上。
- 常态：左右轻微摇头（sway 5.2s）+ 呼吸起伏 + 每 5.6 秒眨眼一次。
- 表情 6 种：
idle / speak / happy / excited / think / sad，由setMood()切换（SVG 上挂mood-*class，CSS 控制显示哪个face组）。 - 说话时：上下点头 + 嘴巴开合 + 屏幕外圈蓝色波纹扩散（
.speaking）。 - 出题：拼音卡轻微上浮弹入（
.pop），气泡显示「请你读 + 拼音」（幕布动画已移除）。 - 读对：跳跃 + 笑眼气泡夸奖；读错：低头沮丧 + 鼓励；求助：思考表情；提醒：跟读表情并读出正确音。
- 每道拼音由机器人给出：
robotPresent(py)负责动画 + 气泡；所有语音播报都走speak()，会自动给机器人加.speaking。 - 改样式看
index.html顶部:root变量；改机器人形状看各页的<svg class="robot">（共 3 处：首页/练习页/完成页）。
文件结构
assets/
index.html # 界面与样式（超大字号、四线三格、阶段卡片、动画）
app.js # 流程、三阶段池、PY() 拼音书写转换、发音、语音识别、加权抽题、错词本
data.js # 数据：声母/韵母（呼读音汉字、助记图、顺口溜）+ 797 条组词词典
pic.js # 组词配图：PIC_WORD_RAW（整词优先）+ PIC_CHAR_RAW（单字兜底）+ picFor()
修改与扩展
- 改顺口溜/助记图：编辑
data.js的SHENGMU/YUNMU，e是 emoji，t是顺口溜，a是用来发音的汉字（声母用教学呼读音：b→波、p→坡……）。 - 加词：往
WORDS_RAW里加词语:音节1 音节2，音节必须带声调、按字用空格分隔，条目之间用|隔开。拼音数量与字数不一致的条目会被自动跳过并在控制台告警。 - 补配图：往
pic.js的PIC_WORD_RAW（整词）或PIC_CHAR_RAW（单字）里加「汉字+emoji」即可，注意表里只能写汉字和 emoji（混入英文会被解析器串键）。查图顺序：整词 → 词里的字（从后往前）→ 不显示。 - 调阶段：
app.js的PHASES三个对象各带okS / okY / okSyl过滤函数，改它们就能调整每阶段的声母/韵母/音节范围；拼读关轮数在SYL_ROUNDS。 - 发音：
app.js的FEMALE_HINT列出了常见中文女声名（Ting-Ting、Xiaoxiao、晓晓 等），打分优先选女声（voiceCandidates()还会给本机已下载的语音localService加分）。语速 0.85、音高 1.05，适合儿童。 - 发音可靠性机制（
speak/trySpeak/doctorTTS）：说话前先pauseListen()松开麦克风（macOS 上麦克风占用会把系统朗读压成静音）；cancel()后延迟 60ms 再speak（Chrome 竞态会吞句）；单个语音包 1.2 秒没出声就拉黑换下一个（最多试 4 个）；全部失败时播放 Web Audio「叮咚」兜底。首页「🩺 听不到就点我」逐个试音并自动切到能发声的语音包。
排查：听一听没有声音
- 先点首页「🩺 听不到就点我」——它会自动试遍语音包并切到能出声的那个。
- 在内嵌预览面板里可能无音频输出：把地址
http://127.0.0.1:8731/index.html复制到 Chrome/Safari 打开。 - Mac 系统语音包：系统设置 → 辅助功能 → 朗读内容 → 系统语音，下载中文语音（推荐「婷婷」）。
- 检查电脑静音 / 蓝牙耳机 / 标签页小喇叭。
- 难度：默认每组 8 个；四线三格位置在index.html的--l1..--l4，拼音字体在--py-font。
已知限制
- 语音识别对单音素（如单独读一个 b）准确率有限；识别不到正确读音会按「读错」处理（鼓励再试），家长也可用「✅ 读对了」人工确认。
- 无外网、无后端，纯前端离线可用；学习记录只保存在当前浏览器。
