英语尬面后,我做了一个生成英语学习视频的小工具

最近参加了一次英语面试,过程可谓惨不忍睹,很多内容不知道怎么表达,场面一度十分尴尬。此刻,意识到提升英语能力的重要性。我准备用听说结合的方式练习英语。具体来说,就是通过听单词和解释来背单词。听句子和跟读句子来提升口语能力。就像小孩子一样,主要通过耳朵来学习语言。我在网上找到很多英语学习视频,有很多单子句子朗读的,发现大多数内容与工作无关。于是萌生了一个想法:为什么不制作一些完全贴合我学习需求的视频呢?这样的方式不仅可以定制学习内容,还能增加我的学习兴趣。说干就干,于是就开发了一个生成视频的工具。刚做完第一版,能够根据 csv 生成一个读单词的视频。

预期的学习方式

我的目标是每天晚上整理并学习一批单词,将它们生成视频后,第二天上下班开车时播放跟读,或者在空闲时随时观看。这些单词的来源主要是阅读英文书和文档时记录下的不熟悉单词,每天大约学 20-50 个。我会把这些单词收藏到有道词典,其实就是把有道词典当成数据库,不至于重复记录。再把每天的单词整理成包含单词、音标和解释的 CSV 文件。通过开发的工具,根据这个 csv 文件生成视频。最后把视频上传到 YouTube。选择 YouTube 的原因有三点:第一,避免视频占用手机空间;第二,支持多端同步和记录观看进度;第三,我订阅了 YouTube 会员,可以利用后台播放功能,将视频当作音频来听,这也为学习提供了更多便利。

放一张视频截图

技术选型

  • Node.js: 我是一个前端,能用 js 写的都用 js 写。因为是工具,写完直接运行就行了,不需要发布,所以就没搞编译啥的。
  • FFmpeg:用于处理音视频的合成。
  • 百度云语音合成 API:文本生成语音,首次购买可以 2 块钱调 10000 次最质量的语音合成,很划算,效果也不错。
  • Canvas:文本生成图片,方便查看单词。

环境准备

我是 Windows 电脑,开发用 WSL(Windows Subsystem for Linux),装的 Ubuntu 系统。

安装 FFmpeg

FFmpeg 是处理音视频的核心工具,安装方式如下:

复制代码
sudo apt install ffmpeg

初始化项目

创建并初始化一个 Node.js 项目:

csharp 复制代码
npm init -y

安装必要依赖

使用 Yarn 安装依赖:

css 复制代码
yarn add axios canvas@next dotenv
  • axios:用于访问百度云语音合成 API,生成单词和解释的音频。
  • canvas :用于绘制单词、音标和解释的图片,提升视频的视觉效果。用 next 版本的原因是 It's the first version to use N-API and prebuild-install.
  • dotenv:用于加载和管理环境变量,确保 API 密钥等敏感信息安全可控。

开发

整个工具的执行流程如下:

  1. 读取单词数据:通过 Node.js 读取 CSV 文件,每一行数据包含单词、音标和解释。这些数据构成了生成视频的基本素材。
  2. 生成音频:将每个单词及其对应的解释发送到百度云语音合成 API,生成语音文件。
  3. 制作单词图片:利用 Canvas 将单词、音标及解释动态绘制成图片。
  4. 音频与图片整合:使用 FFmpeg 将生成的音频与对应的图片合成视频,形成一个单词对应的独立视频片段。音频的设计为三次朗读:第一遍正常语速,帮助熟悉发音;第二遍慢速,便于学习;第三遍再次正常语速,强化记忆。
  5. 合并单词视频:将所有单词的视频片段合并为一个完整的视频文件,方便统一观看。

核心代码几乎都是 Github Copilot 生成,源码: programmer-English

使用方式就是把 csv 文件路径传参给脚本,一段时间后就能生成一个单词的朗读视频。

css 复制代码
node index.js path-to-csv

待优化的内容

  1. 单词只支持一种词性,后面考虑加多种解释。
  2. 只有单词,后续可以增加例句,一是深对单词的理解,二是句子才是真正的表达,只学单词是没用的。

大家有更多的想法也欢迎留言。

最后

写这篇文章是觉得自己的工具挺有意思,记录一下。也提醒自己,别忘了面试时的窘境,希望自己知耻而后勇,坚持学习。

再提一下 AI 真的提升了生产力。开发过程核心代码几乎都是 Github Copilot 实现,我完全没有看 Canvas 和 FFmpeg 的 api。图片中的背景图是用文心一言生成的,用 PS 的创成式填充去掉了多余的内容。从创建项目,到生成第一个视频大概用了 2 个半小时。思路是提前想好的,中间加了些调整,比如语音读三遍,中间要慢放。

如果大家也想用同样的方式学习英语,欢迎关注我。让我们一起把英语学习坚持下去。我最近开始读英文原版的《代码大全》第二版,会将里面不认识的单词都整理出来,更新的到频道中。

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom6 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github