<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="https://elezea.com/wp-content/themes/elz_2023/styles/pretty-feed-v3.xsl" type="text/xsl"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:slash="http://purl.org/rss/1.0/modules/slash/" >
  <channel>
    <title>Elezea by Rian van der Merwe - RSS Feed</title>
    <atom:link href="https://elezea.com/2023/04/building-a-music-mini-site-with-data-from-last-fm-discogs-and-youtube/feed/" rel="self" type="application/rss+xml" />
    <link>https://elezea.com/2023/04/building-a-music-mini-site-with-data-from-last-fm-discogs-and-youtube/</link>
    <description>A personal blog about product, technology, and interesting things that are worth sharing.</description>
    <lastBuildDate>Thu, 02 Apr 2026 17:43:52 +0000</lastBuildDate>
    <language></language>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <generator>https://wordpress.org/?v=6.9.4</generator>
          <item>
        <title>Building a music mini-site with data from Last.fm, Discogs, and YouTube</title>
        <link>https://elezea.com/2023/04/building-a-music-mini-site-with-data-from-last-fm-discogs-and-youtube/</link>
        <pubDate>Sun, 23 Apr 2023 17:07:54 +0000</pubDate>
        <dc:creator>Rian van der Merwe</dc:creator>
        <guid isPermaLink="false">https://elezea.com/?p=8143</guid>
        <description>
          <![CDATA[I built a mini-site for my obsession with music. Here are some notes about what the site does, how it works, and also what the build experience was like as a non-developer trying to learn.]]>
        </description>
        <content:encoded>
          <![CDATA[<p>It’s been a little quiet on the blog recently, and the reason for that is either perfectly valid or profoundly unnecessary, depending on your viewpoint. Even I am not entirely sure which one it is.</p>
<p>Over the past couple of weekends (and too many late weeknights) I have used all my spare time to build a mini-site for my obsession with music. It started as a small idea to just show the current track I’m listening to, and a list of recent physical albums I added to my collection. But then it snowballed into something much more. <strong>You can view the site at <a href="https://music.elezea.com">music.elezea.com</a>, or by clicking on the link in the top navigation</strong>. If you want to know a bit more about how it works, read on!</p>
<p><a href="https://music.elezea.com" target="_blank" rel="noopener"><img decoding="async" style="display: block; margin-left: auto; margin-right: auto;" title="" src="https://files.elezea.com/2023-04-23-vGq8IsNt-2x.png" border="0" alt="" /></a></p>
<p>It all started when I came across <a href="https://music.andy-bell.co.uk">Andy Bell’s mini-site for his music collection</a>. He uses a Notion database and Last.fm to show all the music he has in his collection, and what he’s listening to. Since I also still use <a href="https://last.fm">Last.fm</a> (yes, it’s still around!), and all my physical music is <a href="https://www.discogs.com/user/elezea-records/collection">documented on Discogs</a>, I wanted to build a small site that uses the Last.fm and Discogs APIs to show some of that information.</p>
<p>But once I got started and got stuck into all the information available via those APIs, I just couldn’t stop. I still have so much more I want to do, but I know it’s time to take a break. All in all this has been such a fun and rewarding thing to spend my time on. I know the site has pretty much zero value to the world at large. But I love checking it to get more information about something I’m listening to—and it helped me take quite a few steps forward in my technical skills. So I’m choosing to call it a win.</p>
<p>Below are some notes about what the site does, how it works, and also what the experience was like for me (as a non-developer trying to learn).</p>
<h2>Now playing</h2>
<ul>
<li>Get the most recently played track from the Last.fm API, and check if the song is currently playing or not.</li>
<li>If it’s currently playing, show the current time and a message that what you’re seeing is what I’m listening to in real-time.</li>
<li>If it’s not currently playing, mention that and show the time it was played.</li>
<li>Pull in the cover art and other data about the song from Last.fm.</li>
<li>Do a lookup for the artist and if Last.fm has data about them, show the first two tags (genres), first 3 related artists, and their bio.</li>
<li>Do another lookup to a different API endpoint for the artist’s top albums, and display data about their two most popular albums.</li>
<li>Use the YouTube API to do a lookup for the song, and embed the most relevant result in the page so that you can listen to it right there.</li>
</ul>
<h2>Top albums and artists</h2>
<ul>
<li>Show the top albums I listened to in the last 7 days, including play counts.</li>
<li>Show the top artists I listened to in the last 7 days, including play counts.</li>
<li>Make a separate API call for each artist to get their genres and similar artists, if that data exists on Last.fm.</li>
<li>Make another API call to get each artist’s most popular albums.</li>
</ul>
<h2>Recent purchases</h2>
<ul>
<li>Pull the last 6 releases I added to my Discogs collection.</li>
<li>Also pull in data about the genre, label, and release date.</li>
<li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f3.png" alt="⏳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> The <a href="https://www.discogs.com/developers">Discogs API</a> is really great, so I want to add a bunch more stuff here, but that’s also for the mythical v2 of this thing.</li>
</ul>
<h2>Random thoughts, complaints, and what’s next</h2>
<ul>
<li>The site is deployed with <a href="https://www.netlify.com">Netlify</a> via a Github repo, and it <em>just works</em>. Netlify is so great.</li>
<li>I don’t care what you “real developers” say, the two biggest problems in programming are <em>environmental variables</em> and <em>formatting dates</em>. I am thankful for ChatGPT for helping me with the date formatting piece, and my colleague and friend <a href="https://doodlesbyderry.com">Derek</a> for helping to get the environmental variables to work.</li>
<li>Last.fm’s API clearly hasn’t been touched in years and the documentation isn’t great, so it’s been a bit of a mission to figure all that out. <a href="https://www.postman.com">Postman</a> has been a life-saver here to test the API calls and see what data comes back.</li>
<li>YouTube’s API has a limit of 100 search lookups per day, which feels ridiculously low. I hit that within an hour while I was building and testing it. Oops! On the upside: I am now much better at error handling. If the site hits that limit it will now show a message to that effect, and link to a direct search on YouTube for the song.</li>
<li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f3.png" alt="⏳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> I’m using YouTube only because the Spotify API makes it incredibly difficult to get an auth token. Auth tokens expire after 1 hour, and refreshing that token every hour is currently beyond my limited skills. I might come back to this as well because the Spotify API has <em>sooo</em> much interesting data.</li>
<li><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/23f3.png" alt="⏳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Another huge data source is the <a href="https://musicbrainz.org/doc/MusicBrainz_API">MusicBrainz API</a>. I plan to spend some time wading through those docs as well to see what else I could add.</li>
<li>If you can think of any other cool things I might want to add to this, please <a href="https://pdx.social/@rianvdm">reach out on Mastodon</a>!</li>
</ul>
          <br>
          <br>
          <hr>
          Thanks for still believing in RSS! Get in touch <a href="https://elezea.com/contact">here</a> if you'd like.]]>
        </content:encoded>
                      </item>
      </channel>
</rss>