Scrolling Lyrics using Turbo Frames

Premise

as we’ve already observed, Turbo Frames are ideal for exchanging content on the fly using their src attribute. In this challenge, we’ll look at how we can do that in a time-sensitive manner, for example as the time code of a video changes.

Starting Point

Our starting point contains a YouTube video in a <lite-youtube> container element:

https://stackblitz.com/edit/turbo-frames-scrolling-lyrics?file=index.html%3AL63

(yes you’ve just been RickRolled 🙃)

It also contains a Turbo Frame with a placeholder for the lyrics:

https://stackblitz.com/edit/turbo-frames-scrolling-lyrics?file=index.html%3AL75

The server is equipped with an endpoint that responds to the /lyrics route with the lyrics for a given timecode in seconds when passed as the t param (e.g. /lyrics?t=10):

https://stackblitz.com/edit/turbo-frames-scrolling-lyrics?file=index.js%3AL20

If there’s a match for the timecode in the lyrics object, it responds with an appropriate Turbo Frame, else with a 404 error.

Challenge

Your challenge is to implement a “Scrolling Lyrics” algorithm using the time updates sent by the player.

A word of warning: Because I’m using a YouTube video which is embedded in an <iframe>, I have to do a little dance to listen for time updates from the YT Iframe Player API (here’s a Codepen for context). For a regular <video> element, you’d just listen for the timeupdate event. But I thought it was funnier this way 😅.

Now go ahead and

• implement the swapping of the Turbo Frame’s src with the appropriate timecode in this callback: https://stackblitz.com/edit/turbo-frames-scrolling-lyrics?file=app.js%3AL31
• also, set the time element’s innerHTML to the current timecode
• optimize your implementation to only fetch a new Turbo Frame from the server once per second.

Here’s a preview of the result:

Teaser

• How would you add view transitions to the swapping of Turbo Frames for a smoother experience?