"world.execute(me)" by Mili - JavaScript Lyric Video

This is another lyric video written in JavaScript, that runs in the browser, that I've recorded and uploaded to YouTube.

Description

Well this is just like my previous JS Lyric Video. This time, it's a visual adventure ✨, in that the original video contains a piece of code that relates to the lyrics, and I've taken it, adapted it from Java to JavaScript (specifically, TS), spent a bit writing the code for the glide animation, and it was done! It's really pretty, this one. I like it a lot.

Description of code

I don't plan on publishing the code or the apps. The codes are extremely messy, and I really don't feel like tidying them up. So basically:

• For the "printer" part, that of the lyrics (the 'typewriting' effect and the per-word 'fade' effect (see my first video)), the app uses a .json file which contains all the lyrics, along with timestamps, which is generated from a .srt file that I either downloaded or have written manually. Every 50 milliseconds, so 20 times a second, the app does the following:

  • Clears the entire DOM contents of the lyrics container (rly inefficient, ik)
  • Parses the entire lyric collection, and for every lyric:
    • If its end timestamp is in the past, it displays it
    • If its start timestamp is in the future, it does nothing
    • If its start and end timestamps are in the past and future respectively, it means the lyric is in the process of being typed, so the app calculates which percentage of the lyric should be displayed, and displays it (for the fade effect seen in my previous video, the calculation is pretty complicated (as a Romanian I'd call it "întortocheată"))

• For the "scroller" part (the code displayed in this video), I've manually separated the code into "groups" (based on the original video), and manually added start and end timestamps for each group. The app then, every 25 ms, so 40 times per second, for each group:

  • If the current time falls outside the timestamps, it does nothing
  • If the current time falls between the timestamps of the group, it calculates the position it should be on the page, and places it using a position absolute <pre> tag.
    • The way this position is calculated is pretty hacky imo :)))) For the calculation, the app needs to know the height of the container in pixels (jQuery has a handy function for that), and the height of the <pre> tag, which it has no way of knowing before writing it to the DOM. So what the app does is generate the <pre> tag, with no position, and opacity set to 0, place it in the DOM and use this element's height to do the calculation, then update it, removing the opacity setting, and applying the position absolute. It's really beautiful and I'm surprised that this thing running at 40 TPS doesn't affect the performance of my browser at all (when not recording anyway).

Shameless YouTube Channel self-promotion

Yes, yes, do check out my channel. I upload random stuff (mostly lyric videos and memes about friends) whenever I feel like.