Use GraphQL subscription to show progress of time-consuming operations

GraphQL is feature-rich query language designed to fit majority of needs of generic online applications. The 3 main types of operations in GraphQL are query, mutation and subscription. While queries and mutations are send in HTTP requests, subscriptions are running on WebSocket, which enables it to receive updates in real time. In this article, I would like to talk about using the subscription to report real-time results and/or progresses to time-consuming operations.

Measure per-letter dimension of text in JavaScript

TL;DR: Create a Range, set proper start and end points up to the text node with proper offset, then use Range.getBoundingClientRect() to get the dimensions.

As a part of the Lyricova Jukebox, we wanted to support inline karaoke swipe animation. With the time tags in the data, it is easy to figure out the time when the animation must reach a certain character. Then we need to figure out a way measure per character dimension for the animation to work.

How LyricsX keeps track of progress of media players

LyricsX is an open source software for macOS to download and display lyrics of current playing track on Music (previously iTunes), Spotify, Audirvana, Vox, Swinsian, or the Now Playing indicator in the OS. It gets time-tagged lyrics files from local storage or internet, and then display the lyrics in sync with the player.

As a crucial component of the development of Lyricova Jukebox, I have researched multiple implementations of real time lyrics display programs, and I found the mechanism behind LyricsX particularly interesting. Here in this article, I’d share with you how LyricsX tracking the player progress in a unique and resource-saving way.

To the second anniversary of Lyricova

To the second anniversary of Lyricova.

Time flies. It’s two years from the first time I started this project, and it’s also the project I run the longest. Here I would like to talk about why I want to start such a project.

Since the very beginning, the headline of Lyricova reads “the innermost me, explained”. Same as the current one, “This is what I sing, all day long”, both of them tells the same idea: Lyricova is where I would expose my innermost feeling in a way that most people could understand. I started listening to Vocaloids Since 2011. The first two songs were “the Disappearance of Hatsune Miku” and “Tell your world”. That was the first time I feel such sympathy from a song. From then, I was exposed to more Vocaloid songs. I found myself felt in love with it, not the characters, but the songs per se. As those songs are created by those who are not the mainstream songwriters, by everyone who are enthusiast in music, by those who wants to express their feeling using music. Just like what Google says, “Vocaloids, virtual singers. Everyone, creator.”

Then, I started to sing all the Vocaloid songs, anywhere, anytime, just like what I have done before. As I am not quite an outgoing person, I have a relatively small social circle. Sometime when I feel bad, I found there is really few people I can speak to. I don’t realize anyone who can quietly listen to me. Meanwhile, even there is such one, I may not really know what I want to say, what I want to tell others. Until when I found Vocaloids. Over the 4 years of encounter with it, I’ve found the feeling of sympathy that nowhere else can give me, and it also gives a media where I can express my feeling to others in a more acceptable way.

Around me, someone complains that despite I sings quite OK, he cannot understand what I’m singing. Vocaloids, in the view of my social circle, is considered as non-popular, or to most of them, “no idea of what it is”. Then I decides to share these lyrics on my social media accounts, translated, as I hope others would know what I’m singing, the feeling of “want to be cared by others”. Later, I found out that there is quite a need for me to keep all the lyrics in an archive and spread them more efficiently.

Then, I started Project Lyricova.

It is an archive of those lyrics that move me, and more like a place where people want to know the real me. (Though maybe no one would like to do so.) Of Lyricova, I crafted everything from scratch, the blog system, the content, frontend, and backend logic, as well as all the contents, with translations. It feels like Lyricova is a child of mine, as I have put all my feelings and hard work in it.

Until now, I still believe that eventually someone will read this site and feels what I feel. With that, I’m satisfied.

Looking back, Lyricova is more like a dairy, a dairy that uses others’ words to express my own feelings.

So, with all of this, I wish you a happy birthday, and a better future, my dear Lyricova.