🏝️

Trying out Slack Key! From Ozzie Kotani's Guitar Playing Hawaiian Style.

Taking another swing, eyes of the hands!

🐴

Revisiting this one. So romantic.

Getting jiggy with it!

Nothing says spooky like the chromatic scale!

Will this piece still be funny now that pennies are no longer being produced?

In short — I made a new webpage to chronicle my listening history. Woohoo!

In the distant past of 2010, I distinctly remember two things:

1. Reading headlines on LifeHacker about a neat new service making a splash across the pond called Spotify — where you can legally stream a seemingly infinite library of music.
2. From that same evening: ripping Plastic Beach by the Gorillaz onto my computer, loading it into my iTunes library, and transferring it to my iPod.

A year later, I was shocked by the instantaneousness of having access to all music ever recorded.

15+ years later, I find my relationship with listening to music vastly different from those days. Teen-specific sentiments aside! I'm listening to a broader range of music, going deeper into sub-genres, and have heard international artists I otherwise would have never been exposed to. That's all good and well!

At the same time, I find myself not listening as deeply, not listening to whole albums, and allowing a large portion of my listening to be guided by unseen forces. Perhaps the pace of life has changed this, perhaps age, perhaps the coming and going of fascinations and interests.

Whatever the reason, I had a moment ripe for reconsidering my listening habits and the technology that supports them.

CDs

Visiting my childhood home, I found stowed away a bunch of physical CDs that I hadn't thought of, let alone heard, in ages. Tucked in jewel cases, some in plastic sleeves from friends who burned playlists for me, nostalgia ensued. I popped several into a physical CD player. (One of those big 2000s era boomboxes was available. After that, I popped one into my car. Being built in 2016, it still has a CD player.) I felt the nearly forgotten anticipation of waiting for the music to start, the tactile satisfaction of placing media into it's reciever.

Seeing a natural trail of my listening history in physical form, I realized this sort of thing was too important to me to leave it to chance, tech companies that come and go, etc. I enjoyed being curious about what caught my ear, collecting it as a source of inspiration, and saving it in a way that it can serve as a time capsule later. There's a seeming urban legend about how Andy Warhol would wear a different perfume daily for a couple of months so that he could then remember that point in time. Music has a similar effect; it's a great memory maker.

Unfortunately, physical CDs are not the answer. I found out all too soon that my favorite Japanese City Pop CD's would be $30 each + international shipping. Too many recent favorites don't do print runs of their music. Even so, the practical reality is that most of my listening is done through apps. A physical purchase would be reserved for special albums, not for the entire collection.

It begged the question — what was I really trying to accomplish? If it were to be more intentional about my listening and saving my listening, the nerdiest answer I could come up with was a webpage. I had remembered those times curating my iTunes library intentionally, and I was suddenly interested in doing the same on my own domain.

The Data Wrangling

The development was largely trivial — the project's meat was in data collection and cleanup. I had to pop my physical CD's into a spreadsheet. But that only accounted for a fraction of my listening. It took crawling my iTunes library from ~2012 when I made the switch to streaming, as well as exporting my Spotify playlist data.

With that done, several rounds of lassoing data ensued. More memories came flooding back — it took considerable effort to keep good hygiene with an iTunes library. It's easy for naming conventions to get off, for the same artists to have different names based on stylization (ex: Arcade Fire and The Arcade Fire, or Tune-Yards and tUnE-yArDs), and for album art to be inconsistent. At times, it was frustrating. Now, though, it was the right amount of resistance to help me slow down and really savor the collection as a whole.

Tagging by year listened was a goal, as this was meant to reflect a timeline of listening. The 2000's required big ol' estimates, while for 2016 on I could use Spotify listening data.

While I was at it with my exported Spotify data, I decided to transfer over the top songs by year. This feature is universally beloved — I listened to my first (2016) playlist for years after the fact. Spotify doesn't cover the entire landscape of my listening, but it'll do. Those tracks were tossed into JSON and are now listed under /topsongs/{year}.

Violà! A full day's effort later, and I have 930 albums listed on my new Music Shelf page. I know that to most readers this is just a list of albums. But for the curator, this is a delightful wall of memories and favorite melodies that spans a mile long.

The page itself is simply a list with cover art, album, and artist. Of course, there's more I could do. Were I feeling particularly clever, I could whip up integrations with Spotify for further automation. BUT! The point is for this to be manually maintained. To have a process that even, ever so slightly, resembles the modern-day equivalent of getting into the car, driving to FYE, walking through the stacks, making a selection, bringing it home, and THEN putting it on the shelf. It allows time to live more deeply with the music.

Will this change my listening? It already has. Metaphorically, I've gone from only ever listening to the radio to finding my favorites and spinning them on repeat. Even without abandoning Spotify ("Yet you participate in society"), I have a reason to manually add albums, skip the MASSIVE UI encouraging I hop to the next listening destination right away, and get to know albums better. (Significant for me, since for a time I was almost exclusively listening to algorithmically suggested tracks before it got to be too much like the snake eating itself.)

The aim is to balance the best of both modernity and older practices. Like any choice around modern technology, our approach informs the tools we use and how we use them, not vice versa.

✌️

[phone rings]

Hey!!

I'm calling to let you know I have new music out — Phone Lines! It's a little Shibuya-Kei-inspired party. Enjoy some cutesy melodies and whimsey!

Anyway, my dog is calling me on the other line. Gotta go — talk to you later!

[hangs up]

• Listen on 🌎 this site
• Support the album on 🤘 Bandcamp.
• Listen on 📺 Youtube.
• Listen on 🙉 Spotify.

Merry Christmas, everyone! ❄️

It didn't feel very POSSE of me to have so much on this site as a source of truth, except for my own albums!

All the major players have their baggage in the music hosting/streaming space, unfortunately. Even previously humble Bandcamp has traded parent companies twice in the past few years.

And besides — I have to say there's a little something special in having music play on this lil' site — in the same way that a hand rolled pizza at home is different from a frozen one, eh?

So I whipped a solution up this morning! See an example on the ol' Bird Box OST page.

Tech

For the technically curious —

The base html audio element, like so many others, comes out of the box with plenty of helpful attributes. There's some extra work to get a playlist style interface, but this is handled through those attributes. Namely: onEnded, which allows the player to continue to the next track, onTimeUpdate to visually show track place, and onLoadedMetadata for keeping tabs on the track length (helpful for visual slider for track time position)

const PlaylistPlayer = ({ tracks }) => {
  const [currentIndex, setCurrentIndex] = useState(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const audioRef = useRef(null);

  const handleTimeUpdate = () => {
    setCurrentTime(audioRef.current.currentTime);
  };

  const handleLoadedMetadata = () => {
    setDuration(audioRef.current.duration);
  };

  const handleEnded = () => {
    if (currentIndex < tracks.length - 1) {
      play(currentIndex + 1);
    } else {
      setIsPlaying(false);
    }
  };

  // . . .

  // part of the return:
  <audio
    ref={audioRef}
    onEnded={handleEnded}
    onTimeUpdate={handleTimeUpdate}
    onLoadedMetadata={handleLoadedMetadata}
  />;
};

export default PlaylistPlayer;

Funnily enough, the range input element works well for showing and adjusting the track position:

const handleSeek = (e) => {
  const time = parseFloat(e.target.value);
  audioRef.current.currentTime = time;
  setCurrentTime(time);
};

// . . .

<input
  type="range"
  min={0}
  max={duration || 0}
  value={currentTime}
  onChange={handleSeek}
  aria-label="Seek"
/>;

The rest is styling and a few more handlers in the React component.

Files are stored on AWS through S3. I had to whip up a script to upload and adjust my albums.js file en masse, a somewhat tedious task since many older albums were not quite as organized as my newer ones. Left plenty of time to get nostalgic!

Give it a whirl! Visit any of the albums on my music page.

Very cool tune.

Thanks to Let's Talk About Math Rock for the tabs and curated licks.

~☀️🏝️🐧~.

Thanks to Let's Talk About Math Rock for the tabs and curated licks.

A huge milestone in developing proprioception! One of a handful of pieces performed with eyes off the hands and on the sheet music. You can hear me "sounding-out" the next few syllables when a sizable leap is involved. But! All around not too shabby. Progress!

Diving back into the Faber books to get practice on proprioception!