Amos 英语精听网站产品系统

面向英语学习者（大学生与自学者）提供“精听+跟读+复习”一体化训练工具。市面上同类产品功能分散：播放器不适配精听场景、进度与生词记录割裂、移动端操作繁琐。项目立项的核心动因是：以更低门槛的 Web 形态，把逐句精听、快捷键操作、学习记录、打赏与反馈整合到一个轻量网站中，解决精听场景下的「字幕不同步、重复播放麻烦、跨设备学习进度丢失」等痛点，提升学习效率与留存，并为后续知识付费/素材合作打下基础。

1）精听播放器：支持中英双语字幕、逐句播放、自动下一句、AB 循环、倍速、静音/后退/前进、收藏句子等；提供完整快捷键（空格、方向键、A、F、Enter 等）提升操作效率。
2）学习记录：登录后自动保存学习进度、已学篇目、收藏句子与打卡天数；未登录场景下用 localStorage 做临时记忆。
3）内容管理/展示：文章素材列表跳转到音频页；文章元数据与字幕/音频文件解耦，便于批量维护与扩展。
4）用户与反馈：注册/登录（邮箱），反馈表单收集问题与需求，支持打赏页作为轻量化变现入口。
5）数据与埋点：接入基础统计，用于分析学习时长、留存与入口渠道，指导运营迭代。
6）适配与性能：Bootstrap 自适应布局，移动端优化；静态资源按需加载与浏览器缓存，音频走 CDN/对象存储，保证首屏稳定与播放流畅。
7）安全与合规：Nginx 配置 CSP、限流与基础防护，屏蔽常见恶意请求；前后端分离度适中，便于逐步演进。

技术栈与架构：后端 Spring Boot 3 + JDK17 + Maven + JPA/MySQL 8；前端 jQuery/Bootstrap 4.6 + Webpack 构建；Nginx 反向代理与静态资源托管；音频/字幕与图片放置在对象存储（OSS/CDN）；GitHub Actions 做 CI/CD，区分 test 与 prod 环境。
关键实现：
字幕与音频时间轴精确对齐，支持逐句定位与回放；
键盘快捷键全覆盖精听高频动作，移动端提供更大点击区；
学习进度与收藏双通道存储（登录：数据库；未登录：localStorage），保障体验连续性；
性能与稳定性：资源压缩与缓存、分域名加速、懒加载；Nginx 限流与超时策略，降低突发流量风险；
安全与合规：严格的 Content-Security-Policy、仅白名单域名可加载脚本/媒体，减少 XSS/混合内容风险。
亮点与难点：精听场景下的毫秒级对齐与循环控制、跨设备进度同步与降级、在轻量栈下兼顾可维护性与发布速度（CI/CD 自动化），以及在移动端保证操作便捷与性能稳定。