---
title: Music
description: This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here.
layout: default
permalink: "/music/index.html"
updated: "now"
schema: music-index
---
{% capture js %}
  {% render "../../../assets/scripts/media-toggles.js" %}
{% endcapture %}
<script>{{ js }}</script>
<h2 class="page-header">{{ title }}</h2>
<p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
<p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a></p>
{% render "partials/widgets/now-playing.liquid" %}
<hr />
<h3 id="artists" class="section-header no-top-margin">
  <a class="link-icon" href="/music/artists/this-week">
    {% tablericon "microphone-2" "Artists" %}
    Artists
  </a>
</h3>
{% render "partials/media/grid.liquid", data:music.week.artists, shape: "square", count: 8, loading: "eager" %}
<h3 id="albums" class="section-header">
  <a class="link-icon" href="/music/albums/this-week">
    {% tablericon "vinyl" "Albums" %}
    Albums
  </a>
</h3>
{% render "partials/media/grid.liquid", data:music.week.albums, shape: "square", count: 8 %}
<div class="section-header-wrapper">
  <h3 id="tracks" class="section-header">
    <a class="link-icon" href="/music/tracks/this-week">
      {% tablericon "playlist" "Tracks" %}
      Tracks
    </a>
  </h3>
  <div class="section-header-buttons client-side">
    <button class="small active" data-toggle="tracks-recent">Recent</button>
    <button class="small secondary" data-toggle="tracks-window">This week</button>
  </div>
</div>
<div id="tracks-recent">
  {% render "partials/media/music/recent", data:music.recent %}
</div>
<div class="hidden" id="tracks-window">
  {% render "partials/media/music/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays, count: 10 %}
</div>
{% if albumReleases.size > 0 %}
<h3 id="album-releases" class="section-header flex-centered">
  {% tablericon "calendar-time" "Anticipated albums" %}
  Anticipated albums
</h3>
{% render "partials/media/grid.liquid", data:albumReleases, shape: "square", count: 8 %}
{% endif %}