这篇文章讲什么

讲2019年4月我在做的业余项目(side project)
"时间轴小助手"

这篇文章对谁有用?有什么用?

对谁有用?有兴趣看别人记录 side project 历程的人
有什么用?看别人的经历

列表

  • 碰到什么问题
  • 现有解决方案是什么
  • 为什么现有方案不好
  • 我的方案是什么
  • 实现过程

碰到什么问题

先讲碰到什么问题,不然读这篇文章会非常困惑,不知道具体是想搞什么。

问题:想翻译视频。就要做字幕,而做字幕需要调整英文的时间轴。
调整时间轴用现有软件非常困难,所以想做一个新软件。

现有解决方案是什么

  • Aegisub
  • Arctime
  • 人人译视界
aegisub
Aegisub
Arctime
Arctime
人人译视界

为什么现有方案不好

首先我从2013年到2019年都在用 Aegisub。
所以不存在『算了忍一忍也没有多难看』这样的问题。忍够了。
"Arctime"和"人人译视界"试过,不喜欢就没用。

Aegisub 之所以不好是因为拖慢我的做事速度。

  1. 设置快捷键很麻烦,在 Mac 上崩溃过2次。

hotkey

  1. 界面臃肿。很多功能用不上。
  2. 没有夜间模式。长时间面对会不舒服。

说到底还是影响速度,没法把我想要的操作都变成几个常用快捷键然后搞定。

我的方案是什么

设计一个新的桌面端软件。专门针对时间轴。

  1. 目标不是替换 Aegisub,因为功能太多了一时半会儿也不可能跟上。
  2. 操作要简单,着重在快捷键上,目前人机交互(脑机接口)没有突破性进展,快捷键依然是最快的
  3. 好看:我之前做过很多很丑的软件,够了,这次要设计个漂亮的
  4. 夜间模式
  5. 最好跨平台。开发一次 mac + windows 都能用

实现过程

  1. 设计
  2. 开发

1. 设计

最终设计图如下 (截图 InVision Studio)
app-2
很详细的过程就不贴了。我大概描述下就行。
一开始的设计是单列的。上面是视频。中间是输入框,下面是字幕。
理由:希望给人简单轻巧的感觉,所以占的面积小一点可能会好一些。
在 Sketch 里面设计的。然后也在纸上画过。

后来发现问题:

  1. 上中下,这种单列真的塞不下。
  2. 感觉浪费空间,左右空着不用,傻。

后来随手换成了 InVision Studio 继续设计
all

第一版
v1
第三版
v3
第四版
v4
第五版
v5
第六版 只是测试不同字体而已。
v6
最终版贴了2次了这里就不再贴了。

2. 开发

桌面端上跨平台的选择不多,我只看到了 NW.js 和 Electron.js。
看活跃度,文档,现有 App 等多个方面。最后选了 Electron.js
我之前也用 Electron.js 做过 字幕组机翻小助手
用户数我猜测有100多个人(我没统计数据)
Github Star 72

做到一半(以下截图是开发中的 Electron)
half-built

发现问题是:HTML5 里的 <video> tag 无法进行精细的时间控制。
frame by frame 做不到。毫秒级控制也做不到。
不能像 Final Cut Pro 的时间数字那样很自然的 00:00:00:01 -> 00:00:00:02 这样一点点来。

资料:
https://stackoverflow.com/questions/12325787/setting-the-granularity-of-the-html5-audio-event-timeupdate
https://stackoverflow.com/questions/4298084/html5-frame-by-frame-viewing-frame-seeking
javascript - Get frame numbers in HTML5 Video - Stack Overflow
Is it possible to get the current html5 video timeframe with milliseconds? - Stack Overflow

javascript - How to get a precise timeupdate on a video to return upto 2 decimal numbers (milliseconds)? - Stack Overflow

https://discourse.mozilla.org/t/distribute-web-app-as-a-desktop-app-with-firefox/31431

https://www.reddit.com/r/firefox/comments/7d6e1p/idea_firefox_based_electron/
https://www.reddit.com/r/firefox/comments/avgcpz/is_there_an_electron_alternative_for/
GitHub - mozilla/positron: a experimental, Electron-compatible runtime on top of Gecko

https://www.reddit.com/r/linuxmasterrace/comments/605af7/firefoxlike_electron/
GitHub - videojs/video.js: Video.js - open source HTML5 & Flash video player
http://allensarkisyan.github.io/VideoFrameDocs/

2019-4-7 22:12

结论:没办法了,关键功能做不到,那要 Electron 做 macOS + Windows 双平台也没有意义。
那就只能做 macOS 原生应用了(Swift)

2019-4-8 22:01

看了下其他 Electron.js 应用,他们也做不到精确时间控制:如 LosslessCut. Playback.