RxJS Challenge #09: Karaoke subtitles

This challenge is based on my Angular karaoke app Jamigo. When a player sings a song two lines of the lyrics are shown simultaneously: the current and the upcoming one. Let’s see how we can do it and explore a higher order Observable operator. But before we start, check it out in action by clicking Sing🎤 on the link below!

The Weeknd - Blinding Lights on Jamigo

Making the stream

Our data model is rather basic. It’s an array of objects each containing a string and duration (number in milliseconds). We will use concatMap to spread it into a timed stream:

Note that we broke the line into words to add fancy animation later! 😎

concatMap maps values to Observables and runs them in order until completion