My weekend project was to integrate Songlink info with my Soundtrack project. I think it went smashingly.
My Soundtrack page does not get a lot of traffic. That’s fine, it’s really just a playground for me. I think some of the features of it are really cool, personally, but more than anything, it’s a place to play with music service APIs and front end web design.
When I found Songlink, I was thrilled to have a way to share music without worrying about what services the intended audience preferred. It made links for everything for everybody. When I was informed they also had an API, I immediately decided I should find a way to integrate it into Soundtrack.
The first thing I did was replace the Faved Tracks page with Song.link embeds.
Previously that page had used Apple Music embeds to offer track previews and purchase links. With song.link embeds, I get a YouTube video of the full track, as well as streaming and purchase links for every available service. Perfect. The page loads slowly, as it’s booting up 30+ iframes all at once, but it works.
For the Recent Plays page, I wanted to do something a little more elegant. I added a small reveal icon to each card on that page, so that when you click a track title in the card (or anywhere other than the meter on the side or the preview/play button at the top), it opens up a side panel with the video and streaming links.
I initially just used the medium size embed from Song.link, but I didn’t love embedding iframes that embedded iframes (YouTube) and wanted to take it a step further. So I made my own popup that contains the YouTube video embed, plus streaming links for what I consider the most common services. This meant I had complete control over styling, and didn’t have to deal with rate limits on Songlink by rapidly loading multiple iframes.
The YouTube videos are lazy loaded, only initiated when the panel is open and removed from the DOM when it’s closed. The cursor changes while loading, and ovrerall it’s a pretty pleasing interface (to me).
Next, I wanted to push my luck and integrate genius.com lyrics. If you click the genius (yellow) icon in one of these popouts, it will overlay the YouTube video with the song lyrics.
Genius has an API, but it doesn’t actually give you the lyrics. You have to use an embed for that. So what I’m doing is using the API to get the page link for the lyrics, then scraping that page for the actual lyric content and serving that up from my data file.
Speaking of the data file, if you’re curious how all of this works, it’s all running off of a launchd job that parses the various inputs and gathers data every 15 minutes. It uses Spotify and Last.fm APIs to get lists of my top artists, top tracks, recent plays, and favorited tracks, then uses a combination of Last.fm, Spotify, Apple Music/iTunes, and now Songlink and Genius to gather information for each track/artist. It stores all of this in a JSON file which is then used by mustache templates rendered when the page loads. No API calls are made from the Soundtrack page, it’s all done in the background.
From a production standpoint, Soundtrack is pretty fragile. Depending on so many external APIs is bound to cause issues, as any change in the API or service outage will break the page. I’ve made it as resilient as I can, but it operates at the whim of the service providers. But it works for now!
Check out the Soundtrack page to play. If, perchance, you have any use for the code, just let me know, I’m happy to share.
Brett is a writer and developer living in Minnesota, USA. You can follow him as ttscoff on GitHub, Mastodon, and elsewhere.
Sign up for the email newsletter, and keep up with this blog by adding it to your favorite news reader, or following it on Bluesky or Mastodon at @brettterpstra.com@web.brid.gy.