English Nursery Rhymes · 英文儿歌启蒙

面向 0–3 岁幼儿的英文启蒙儿歌网页应用：按内容分类、每首配图、点击即可播放，并使用浏览器朗读歌词（优先童声/年轻声）。

运行方式

npm install
npm run dev

在浏览器打开终端显示的本地地址（如 http://localhost:5173）。建议使用 Chrome 或 Edge 以获得更好的语音合成支持。

功能说明

• 分类：顶部 Tab 切换（All / ABC & Numbers / Animals / Body & Actions / Colors & Shapes / Bedtime & Lullabies / Greetings & Daily）。
• 播放：点击任意儿歌卡片，即用系统 TTS 朗读该首歌词；再次点击其他卡片会切换朗读内容。
• 停止：朗读时会出现「停止朗读」按钮，点击可中断。

关于“童声”朗读

• 本应用使用浏览器的 Web Speech API（SpeechSynthesis） 朗读歌词，不包含预录童声。
• 系统自带的“童声”支持因操作系统和语言包而异（多数为成人音色）。应用会优先选择名称中带 child / kids / young 或常见“年轻/女声”的英文语音；若没有，则使用任意可用英文语音。
• 如何更换语音：在操作系统设置中安装或选择更多语音（如 macOS：系统设置 → 无障碍 → 朗读内容 → 系统嗓音），刷新页面后，浏览器会使用新语音。
• 若希望使用真实童声：可后续为每首儿歌准备一条童声朗读或演唱的音频文件（如 MP3），放在 public/audio/，在 src/data/songs.js 中为每首歌增加 audioUrl 字段，并在 main.js 中改为使用 <audio> 播放该文件；TTS 可保留为无音频时的兜底方案。

配图说明

• 当前儿歌配图使用 Lorem Picsum 占位图（按歌曲 id 固定种子），仅作展示用。
• 若要使用与儿歌内容相符的图片：将图片放入 public/images/，在 src/data/songs.js 中把对应条目的 imageUrl 改为本地路径，例如：imageUrl: '/images/twinkle.jpg'。

项目结构

child/
├── index.html
├── src/
│   ├── main.js         # 入口：分类、卡片渲染、点击朗读、停止
│   ├── data/songs.js   # 分类枚举与儿歌数据
│   ├── tts.js          # Web Speech API 封装（speak / stop）
│   └── style.css
├── public/
│   └── images/         # 可放置儿歌配图
└── README.md

构建与部署

npm run build

产物在 dist/，可部署到任意静态托管（如 Vercel、Netlify、GitHub Pages）。