Generating Spotify and Apple Music Playlists for Walking

Take a Walk with Caamp

It is the 5th anniversary of Caamp as a band and they wanted to develop an online activation which would engage fans with their catalog and their shared love of the outdoors. As it turns out, the management and label were fans of the playlist generators I built for Khruangbin and Tycho, among others. So, we thought it would be fun to develop a variation of this concept which encouraged fans to go for a walk, accompanied by music from Caamp and their friends. It reminded me of the original Khruangbin playlist generator but swapped flights for short walks. 🚶🏻‍♂️ From a development perspective, it was very enjoyable mashing up Mapbox, Contentful, Spotify, and Apple Music in a simple user experience.

Generate your own walking playlist with Caamp today and read on to find out how this web app came together.

Where Are You Headed?

Complete user journey

Our app provides just the right amount of music for a walk by calculating the duration of the journey. In order to do this, the user must provide their starting point and where they are headed. I drew a lot of inspiration from the Google Maps direction form because I know the power of known UX. In general, I wanted to make sure users were comfortable with the interface and it felt intuitive. Each textfield on the form sends what the user types to the Mapbox Geocoding API and presents a list of places they can choose from. This is done by simply passing the query to the /geocoding/v5/mapbox.places endpoint.

Once the user provides their origin, we limit destination results to places within 5 miles. To do this, we utilize the Mapbox Geocoding API bounding box parameter. We can calculate this bounding box by using Turf.js.

let point = turf.point(origin.coordinates)
let buffered = turf.buffer(point, 5, { units: 'miles' })
let bbox = turf.bbox(buffered)

In this app, we require the user to provide their destination. However, in a future project, I may use Mapbox’s Isochrone API to recommend locations a certain time distance away.

Walking Duration

Once we have the coordinates of both the origin and destination, we can use the Mapbox Directions API to calculate how long it would take to walk from one point to another. All we have to do is pass both pairs of coordinates to the /directions/v5/mapbox/walking endpoint. Mapbox may return several routes but we can simply pull the first duration for playlist generation purposes.

directions.routes[0].duration

Now that we know how much music to utilize, we can move onto allowing users to have a say in which kind of music is featured.

Walking Preferences

Preference Icons

Every track in our pool is stored on a client managed Contentful account, alongside its Spotify audio features. These features include such measurements as loudness, tempo, and valence. In the web app, users answer four simple questions to decide if the tracks which are featured should contain tracks which are high or low in a particular audio feature. For example, the user must choose between “I’m admiring the cityscapes” or “Connecting with Mother Nature.” This references whether their walk takes them through natural or an urban environments. Their choice would decide how loud the tracks should be as a city might be noisy and require louder tracks. It’s a bit superfluous but I enjoy giving the user some say in the music they receive.

With the duration and preferences, we have all the info we need to generate a playlist. Check out the Khruangbin and Tycho dev blogs for more info on pool management with Contentful and actually saving the playlists on Spotify and Apple Music.

Silhouette Component

Looking through the design direction Halla! developed for Caamp’s anniversary, I was drawn to an interesting technique which used vintage plant illustrations with object silhouettes. I thought this would be a good way to handle some delightful interface elements throughout the user journey. I was able to pull this off in CSS using a combination of CSS mask and blend-mode (so it blended into the off white background.) You can dig into the CodePen above but here’s the main snippet:

.silhouette{
  background: url(texture.jpg);
  background-position: cover;
  background-size: cover;
  height: 360px;
  mask: url(icon.png);
  mask-size: cover;
  mix-blend-mode: darken;
  width: 360px;
}

I ended up rolling a simple Vue.js component which is used throughout the UI.

Thanks

Thanks to Mick Management, AWAL, and Halla! for hiring me to build this lovely experience and being an incredible collaborative partner, every step of the way. This is a web property Caamp will be able to draw from for years to come. Congratulations to Caamp for this important milestone in their career! Get more info on all the 5th anniversary festivities on their website.