---
title: 交互式英语学习应用
emoji: 📚
colorFrom: blue
colorTo: green
sdk: docker
app_port: 7860
pinned: false
license: mit
---

# 交互式英语学习应用 📚

一个现代化的交互式英语学习应用，支持点读、翻译显示和音频播放功能。

## ✨ 主要功能

### 📖 核心学习功能
- **点读功能**: 点击任意文本片段即可播放对应音频
- **双语显示**: 支持英文原文和中文翻译切换显示
- **音频播放**: 高质量音频播放，支持播放控制和进度调节
- **页面导航**: 流畅的页面切换，支持进度跟踪

### 🔍 高级功能
- **全文搜索**: 快速搜索英文原文和中文翻译内容
- **智能书签**: 添加/删除书签，快速跳转到重要页面
- **播放控制**: 支持播放速度调节、重复播放等
- **键盘快捷键**: 完整的键盘操作支持

### 🎨 用户体验
- **响应式设计**: 完美适配桌面和移动设备
- **现代化界面**: 美观的材质设计风格
- **流畅动画**: 丰富的交互动画效果
- **本地存储**: 自动保存用户设置和书签

## ⌨️ 键盘快捷键

| 快捷键 | 功能 |
|--------|------|
| `←` / `→` | 上一页 / 下一页 |
| `空格` | 播放/暂停当前音频 |
| `T` | 切换翻译显示 |
| `I` | 显示/隐藏交互区域 |
| `P` | 播放整页内容 |
| `R` | 重复播放当前音频 |
| `B` | 添加/删除书签 |
| `F` | 打开搜索功能 |

## 🎮 使用指南

### 基本操作
1. **页面切换**: 使用导航按钮或键盘箭头键
2. **点读学习**: 点击页面上的任意文本片段
3. **翻译显示**: 点击翻译按钮或按T键切换
4. **音频控制**: 使用底部音频播放控制器

### 搜索功能
1. 点击搜索图标或按F键
2. 输入要搜索的英文或中文内容
3. 点击搜索结果直接跳转到对应页面

### 书签管理
1. 在想要标记的页面点击书签按钮或按B键
2. 点击书签图标查看所有书签
3. 点击书签项目快速跳转
4. 使用删除按钮移除不需要的书签

## 🔧 技术栈

- **前端**: HTML5, CSS3, Vanilla JavaScript
- **字体**: FZKT_GBK.woff (方正楷体)
- **数据**: JSON格式的学习内容
- **音频**: Web Audio API
- **存储**: localStorage

## 📄 许可证

MIT License

---

**享受学习英语的乐趣！** 🎉