The Long Tail, with Spotify and Polymer

The Long Tail. That’s not something new, neither on the Web nor in the music field. I remember when I first read Chris Anderson article , and since, many have talked or wrote about it, including Paul Lamere or Oscar Celma in the music-tech sphere.

Yet, one must admit that, with millions of tracks available online, it’s always a challenge to find something new,  digging in that so-called long-tail of less popular artists or songs.

So, between Word Cup games, I’ve built a web component – and a companion web app –  to enjoy the less popular tracks of any artist.

A web component to play an artist’s long tail

Built with Polymer and using the new Spotify Web API, <long-tail> is a web component that embeds a Spotify play button with the less popular tracks of one artist.

First, install it with Bower:

bower install long-tail

The, include in an HTML page:

<html>

<head>
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="bower_components/long-tail/long-tail.html">
</head>

<body>
  <long-tail artist="4tZwfgrHOc3mvqYlEYSvVi" size="25"></long-tail>
</body>

</html>

And there it is, you’re ready to play. No JS to write, no code to copy and paste, everything is handled internally: the beauty of Web components. Unfortunately, Javascript can’t be used on WordPress.com blogs, but here’s the result of the previous snippet.

Daft Punk less popular tracks
Daft Punk less popular tracks

The source is on github (MIT license), and you can see how easy it is to create. It simply calls the Spotify API to find an artist’s albums, then tracks (limiting to 50 results each time – hence parsing a maximum of 2500 tracks per artist), finally sorting them by inverse popularity. It also excludes the ones with popularity=0, as it seems there are not always the less popular ones. Maybe some region-dependant issue?

I suppose, as many recent JS toolkits such as AngularJS, that the learning curve will be stiffer when building  advanced components (probably due to the early-stage documentation), but at a first glance, it looks very intuitive, and there are many elements to reuse already.

Try it with your favorite artists

As the component is mostly for coders, I’ve put together a companion Web app – shamelessly reusing Paul’s design from his recent Spotify hacks. For each artist, it uses the previous component and displays their 50 less popular tracks, according to Spotify.

Try it at The Long Tail, and have fun exploring the hidden gems of your favorite artist!

The Long Tail of Rancid tracks
The Long Tail of Rancid tracks

 

About these ads

5 thoughts on “The Long Tail, with Spotify and Polymer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s