Last weekend Amber, Anima and I drove from San Diego to Palm Springs to YxYY. We were streaming music from Spotify on the whole drive, and Spotify was scrobbling to my Last.fm account. Of course I was also tracking my location like I always do. Then it dawned on me that I could put together a map showing all the songs we listened to and where we were for each! Below is the result!
You can click on any of the pins to see the song that was playing at that point, and can even launch Spotify to play them!
Code
You can download the full source code here: github.com/aaronpk/music-map
First I downloaded my listening from Last.fm from the time period of the drive. Since each entry in the history includes a timestamp, I then query the Geoloqi API for my location at that time. I do this for each song, building up a GeoJSON object with all the needed info like song name, album cover image, etc.
The end result looks like a bunch of the GeoJSON features below
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-117.16489882608,
32.708429871758
]
},
"properties": {
"trackName": "Get Lucky",
"trackAlbum": "Random Access Memories",
"trackArtist": "Daft Punk",
"trackURL": "http://www.last.fm/music/Daft+Punk/_/Get+Lucky+(feat.+Pharrell+Williams)",
"image": "http://userserve-ak.last.fm/serve/126/91455201.png",
"localDate": "2013-07-12 14:38:01",
"localDateFormatted": "Jul 12 2:38pm",
"timestamp": 1373665081,
"spotifyURL": "http://open.spotify.com/track/69kOkLUCkxIZYexIgSG8rq"
}
}
After I generated the large GeoJSON file of all the songs, it was simple to put that onto the map using the Esri-Leaflet library. Leaflet can easily take a GeoJSON object and throw it onto the map with very little code. Most of the code was for formatting the HTML popup when you click one of the pins.
I then needed to retrieve the full history showing the exact path we drove. One call to the Geoloqi API gave me all the data in the time range, and I just had to re-format it as a GeoJSON LineString object.
Download the source code and try it yourself!
Playlist
Below is the playlist in Spotify so you can listen to the full playlist.
Have you ever made a project where you synced up songs to your location? Let me know!
