Using subdomains in the URL bar to show a song's lyrics as it plays
Hi all,
I bring you another silly idea I built last night because I found it amusing, a website that shows the Lyrics of Flo Rida's "Good Feeling" in the url like so:
oh-sometimes-i-get-a-good-feeling-yeah.lyrics.unmaintained.app
Demo Website - Don't use the above page as it won't work, as it's all orchestrated by the homepage
How did I do this? Originally I built this with the Youtube Player, but the record label prevented me from embedding the video into the production website.
So I switched to the Soundcloud Player. It launches a new tab with the Lyric subdomain, to avoid triggering the Pop-up blocker, it does it the second you click "Start Experience" (which you should do rather than pressing play on the Soundcloud widget - again to avoid Pop-up problems). It keeps a reference to the opened tab (i.e. it does not use noopener) and then checks for the current timestamp in the Soundcloud player, and when it passes a hardcoded timestamp (see the code here) it redirects the tab to a new URL by setting it's location.href property - I tried to use history.pushState, but this doesn't work when navigating across subdomains. I could've totally switched to using URLs but I find it more amusing this way and so I'm leaving it as is.
Hopefully you found this interesting and have a great day ahead,
~ CA
Like what I write? Subscribe to my Mailing List or RSS feed.
Comments? Questions? Feel free to send me an Email.
This post was last edited 4 weeks, 2 days ago.