Use WebVTT without actually using WebVTT: Another way to monitor playback progress of HTML Media Elements
Previously, I have introduced how LyricsX handled playback progress of different players, and briefly talked about how I applied its principal to web audio with a requestAnimationFrame() loop. In this article, I’ll talk about how to use WebVTT, a browser-native captioning feature to receive callbacks on specific time ranges.
This project came out from a key highlight of the Luna for CTFd theme, a CTFd theme trying to reproduce the atmosphere of the game Project SEKAI: Colorful Stage feat. Hatsune Miku. In order to recreate the unique and symbolic music selection interface, I went forward to write this piece of code out myself.
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…