-
一个基于 Python + HTML 前后端分离架构 的英语单词听音拼写小游戏。
-
项目使用 Flask 提供后端 API,使用原生 HTML / CSS / JavaScript 构建前端页面,并基于 神秘 项目生成英语语音。
-
用户可以听单词发音、听字母拼读,然后输入单词进行拼写测试。项目还支持手动录入新单词,首次录入后会自动生成 words.json 词库文件。
这就是我用Qwen Studio做的学习辅助工具,项目已经开源。
地址
快速开始
1. 进入后端目录
cd backend2. 安装依赖
pip install -r requirements.txtrequirements.txt 内容:
Flask
Flask-Cors
requests
3. 启动后端服务
python app.py启动成功后访问:
http://127.0.0.1:5000
注意:请不要直接双击打开
frontend/index.html。
本项目通过后端服务托管前端页面,请直接访问http://127.0.0.1:5000。
使用说明
- 点击「抽取新单词」开始游戏。
- 点击「读单词」听完整单词发音。
- 点击「拼字母」听字母逐个拼读。
- 在输入框中输入你听到的单词。
- 点击「提交答案」查看是否正确。
- 在下方「词库管理」中输入新单词并回车,即可录入词库。
首次录入新单词后,后端目录会自动生成:
backend/words.json
之后程序会优先读取该文件作为词库。
API 说明
获取词库
GET /api/words返回当前词库列表和单词数量。
添加单词
POST /api/words请求示例:
{
"word": "apple"
}成功返回:
{
"success": true,
"message": "录入成功",
"count": 31
}开始游戏
POST /api/game/start后端会随机抽取一个单词,并将答案保存在 Session 中。
返回示例:
{
"length": 5,
"total_words": 30
}获取语音
POST /api/game/audio请求示例:
{
"mode": "word"
}mode 支持:
word:朗读完整单词spell:逐个字母拼读
返回:
audio/mpeg
检查答案
POST /api/game/check请求示例:
{
"guess": "apple"
}成功返回:
{
"success": true,
"message": "回答正确"
}失败返回:
{
"success": false,
"message": "回答错误,正确答案是 apple"
}自定义 TTS 服务
本项目默认使用:
https://tts.wangwangit.com/v1/audio/speech
如果你希望自己部署 TTS 服务,可以参考:
https://github.com/wangwangit/tts
部署完成后,修改 backend/app.py 中的:
TTS_API_URL = "https://tts.wangwangit.com/v1/audio/speech"替换为你自己的服务地址即可。
技术栈
- Python
- Flask
- Flask-Cors
- requests
- HTML
- CSS
- JavaScript
- Fetch API
- Microsoft Edge TTS