记录开发一个英语听力训练网站

背景

在当前全球经济衰退的背景下，IT相关的工作在国内的竞争也是越来越激烈，为了能够获得更多的可能性，英语的学习也许能为程序员打开一扇新的窗户，比如很多远程的工作尤其是国际化背景的工作团队，英语的协作沟通是必不可少的。事实上，我们大多数人从小到大一直都在学习英语，虽然可能在工作中用到的场景并不多，但是多多少少还是有一些英语底子的，比如一些基本的词汇量、语法知识等。但是听力和口语确确实实用到的不多，自然而然也就是听说读写中最为薄弱的两项。为了更好的练习英语听力，我花了两周的时间开发了一个适合精听的网站。作为阶段性总结，想要将用到的技术在这里做一个梳理和分享。

主要技术

前端

HTML、CSS、jQuery、JavaScript、Bootstrap

因为项目比较小，没有采用前后端分离的架构，用的是比较轻量级的框架Bootstrap，然后结合简单的jQuery、JavaScript实现。

后端

Java、SpringBoot、Maven

后端使用比较普遍的SpringBoot结合Maven快速搭建主体框架，事实上后端也相当的“轻量”，因为事实上只是一个学习工具网站，比较简单，也没有做用户体系登录什么的，所以后端其实没什么代码。

对象存储

阿里云OSS

听力音频文件和字幕文件是放在OSS服务器上。

音频转字幕实现

CMUSphinx、Vosk、Buzz

CMUSphinx和Vosk是接入程序代码实现，CMUSphinx体验下来识别率不高，比较旧。
Vosk识别率还可以，英文的模型有简单的、占用内存少的和更完整的、占用内存多的两种，采样率可能需要做一些调整根据不同的文件。Buzz是一款电脑上运行的软件，识别率最高，其中一个模型是OpenAI的Whisper，过程也非常耗时，支持导出字幕。
相关资料：
- https://cmusphinx.github.io/wiki/tutorialsphinx4
- https://alphacephei.com/vosk/server
- https://github.com/chidiwilliams/buzz

字幕编辑工具

Aegisub

Aegisub也是一款本地运行的软件，用来后期编辑字幕，需要导入srt格式的字幕文件。相关资料：https://aegisub.org/downloads

网站介绍

目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
在这里插入图片描述