The frame pointer will only be updated in the hooks mentioned above to make sure the pointer is always pointing to the right frame. Since the loop is run every single frame in the browser, we keep the logic in the loop simple, and only advance a keyframe when the current frame ends. In the requestAnimatioFrame loop, we check for the current time against the end time of the current keyframe. Thus, to start a loop when the player state turns to Start, and stop the loop when it turns to Stop. We then resorted to have a requestAnimationFrame loop running when the media is playing. However, the scheduling function in web – tTimeout() – does not have the honor to have a high enough precision for us. In my attempt to port this logic in Lyricova Jukebox, I registered the play, pause, seeked and ratechange events, and for the internal clock, we used performance.now() for its high precision and the convenience to use in requestAnimationFrame().įor the timeline, LyricsX used a seemingly reliable internal method DispatcherQueue.schedule() provided by Apple. All those preparation work only need to be done when the player state changes, which is much less frequent the update of playback progress. With that, we can put more optimizations in place, such as generating animation sequence timelines ahead. Where t_0 is a function to get the current time in the internal clock.Īpart from that, since we now maintain a copy of the player state, we can simply assume that the player will continue the playback in the indicated speed as long as the state doesn’t change. Internal t_0 time: This is calculated by \text.For the Stop state of some players, there is no track standby for playing, hence no timeline for lyrics, and thus out of our consideration. Player status: Obviously, this can be either playing or paused.The program maintains a global state of the player, with the following properties: Instead of keep asking for the player for the current progress, it maintains a timer inside itself, and try to sync it with the player by using only a few basic events. The way LyricsX solved all the problems above is really cleaver. But if a single query can already take half a second, it is almost impossible to achieve a better precision this way. Depends on the precision, you might want to run the query multiple times a second. Either way it is, it already sounds a lot complicated and resource-consuming, in a worse case, some may even need to send a request through the internet for the playing progress. Usually to query the progress, you had to go through some kind of RPC, or running a tiny script. In contrary, it is almost never the case in real life. The second way, query the player for progress on a regular time interval, could indeed solve the problems mentioned above, but just in an ideal system where the query itself is as simple as reading a variable. Even worse some might just lack of such feature exposed to the public, rendering this way unusable in those cases. In the worst case, some lines might just be skipped over due to the long update interval. ![]() Some platforms may issue updates several times a second, but some may just send once a couple of seconds. The first way, relying on the player to send out progress update events, is not reliable because the update interval totally depends on the platform. Both ways are not ideal when it comes to the extreme cases where the user adjusts the player progress a lot, and the lyrics having a lot of lines in a short period of time. In short, there are 2 major ways of doing it: rely on the player to send out update events, or query the player for progress at a regular time interval. Common practicesīefore we go to LyricsX, let’s first take a look at how the majority of other open source software work on this. Here in this article, I’d share with you how LyricsX tracking the player progress in a unique and resource-saving way. ![]() It gets time-tagged lyrics files from local storage or internet, and then display the lyrics in sync with the player.Īs 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. 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.
0 Comments
Leave a Reply. |