This project is an app that lets you create closed captions/subtitles for videos. Having captions available for videos is really important for accessibility but unfortunately many of the tools currently out there for this are very old with ugly and confusing interfaces. I am using web technologies to try and make a more modern and easy to use alternative so that anyone can easily write captions.
rayne cloudy
Check their projects out: NekoMIDE, rayne's fs, scratch.js, my new website
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
It took me a while to polish the README and work out how to actually build the app, but now I have a release on GitHub with downloads for both Linux and Windows.
This was another bug fixing session mostly, where I fixed issues such as the scroll bar being reset when a new caption was added and the timeline disappearing when no captions were added yet. I also added a delete button so you can remove captions when needed.
The player now shows the current time of the video. On the left it shows a nice formatted timestamp with the minutes separated from the seconds, and on the right it shows the current second with three decimal places for extra precision when writing captions. I used a font with tabular numbers (all numbers are the same width) to keep it looking nice and stop the text moving around while the video is playing.
You can now seek through the video by clicking on the timeline (instead of just using the forwards and backwards 5 seconds buttons).
Spent some time ironing out major bugs with the program - most notable seeking forwards and backwards didn't work with local videos. The result is a much more polished program which is close to being completely working.
There is now an additional button to open a video file, which loads a video from the user's files. Now you can caption any video and not just Big Buck Bunny.
The open button will now load the captions from a file and replacing the existing captions. This means that the user can now both save and load files.
The save button will now actually save the captions you wrote in SRT format, a common format for subtitles that works in most programs.
Added a file open and save dialog which will be used for opening video and caption files and saving caption files.
Fixed bugs where the current caption would not update while seeking through the video if it was paused, as well as stopping the user from setting impossible start and end times for captions.
You can now edit the captions by typing in the boxes on the right, and it will update in the video player. This means you can finally actually start writing multiple captions with custom text.
Added support for creating a new caption, which now also checks if it overlaps with an existing one. The new caption can be created by clicking on the plus icon in the top right corner of the editor.
(I came back to this project after a while and have realised that the previous devlogs were not very descriptive, so I will aim to post them more frequently now!)
I created the base code for the Caption Editor, including a video player, timeline, and a panel on the right which will be used for actually editing the captions. It also has an aesthetically pleasing style which I made with CSS.
Currently it can only display captions, but I will adapt it in the future to include the editing functionality. The app is made using Svelte and Electron.