6 小时重构一个字幕工具

某位来自伊朗，现居住在加拿大温哥华的翻译人员曾说过：「ass 能解决所有问题，对于我来说。」

Aegisub 确实是一个非常好用的工具，提供了非常丰富的字幕特效，以及相对高的字幕效率，除了程序很容易崩溃。但对于简单的纯文本字幕，其实流程是可以进一步被优化的。

字幕流程

字幕流程其实就三个部分：文字稿整理（听写或翻译）、打轴、校对。我们可以围绕这三个流程来设计一套最简单最高效的工作流。昨天看 NiceChord 好和弦的时候发现 wiwi 老师写了个类似想法的工具，主要是围绕提高打轴效率的一套程序。我尝试用了一下这套工具，想法是很好，但这代码是写的有点糟糕，介面也基本没有。

于是我考虑重构。重构主要目的如下：

• 用 Vue.js 实现一套可用的 UI
• 默认提供视频的播放控制
• 移除运行时的 Node.js 和 http-server 依赖
• 基于 File API 读取字幕文件和视频文件
• 基于 GitHub Actions 和 GitHub Pages 实现自动部署
• 基于 MIT 开源协议
• 提供 ESLint 代码风格 Linting
• 新增动态响应实现控制
• 新增 i18n 支持
• 新增字幕的实时预览功能
• 新增 SRT 字幕编辑有效性校验
• 新增对 WebVTT 格式的支持

重新实现所有已有功能大约花了 2 小时，加的那堆新功能花了 4 小时。共计 6 小时把事情给搞完了。

Live Demo

GitHub Repo

GitHub Pull Request

已知 bug

发现 Firefox 的 CC 字幕 track 不能加载 blob url。这使得实时预览功能在 Firefox 上存在一定的问题，但 Chrome 和 Safari 都没有问题。准备这两天准备一下各种细节情况，向 Mozilla 回报一下。 发现加载后和 Chrome readystate 不一样，强制 show 了一下竟然就好了。

其实也可以用 Electron 封装一下离线使用。

美其名曰，统一体验。

实则内存爆灹。