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

背景

在当前全球经济衰退的背景下,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,过程也非常耗时,支持导出字幕。

相关资料:

字幕编辑工具

Aegisub

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

网站介绍

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

结束语

www.studytool.site

目前刚刚开发完成上线,我自己正在试用阶段,如果你对这个网站感兴趣,快去试用吧 ~

相关推荐
秋饼38 分钟前
MySQL 分库分表完全指南:ShardingSphere-JDBC 实战、分片键选型、场景边界、20 个生产坑与 30 道面试点
java·mysql·面试·shardingsphere·分库分表·后端架构
郭小李43 分钟前
spring 的 @CookieValue 注解 用法
java·后端·spring
天远Date Lab1 小时前
零信任架构实战:基于天远企业股权变更构建自动化招投标供应商股东穿透审查网关
java·人工智能·架构·自动化
做萤石二次开发的哈哈1 小时前
商场分区广播怎么开发?商用音频主机四大技能与音频文件管理实践
音视频·蓝海aiot一站式工作台·公共广播·智慧广播·萤石云开放平台·商用音频主机·矩阵路由
weixin_399380691 小时前
TongWeb7.0.4.9M11如何接入到idea(by lqw)
java·ide·intellij-idea
paopaokaka_luck1 小时前
社区服务平台(加权协同过滤推荐、Jieba中文词频分析、WebSocket实时聊天、求助处理闭环、 活动积分闭环、ECharts多维分析)
java·前端·spring boot·mysql·echarts·mybatis
.Bryce.2 小时前
T2-LLM评测不等于Agent评测
android·java·人工智能·后端·gpt·agent·1024程序员节
Wang's Blog2 小时前
Java 项目实战: 交友项目 - 用户体系集成:查询用户环信账号密码
java·交友
Wang's Blog2 小时前
Java 项目实战: 交友项目 - 发布评论
java·开发语言·交友
不会写代码的女程序猿2 小时前
Spring Boot+Layui构建企业级电子招投标系统源码
spring boot·招投标系统·招采系统·电子招投标