英语学习平台

一个简单实用的英语学习网站,支持视频上传播放、跟读练习和单词收藏功能。

• 支持本地视频文件上传
• 视频播放控制(播放、暂停、重播片段)
• 可调节播放速度(0.5x - 2x)
• 支持字幕显示区域

• 使用 Web Speech API 进行语音识别
• 实时识别英语发音
• 智能对比原文与发音
• 相似度评分系统
• 即时反馈(优秀/良好/需改进)

• 添加重点单词和释义
• 本地存储(localStorage)
• 显示添加日期
• 支持删除功能
• 响应式卡片布局

• HTML5: 结构和视频播放
• CSS3: 现代渐变设计和动画效果
• Vanilla JavaScript: 核心功能实现
• Web Speech API: 语音识别
• LocalStorage: 数据持久化

1. 直接在浏览器中打开 index.html 文件
2. 或使用本地服务器:

   # 使用 Python 3
   python -m http.server 8000
   # 使用 Node.js (需要安装 http-server)
   npx http-server

3. 在浏览器中访问 http://localhost:8000

1. 点击"选择视频文件"按钮
2. 选择本地的 MP4、WebM 或其他支持的视频格式
3. 视频将自动加载到播放器中

1. 点击"当前句子"区域,会随机显示一个示例句子
2. 点击"开始跟读"按钮(需要授权麦克风权限)
3. 大声朗读显示的英语句子
4. 点击"停止"结束录音
5. 查看识别结果和相似度评分

1. 在"重点单词"区域输入单词和释义
2. 点击"添加"按钮
3. 单词将保存到列表中并持久化存储
4. 点击"删除"可移除单词

• 推荐使用 Google Chrome 或 Microsoft Edge(Chromium 版本)
• 语音识别功能需要支持 Web Speech API
• 需要麦克风权限进行跟读练习

1. 语音识别:仅在支持 Web Speech API 的浏览器中可用(主要是 Chrome/Edge)
2. HTTPS:在生产环境中,语音识别需要 HTTPS 连接
3. 麦克风权限:首次使用需要授权浏览器访问麦克风
4. 存储:单词数据存储在浏览器 localStorage 中,清除浏览器数据会丢失

如需进一步增强功能,可以考虑:

• 添加字幕文件(SRT/VTT)支持
• 集成在线词典 API
• 添加学习进度追踪
• 支持导出单词列表
• 添加单词测验功能
• 支持多用户账户系统
• 云端存储单词和学习记录

codex/
├── index.html # 主页面结构
├── style.css # 样式文件
├── script.js # 核心功能脚本
└── README.md # 说明文档

此项目为学习示例,可自由使用和修改。