公共英语三级听力老大难？做了个在线训练工具，免费用，求轻砍

之前发过一个帖子，给孩子做了个英语语法练习网站（从 1 个语法点做到了 46 个、近 5000 道题），感谢 V 友们的反馈和鼓励，也收到不少私信问有没有听力方面的工具。

语法搞定了，但听力才是公三的大头占 30 分，而且没有捷径，只能多听多练。市面上的听力 App 要么是泛听（ VOA 、BBC ），要么是四六级方向的，针对 PETS3 的几乎没有。

所以又肝了一个：VerseMem （韵律记忆） 一个专门针对公共英语三级听力的在线训练工具。

网站地址：VerseMem

不管是给孩子备考，还是自己考成教/自考需要公三学位英语，都可以用。

它能做什么

1. 双语字幕同步播放

每道听力题都配有中英双语字幕，和音频精确同步（毫秒级对齐）。可以切换四种模式：

• 仅英文（锻炼听力）
• 仅中文（对照理解）
• 双语对照
• 隐藏字幕（模拟考试）

2. 变速 + 循环播放

• 支持 0.75x ~ 2x 变速，听不清就放慢，熟了就加速
• 循环次数可选 1/2/3/5/10/无限，一句话反复磨耳朵
• 播放时实时显示当前循环进度（比如 "循环：2/3"）

3. 训练模式（核心功能）

点击任意一句字幕，进入 5 阶段渐进训练：

• 阶段 1：无字幕，原速 → 先盲听，测试当前水平
• 阶段 2：英文字幕，重复 2 遍 → 对照英文，抓关键词
• 阶段 3：中英双语字幕，重复 2 遍 → 理解含义
• 阶段 4：仅英文字幕，1 遍 → 脱离中文拐杖
• 阶段 5：无字幕，1 遍 → 最终检验

每个阶段自动推进，一句话从"听不懂"到"听懂"大概 1-2 分钟。

4. 模拟考试

• 完整还原公三听力考试结构（ Section A 短对话 + Section B 长对话/独白）
• 限时作答、自动计分
• 交卷后可以逐题回顾、查看解析

5. 三阶段学习法

网站设计了一套学习路径：

• 第一阶段 熟悉：慢速（ 0.5x-0.75x ）+ 双语字幕 + 逐句重复
• 第二阶段 脱字幕：正常/加速（ 1.25x-1.5x ）+ 仅英文字幕 → 逐步关闭
• 第三阶段 实战：模拟考试，限时作答，查看成绩

技术栈（给感兴趣的 V 友）

• 前端：Next.js 15 + React 19 + TypeScript + Tailwind CSS v4 + shadcn/ui
• 数据库：PostgreSQL + Drizzle ORM （ 7 张表，完整的考试/题目/选项数据模型）
• 音频存储：Cloudflare R2 （ S3 兼容，便宜够用）
• 部署：Vercel
• 字幕同步：HTML5 Audio API + 二分查找匹配时间戳

和语法网站的关系

两个网站配套使用的：

• 语法练习 english-grammar.app（之前的帖子）：46 个语法点、4940 道题，解决语法基础
• 听力训练 VerseMem：多套真题/模拟题，音频+字幕+模拟考，专攻听力提分

建议先用语法网站打基础，再用听力训练器做专项突破。

为什么自己做

1. 市面上没有好用的 PETS3 听力工具要么是 PDF 扫描版答案，要么是某宝几十块的录音 + 纸质材料
2. 需要即时反馈听不懂的句子要能立刻看到字幕、调慢速度、反复听，而不是倒带猜
3. 程序员的本能遇到问题，写代码解决 :)

关于 Vibe Coding

这个项目和之前的语法网站一样，都是 Vibe Coding 搞出来的主要用 Claude Code （命令行版）+ Cursor 辅助。

说几点实际体验：

适合用 AI 做的部分：

• UI 搭建特别快，描述一下想要的界面，shadcn/ui 组件直接生成，微调几轮就能用
• 数据库 schema 设计，跟 AI 讨论表结构和关系，它对 Drizzle ORM 的 API 很熟
• 重复性的 CRUD 代码（ repository 、service 层），说清楚模式后批量生成
• 批量导入脚本这种一次性工具，描述输入输出格式就行

需要自己把控的部分：

• 产品设计和学习流程5 阶段训练模式、三阶段学习法这些是自己根据孩子实际学习情况设计的，AI 不了解你的场景
• 音频同步的边界情况时间戳对齐、循环播放和自动下一曲的交互逻辑，AI 生成的代码经常有 bug ，需要反复调试
• 状态管理的细节播放状态、训练模式状态、考试会话状态之间的联动，AI 容易顾此失彼，改了 A 坏了 B
• 数据准备听力音频的切分、字幕的时间标注、题目的录入，这些活 AI 帮不了

几个建议（给同样在 Vibe Coding 的 V 友）：

• 写好 CLAUDE.md 很重要，把项目结构、技术选型、数据模型都写清楚，AI 每次对话都能看到上下文，不用反复解释
• 拆小任务，一次只让 AI 做一件事。让它同时改播放逻辑 + UI + 数据库，大概率会乱
• 状态复杂的组件别让 AI 大改，容易引入回归 bug 。宁可自己手动改几行
• 先让 AI 出方案（ plan mode ），确认思路对了再让它动手写，省得返工

总的来说，Vibe Coding 让一个人也能做出这种全栈项目，但"vibes"替代不了产品思考和调试耐心。AI 是很好的加速器，但方向盘还是得自己握。

现状和计划

目前已经录入了多套公三听力真题和模拟题，覆盖了常见的考试题型。

后续计划：

• 更多真题和模拟题
• 错题本 + 学习数据统计
• 高频词汇/短语标注/li>
• 移动端适配优化

免费使用，欢迎试用和反馈。有什么建议或者 bug 欢迎在评论区说，我会持续更新。

不管是家长帮孩子备考，还是自己考成教/自考需要过公三，都欢迎来试试。之前做的语法网站也欢迎 V 友们继续提意见。公三 3 月就考了，一起加油