the mp3 player

so the biggest question i first had to answer was, "how am i going to get my annotations to change at the right time as the song plays?" bc i'd heard that working w/time in code is like, highkey a nightmare.

fortunately, the web has already had methods for playing subtitle files for a long time now, so all i really needed to do was have a the the mp3 player play the audio files as hidden <video>, rather than <audio> elements, as <audio> elements don't support the use of subtitle/caption tracks.

then, each time a caption cue changed on the video, the music player script i wrote would change the text in the lyric and annotations boxes on the page to match whatever the cues said.

there are a couple other functions i coded in to make the progress bar move and also seekable, but it's overall pretty simple! :D the javascript for this project came together surprisingly very easily after i figured out how to cleanly manage all those different videos.

the deranged part of this project was figuring out how to make all those subtitle files.. :)

the subtitle files

there are a couple different types of subtitle files, but only two of them are really of any relevance here: .vtt and .ass (stay focused here)

.vtt files have a pretty simple structure, with the only mandatory parts (aside from the "WEBVTT" header) being just a line with HH:MM:SS.mmm --> HH:MM:SS.mmm and then as many lines of subtitle text (where i'm pretty sure html is permitted) as you want until you have an empty line. you can also have an optional cue id on the line preceding the timestamp line.

.ass files were invented by weebs (<3) for the purposes of fansubbing anime back in the mid-90s, and they allow for some of the most goddamn elaborately styled subtitles you've ever seen w/o burning them into the video itself, bc we weebs are the pickiest pieces of shit on the planet <3333. as you may expect, elaborate output capabilities also means that .ass files can have a more elaborate structure to their line info, which can include information abt designated styles, effects, actors, layers, and margins alongside all the same stuff .vtt provides (except for cue ids), as well as text markup for all sorts of shit.

now, both .ass and .vtt files can be opened, read, and edited by a human with any text editor, but if you think that i was going to just open up, like, an mp3 player and a text editor to carefully type out freaking "hours:minutes:seconds.milli­sec­onds dash-dash-greater­than hours:minutes:sec­onds.milli­seconds" by hand for every single cue i will personally be sending you to the hague. obviously, i needed a subtitle editor.

it also just so happened that i was dabbling in fansubbing at around the time i came up w/this project, so i was developing a familiarity with aegisub, which is the software weebs created to edit their subtitles, and. i'll tell you right now that using aegisub out of the box fucking sucks, ok. it's a very versatile tool, and you can customize it like hell w/automation scripts (a lot of v cool n useful ones already exist) and hotkey bindings to those automation scripts, but you have to Configure most of those hotkeys for yourself.

but. the software was already on my computer, and i was still developing a familiarity with it, despite how much of a pain in the ass it was to set up and figure out. so that, combined w/all the advanced features .ass files have to offer, solidified aegisub as my subtitle editing environment

the file converter

However, only .vtt files are supported by the web, which meant that i needed a file converter to test my mp3 player and annotations.

and this project would Not have been possible if i hadn't learned a bit of c++ for a class a while back, bc i had to code that file converter from scratch to make it all work.

like, .ass is an uncommon file type in itself, so i actually didn't bother to look up if there were any existing converters online when i began the project, but i did so just now to see the results, which. i'll let you guys compare for yourselves:

[Script Info]
; Script generated by Aegisub 3.4.2
; http://www.aegisub.org/
Title: Default Aegisub file
ScriptType: v4.00+
WrapStyle: 0
ScaledBorderAndShadow: yes
YCbCr Matrix: None
PlayResX: 640
PlayResY: 480
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Comment: 0,0:00:00.00,0:00:05.00,Default,,0,0,0,cue-gap,
Comment: 0,0:04:08.46,0:04:08.56,Default,,0,0,0,cue-gap,
Dialogue: 0,0:00:30.41,0:00:32.37,Lyrics,,0,0,0,,I've been caught up in a whirlwind
Dialogue: 0,0:00:32.37,0:00:34.02,Lyrics,,0,0,0,,I've been living in a dream
Dialogue: 0,0:00:34.02,0:00:36.23,Lyrics,,0,0,0,,And I'm losing all perspective
Dialogue: 0,0:00:36.23,0:00:37.92,Lyrics,,0,0,0,,Nothing's ever what it seems
Dialogue: 0,0:00:37.92,0:00:40.37,Lyrics,,0,0,0,,But I know that he loves me
Dialogue: 0,0:00:40.37,0:00:43.80,Lyrics,,0,0,0,,I know that he loves me back
Dialogue: 0,0:01:34.35,0:01:38.29,Lyrics,,0,0,0,,My feet don't touch the ground
Dialogue: 0,0:01:40.85,0:01:44.57,Lyrics,,0,0,0,,{\i1}(I know that he loves me, I know that he loves me){\i0}
Dialogue: 0,0:01:43.85,0:01:44.57,Lyrics,,0,0,0,echo,{\i1}(I, I...){\i0}
Dialogue: 0,0:01:44.57,0:01:48.52,Lyrics,,0,0,0,,{\i1}(I know that he loves me, I know that he loves me (×2)){\i0}
Dialogue: 0,0:01:47.48,0:01:48.52,Lyrics,,0,0,0,echo,{\i1}(I, I...){\i0}
Dialogue: 0,0:01:48.52,0:01:50.13,Lyrics,,0,0,0,,{\i1}(Know, know, know...){\i0}
Dialogue: 0,0:00:00.07,0:00:03.06,Annotations,,0,0,0,,it's time for the track exploring the queerness of a rlshp btwn xv where the religiousness lingers! :D
Dialogue: 0,0:00:03.06,0:00:12.38,Annotations,,0,0,0,,like yeah, the parallel btwn amatonormative "no one's life is truly complete w/o a romantic partner" n the christian belief "no one is wholly human w/o the love of god" → interpreting xiao's feelings towards venti as definitely romantic as a result of the dihua flute moment, bc to be saved as a result of a cleansing of evil and sin is in itself considered romantic
Dialogue: 0,0:00:12.38,0:00:15.54,Annotations,,0,0,0,,i'm not immune to finding that romantic as hell either, but please party rock with me for a sec abt one of my theses here:
Dialogue: 0,0:00:15.54,0:00:19.41,Annotations,,0,0,0,,that to be human is to be flawed.\Nand yet, to be human is smth worth aspiring towards, worth celebrating, n worth {\i1}loving{\i0}.
Dialogue: 0,0:00:19.41,0:00:23.26,Annotations,,0,0,0,,like, for all the romanticism swept up in the pov of xiao being saved by venti, has that interpretation ever considered how {\i1}venti{\i0} feels abt it?
Comment: 0,0:01:13.58,0:01:13.86,Annotations,,0,0,0,,2. perhaps
Comment: 0,0:01:13.86,0:01:14.04,Annotations,,0,0,0,kara,2. perhaps ven
Comment: 0,0:01:14.04,0:01:14.22,Annotations,,0,0,0,kara,2. perhaps venti
Comment: 0,0:01:14.22,0:01:14.79,Annotations,,0,0,0,kara,2. perhaps venti wants
Comment: 0,0:01:14.79,0:01:14.95,Annotations,,0,0,0,kara,2. perhaps venti wants to
Comment: 0,0:01:14.95,0:01:15.51,Annotations,,0,0,0,kara,2. perhaps venti wants to be
Comment: 0,0:01:15.51,0:01:16.00,Annotations,,0,0,0,kara,2. perhaps venti wants to be {\i1}loved {\i0}
Comment: 0,0:01:16.00,0:01:16.47,Annotations,,0,0,0,kara,2. perhaps venti wants to be {\i1}loved as {\i0}
Comment: 0,0:01:16.47,0:01:16.90,Annotations,,0,0,0,kara,2. perhaps venti wants to be {\i1}loved as a {\i0}
Comment: 0,0:01:16.90,0:01:17.24,Annotations,,0,0,0,kara,2. perhaps venti wants to be {\i1}loved as a peer{\i0}!

WEBVTT

1
00:00:00.000 --> 00:00:01.000
[Script Info]

2
00:00:01.000 --> 00:00:02.000
; Script generated by Aegisub 3.4.2

3
00:00:02.000 --> 00:00:03.000
; http://www.aegisub.org/

4
00:00:03.000 --> 00:00:04.000
Title: Default Aegisub file

5
00:00:04.000 --> 00:00:05.000
ScriptType: v4.00+

6
00:00:05.000 --> 00:00:06.000
WrapStyle: 0

7
00:00:06.000 --> 00:00:07.000
ScaledBorderAndShadow: yes

8
00:00:07.000 --> 00:00:08.000
YCbCr Matrix: None

9
00:00:08.000 --> 00:00:09.000
PlayResX: 640

10
00:00:09.000 --> 00:00:10.000
PlayResY: 480

11
00:00:10.000 --> 00:00:11.000


12
00:00:11.000 --> 00:00:12.000
[Aegisub Project Garbage]

WEBVTT

00:00:00.070 --> 00:00:03.060
it's time for the track exploring the queerness of a rlshp btwn xv where the religiousness lingers! :D

00:00:03.060 --> 00:00:12.380
like yeah, the parallel btwn amatonormative "no one's life is truly complete w/o a romantic partner" n the christian belief "no one is wholly human w/o the love of god" → interpreting xiao's feelings towards venti as definitely romantic as a result of the dihua flute moment, bc to be saved as a result of a cleansing of evil and sin is in itself considered romantic

00:00:12.380 --> 00:00:15.540
i'm not immune to finding that romantic as hell either, but please party rock with me for a sec abt one of my theses here:

00:00:15.540 --> 00:00:19.410
that to be human is to be flawed.
and yet, to be human is smth worth aspiring towards, worth celebrating, n worth loving.

00:00:19.410 --> 00:00:23.260
like, for all the romanticism swept up in the pov of xiao being saved by venti, has that interpretation ever considered how venti feels abt it?

00:00:23.260 --> 00:00:31.250
i don't think venti would want to be loved as a god, and i don't think he wants to love xiao as his god, either.
we've already covered the "god of freedom wants people to do as they please" angle of it, but have we perhaps considered that the god of freedom would also like to maintain his own freedom?

00:00:30.410 --> 00:00:32.370
I've been caught up in a whirlwind

WEBVTT

00:00:30.410 --> 00:00:32.370
I've been caught up in a whirlwind

00:00:32.370 --> 00:00:34.020
I've been living in a dream

00:00:34.020 --> 00:00:36.230
And I'm losing all perspective

00:00:36.230 --> 00:00:37.920
Nothing's ever what it seems

00:00:37.920 --> 00:00:40.370
But I know that he loves me

00:00:40.370 --> 00:00:43.800
I know that he loves me back

00:00:45.890 --> 00:00:48.200
I've been tripping over laces

00:00:48.200 --> 00:00:49.650
And stumbling my words
00:00:00.070 --> 00:00:03.060
it's time for the track exploring the queerness of a rlshp btwn xv where the religiousness lingers! :D

00:00:03.060 --> 00:00:12.380
like yeah, the parallel btwn amatonormative "no one's life is truly complete w/o a romantic partner" n the christian belief "no one is wholly human w/o the love of god" → interpreting xiao's feelings towards venti as definitely romantic as a result of the dihua flute moment, bc to be saved as a result of a cleansing of evil and sin is in itself considered romantic

00:00:12.380 --> 00:00:15.540
i'm not immune to finding that romantic as hell either, but please party rock with me for a sec abt one of my theses here:

00:00:15.540 --> 00:00:19.410
that to be human is to be flawed.
and yet, to be human is smth worth aspiring towards, worth celebrating, n worth loving.
00:01:54.980 --> 00:01:57.980
but even then, i don't think that's necessarily the best description for their rlshp.
truthfully (

00:01:40.850 --> 00:01:48.520
you guys have no idea how much scratching-out i've done for the annotations of this track, so for the sake of returning to "just doing shit for funsies" i'll probably just be leaving some links in the further reading w/o explicitly mentioning them here lol

00:01:48.520 --> 00:01:54.000
like smth i do like abt this song is the way it plays so purposefully and so perfectly into the way a lot of christian worship songs will sound like gay love songs when sung by a man

00:01:54.000 --> 00:02:02.720
truthfully, i have a hard time fully and succinctly articulating my vision for the ideal xv rlshp, but i'd say it falls under some sort of queerplatonic grey area.
like despite my insistence that they'd be perpetual boyfriends instead of getting married, i also think that if they kissed abt their problems, it would fix smth abt both of them!

so my initial hunch that nothing available would be suitable for my purposes was absolutely completely 100% correct, basically.

like i said earlier, both .ass and .vtt files are pretty much just plaintext files with special file extensions, so the conversion process is conceptually quite simple overall: open the .ass file, go through it line-by-line until you hit the dialogues, at which point you simply extract the timecodes, line style, n subtitle text, which you then print out on two fresh, new .vtt files, one for lyrics n another for annotations c:

and yeah, i could've just left it at that (though i probably would've added in the automatic ao3 html generator part of it eventually anyway). unfortunately,

• every day u add some fancy bells and whistles to ur site

which in this case meant making that little annotations navigation table underneath the progress bar to light up during the active cues and for people to click on and jump around with, and then also making sure that cues timed like karaoke would show up as only one complete cue on the bar.

0:01:34.350 --> 0:01:38.290
My feet don't touch the ground

0:01:40.850 --> 0:01:44.570
<i>(I know that he loves me, I know that he loves me)</i>

0:01:43.850 --> 0:01:44.570
<v echo><i>(I, I...)</i></v>

0:01:44.570 --> 0:01:48.520
<i>(I know that he loves me, I know that he loves me (×2))</i>

0:01:47.480 --> 0:01:48.520
<v echo><i>(I, I...)</i></v>

0:01:48.520 --> 0:01:50.130
<i>(Know, know, know...)</i>

WEBVTT


gap-0
0:00:00.000 --> 0:00:00.070
 

cue-1
0:00:00.070 --> 0:00:03.060
it's time for the track exploring the queerness of a rlshp btwn xv where the religiousness lingers! :D

cue-2
0:00:03.060 --> 0:00:12.380
like yeah, the parallel btwn amatonormative "no one's life is truly complete w/o a romantic partner" n the christian belief "no one is wholly human w/o the love of god" → interpreting xiao's feelings towards venti as definitely romantic as a result of the dihua flute moment, bc to be saved as a result of a cleansing of evil and sin is in itself considered romantic

cue-3
0:00:12.380 --> 0:00:15.540
i'm not immune to finding that romantic as hell either, but please party rock with me for a sec abt one of my theses here:

cue-4
0:00:15.540 --> 0:00:19.410
that to be human is to be flawed.
and yet, to be human is smth worth aspiring towards, worth celebrating, n worth <i>loving</i>.
cue-17
0:01:14.320 --> 0:01:15.300
2. venti wants to be

kara-cue-17-0
0:01:15.300 --> 0:01:16.000
2. venti wants to be <i>loved </i>

kara-cue-17-1
0:01:16.000 --> 0:01:16.470
2. venti wants to be <i>loved as </i>

kara-cue-17-2
0:01:16.470 --> 0:01:16.900
2. venti wants to be <i>loved as a </i>

kara-cue-17-3
0:01:16.900 --> 0:01:17.240
2. venti wants to be <i>loved as a peer</i>!

as you can see, i added little deliberate gaps and "kara-" prefixes to the numbered cues as needed, to help the javascript on the mp3 player make accurately-widthed annotations boxes, and they each have ids so that the script also knows exactly where in the track to jump to. which is very cute, very neat, and both took several hours to debug.

see, how does the computer know when there's a gap in time btwn cues? i probably could've had blank lines in my .ass files with a "comm-gap" effect or smth (the commented out lines w/the cue-gap effects, if you noticed them in the .ass file excerpt in the online converter comparison, were to tell the converter what the song's start n end times were so that they could be stored as variables), but then that would've been a pain in the ass to maintain if i wanted to edit my commentary timings a little (which happens very often), bc as far as i'm aware, at this time aegisub doesn't let you link times btwn lines so that one's start/endpoint changes to automatically link up w/its neighboring line if that changes.

which means i'd have to constantly go back n forth to also edit the blank commentary-gap line timings, and even though there are hotkeys to help with that, it was still tedious to do when i decided to alter the timing of lyrics which also had annotations timed to match. Automating Tasks Is Good, Actually (but only if i have full control over how the automation is done.), so i needed the converter to do it in literally less than a tenth of a hundredth of a blink for me.

however, c++ is what's known as a "very strongly-typed" language (which, for those of you who don't know what those words mean, basically means that there are different data types which cannot be transformed into each other, even if we as humans think they are the same. float 0 is not going to be the same as int 0, and if you ask the computer to compare them, it will return an error), and the timecodes were, at first, being stored as data-type string, bc that's literally what was easiest.

strings are not numbers; they're, like, the words we read. they can be compared to each other, and if they are Literally the same, like ["blorbo bingus" && "blorbo bingus"], but not [" blorbo bingus" && "blorbo bingus"], nor ["Blorbo Bingus" && "blorbo bingus"], nor even ["blorbo bingus" && "blorbo bingus"] (good luck figuring that one out lol) ((jk one of them has a regular space n the other is a non-breaking space))

PICKY!!!!!!!!!!!!!!!!!!!!!

so, like, suffice to say, smth like "string(6) < string(7)" is meaningless to the computer, but those timecodes had to be converted into numbers somehow. :/

which i did by writing a small class which would parse the timecode strings into duration floats and print neatly into the correct format for .vtt files bc they're ever so slightly different from the formatting for .ass files. it was kind of a nuisance that i also had to also tell the computer how to do operations with these timecodes, but whatever consequence of strongly-typed coding language.

those bugs are probably only amusing if you've coded before lol. but anyway if you want to look at the source code, i do technically have a public repo for this converter, but opening up two vscode windows n dragging files around btwn them to debug shit was Completely Agonizing, so i just brought the cpp src files into the private repo for this site to edit them there, and now uhhhh the public repo is like three months' of commits behind. but you can look at/download the raw src files here for now: main, and header.

i compiled them w/this MinGW distro bc FUCKING visual studio 2022 doesn’t seem to think that <filesystem> is a real standard library (¬‸¬).

but anyway, after i had a working .exe file to convert my .ass files into two .vtt files (and an .html file marked up n ready for archiving to ao3) in more or less the blink of an eye, i was finally able to really focus on the actual meat of this project, which was, ofc. actually writing the annotations in aegisub.

the aegisub process

this part is pretty simple, all things considered. i'd open up the mp3 file first in aegisub (to work with, duh), then in audacity to get the Exact length of the song in milliseconds so that i could calculate how many frames i needed for the dummy video.

i had two different styles saved for this project: "Lyrics" and "Annotations", which got applied to the appropriate lines. a really nice thing abt using aegisub for this project is that, despite needing (well. i guess technically only wanting) two separate .vtt files for the annotations n lyrics, i could edit them both in the same .ass file just by directing the converter output based on the applied style of the line.

this made maintaining unity btwn the timing of the lyrics and the annotations a lot easier, since i could instantly see if i forgot to adjust a timing somewhere, or if some lines would be better off snapped to one another, in aegisub's video preview.

smth i also just want an excuse to complain about is the fact that i had to time the lyrics from scratch as well as the annotations. while it's possible that there's some website out there w/subtitle files for every song available via youtube vevo, not all of the mp3s i use are just ripped from youtube! some of them i bought on bandcamp or personally ripped from cds or yoinked from tumblr.

plus. and i am going to be so real with you. a lot of subtitles available online are just mediocrely timed. like most aren't utter dogshit (i'm looking at you, youtube uploads of legend of the condor hero episodes 69–78), but learning what badly-timed subtitles look like is like learning to spot shitty kerning where it's such a small detail, but you are just never the same again. Why Are The Subs Flickering i'm going to kill someone!!!!!!!!!!!

weebs may be the pickiest pieces of shit on earth, but honestly i will admit i do thrive under high standards of quality, so i'm not even complaining abt it.

so anyway, i had to time the lyrics first, which honestly wasn't so bad after a bit of practice and adjusting to hotkeys. then, once i was done with that, i'd just start annotating shit the same way i talk casually abt everything LOL.

figuring out the ideal characters-per-second (a number provided to you by the subtitle grid in aegisub) for each line took a bit of trial and error. obviously, i wanted to pace the annotations in such a way that they felt like they belonged w/the part of the song playing at that moment, but i also didn't want it to feel like i was talking too fast.

these are pretty much the numbers i've settled on:

i don't really like having annotations last longer than ten seconds, since what happens in the lyrics can change a lot in that time, so that hard limit is really more of a guesstimate. 25–28 CPS tends to be the really comfortable zone for me personally, where i don't really have to worry abt blinking n missing the end of an annotation, or feel like i haaaave to use i full focus to read them all as they come, but i also find a 30 CPS average to be The Perfect Pace, where cues change just abt when i'm done reading them. it can depend on the song sometimes, though, for reasons i don't really know rn.