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

背景

在当前全球经济衰退的背景下,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操作。
在这里插入图片描述

结束语

目前刚刚开发完成上线,我自己正在试用阶段,如果你对这个网站感兴趣,请给我留言,或者发邮件到smartwork.no996@gmail.com,免费体验吧~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/54095.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp 发布苹果IOS详细流程,包括苹果开发者公司账号申请、IOS证书、.p12证书文件等

记录一下uniapp发布苹果IOS的流程。 一、苹果开发者公司账号申请 1、邓白氏编码申请(先申请公司邓白氏编码,这一步需要1-2周,没有这个编码苹果开发者没法申请,已有编码的跳过此步骤): 1)联系苹…

C 语言数据结构中的堆与栈:深入理解与应用

目录 1 栈(Stack) 1.1 定义与特性 1.2 内存中的栈 1.3 栈的应用 1.4 代码示例:栈的实现 2 堆(Heap) 2.1 定义与特性 2.2 堆的应用 2.3 C 语言中的堆操作 3 总结 在 C 语言的世界里,堆&#xff08…

[网络][CISCO]Cisco-PIX配置详解

Cisco PIX防火墙配置指南 任何企业安全策略的一个主要部分都是实现和维护防火墙,因此防火墙在网络安全的实现当中扮演着重要的角色。防火墙通常位于企业网络的边缘,使内部网络与Internet之间或与其他外部网络互相隔离,并限制网络互访&#x…

Vue:watchEffect的作用与性质

目录 一.watchEffect的作用 二.watchEffect的性质 三. watch对比watchEffect 四.watchEffect的使用 在 Vue 中,watchEffect 是一个用于副作用处理的函数,它是 Vue 3 Composition API 的一部分。它的主要作用是自动追踪其内部依赖的响应式状态&#x…

[机器学习]决策树

1 决策树简介 2 信息熵 3 ID3决策树 3.1 决策树构建流程 3.2 决策树案例 4 C4.5决策树 5 CART决策树(分类&回归) 6 泰坦尼克号生存预测案例 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.tree import …

链表的快速排序(C/C++实现)

一、前言 大家在做需要排名的项目的时候,需要把各种数据从高到低排序。如果用的快速排序的话,处理数组是十分简单的。因为数组的存储空间的连续的,可以通过下标就可以简单的实现。但如果是链表的话,内存地址是随机分配的&#xf…

【H2O2|全栈】关于CSS(2)CSS基础(二)

目录 CSS基础知识 前言 准备工作 选择器的组合 盒模型 示例网页代码 后代选择器 亲代选择器 相邻兄弟选择器 后续兄弟选择器 多个元素选择器 通配符选择器 优先级 其他应用 伪类 锚链接的属性 列表的属性 list-style-type list-style-position list-style…

react 事件处理

概述 Web应用中,事件处理是重要的一环,事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中,处理事件响应的方式有多种,本文将详细介绍每一种处理方式的用法、使用场景和优缺点。 如果原生DOM有一个监听事件&…

QGis二次开发 —— 3、程序加载栅格tif与矢量shp文件可进行切换控制,可进行导出/导入工程(附源码)

效果 功能说明 软件可同时加载.tif栅格图片与.shp矢量图片、加载图片后可进行自由切换查看图层、可对加载的图片进行关闭 关闭后清空图层、可对加载的图片进行导出.qgs的QGIS工程、可对.qgs的QGis工程导入并导入后可进行自由切换查看图层。 源码 注意: 在加载tif栅格文件后会在…

C语言野指针

什么是野指针 野指针(Wild Pointer)在C语言中指的是未初始化的指针,即它没有被显式地指向任何有效的内存地址。使用野指针可能会导致程序访问到非法或未知的内存区域,从而引发不可预测的行为和错误。 为了避免出现野指针问题&am…

动态ip切换过快,会引起我的账号下次登录异常吗

在网络世界中,动态IP地址的使用为用户提供了灵活性和隐私保护。然而,频繁且快速地切换IP地址可能会引起一些安全问题,尤其是在涉及到账号登录时。本文将探讨动态IP切换过快是否会导致账号登录异常,以及如何平衡IP切换的速度与账号…

Error: ENOENT: no such file or directory, uv_cwd

鸿蒙 Harmony 的工程在进行构建的时候遇到这个问题:Error: ENOENT: no such file or directory, uv_cwd 详细报错其实是在 node 里面,因此在网络上主要有以下几种解决方式 如果是在终端运行的话,可以重启终端,看是否解决暴力终止…

el-table 如何实现行列转置?

在某些需求里需要用到 行列转置 的表格,但 el-table 提供的基本表格是不支持行列转置的,这样就需要对这个表格进行二次开发。下面来看具体实现的效果: 具体实现方式 基本原理就是对原有的可渲染的数据结构进行处理,表头与表格数…

计算机的错误计算(九十三)

摘要 探讨 log(y,x) 即以 x 为底 y 的对数的计算精度问题。 Log(y,x)运算是指 x 为底 y 的对数。 例1. 计算 log(123667.888, 0.999999999999999) . 不妨在Python中计算,则有: 若在 Excel 单元格中计算,则有几乎同样的输出: 然…

模型部署基础

神经网络的模型部署是将训练好的神经网络模型应用到实际系统中,以实现预测、分类、推荐等任务的过程。下图展示了模型从训练到部署的整个流程: 1.模型部署的平台 在线服务器端部署 在线服务器端部署适用于处理大模型、需要精度优先的应用场景&#xff…

CSCC2024数据库内核赛道Profile记录

同学参加CSCC2024数据库系统赛道比赛,我和他一起研究了一些优化的case,最后成功拿到全国2/325。在这里记录一下我们讨论优化过的问题(建议把源码下下来边读边搜代码,否则会晕) 行锁占用内存过大 Q:TPCC测…

liunx 计划任务

任务脚本 #!/bin/bash# 配置项 # Oracle 安装路径,根据实际情况修改,查看安装地址:cat /etc/oratab ORACLE_HOME/home/database/oracle/product/11.2.0 # Oracle 实例名,根据实际情况修改 ORACLE_SID # 数据库用户名 USER # 数据…

OpenCV运动分析和目标跟踪(1)累积操作函数accumulate()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 将一个图像添加到累积图像中。 该函数将 src 或其部分元素添加到 dst 中: dst ( x , y ) ← dst ( x , y ) src ( x , y ) if mask…

网络基础,协议,OSI分层,TCP/IP模型

网络的产生是数据交流的必然趋势,计算机之间的独立的个体,想要进行数据交互,一开始是使用磁盘进行数据拷贝,可是这样的数据拷贝效率很低,于是网络交互便出现了; 1.网络是什么 网络,顾名思义是…

使用Serilog在.NET应用程序中写日志文件

在开发.NET应用程序时,良好的日志系统是至关重要的。它可以帮助我们跟踪应用程序的运行情况,更好地理解应用程序的行为,以及在出现问题时进行调试。今天,我要介绍的是一个强大且易于使用的日志库——Serilog。 什么是Serilog&…