Building an Spotify and Apple Music powered A/B Player for R.E.M.

Supporting the 25th Anniversary of Monster

I remember the first time my sister showed me the R.E.M. Monster cassette. Visually, the striking orange art with blurry bear head intrigued me. However, it was the first listen and storming introduction to “What’s The Frequency, Kenneth?” which had me hooked. This cassette became one of a few which Maria and I would share through my early teens, alongside the “Bullet with Butterfly Wings” single and probably something by Pearl Jam. There’s so many hits on this record but I do remember playing “Star 69” on repeat then. So, you can imagine my excitement when R.E.M. reached out for help in promoting the 25th Anniversary release of this incredible album.

In addition to your typical anniversary remaster special edition bundle with all the fixins, R.E.M. enlisted the help of the album’s original producer, Scott Litt, to create an entirely new mix of the album. Once I heard heard the striking difference between the two versions, I proposed that we simply create a web app which would allow fans to seamlessly switch between the two versions. I had a good idea of how I could handle this with the 30 second MP3 preview clips but knew integrating full audio via the Spotify and Apple Music platforms would be a learning experience.

You can A/B both mixes in full now from the web app and read on to find out how we built it.

Switching Between 30 Second MP3 Clips

I started development on this project by doing something I haven’t done since my SoundCloud days: creating an embeddable widget! In addition to the web app, we wanted to create some simple widgets which publications could use inline of the articles they would write about this release. You can see a few of these widgets in action on this Engadget piece. Since 30 second clips are rather small files, my solution for this involved playing both the original and remix files simultaneously and toggling the mute on and off depending on which mix is currently being listened to. While this could have been developed in Web Audio, I decided to use the Howler.js library to make things even simpler. Let’s take a look at some of the code.

First, we’ll need to initialize our original and remix sound objects. Let’s go ahead and mute the remix to start. You’ll also want a variable which keeps track of which mix the user is currently listening to.

let a = new Howl({
  src: ['original.mp3']
})
let b = new Howl({
  src: ['remix.mp3']
})
b.volume(0)
let mix = 0

Now if you want to toggle the playback, you’ll need to do it for both files to keep it in sync.

function togglePlayback() {
  if (a.playing()) {
    a.pause()
    b.pause()
  } else {
    a.play()
    b.play()
  }
}

Finally, you can toggle the mute of both sounds to jump between mixes, updating that mix variable to give yourself a point of reference.

function toggleMix() {
  if (mix == 0) {
    mix = 1
    a.volume(0)
    b.volume(1)
  } else {
    mix = 0
    a.volume(1)
    b.volume(0)
  }
}

Switching Between Full Audio

While I have built several custom full audio players using Spotify and Apple Music now, I knew I would need to develop a slightly more involved solution to add the A/B functionality. Unlike the MP3 clips, I would not be able to play both mixes at the same time because neither of the services would allow you to do this via their apps either. Instead, I would need to actually switch from one track to another but somehow retain the current time position. Since both streaming service platforms handle this differently, let’s look at each solution individually.

Spotify

Rather than go into detail about setting up Spotify custom players, I would suggest checking out my recent Lamb of God case study where that is mostly covered. Instead, let’s focus on what it takes to switch tracks while retaining position. Spotify’s Web Playback SDK will keep you informed of the player’s current position. Go ahead and store that in a separate variable called position so you can use it between tracks. The /play endpoint will allow you to switch the track from the original to remix by providing a Spotify track uri. In addition, you can provide a position_ms to establish the position to start playback.

spotify.put(
  `me/player/play?device_id=${device_id}`,
  {
    uris: [current_track_uri],
    position_ms: position
  }
)

Apple Music

While Apple Music does provide a similar endpoint to adjust the current player context, it does not (to my knowledge) provide a way to pass a position on this step. Instead, I’m using a series of API calls to set the queue, start playback, and then seek the time.

apple.setQueue({
  song: current_track_id
}).then(() => {
  apple.player.play()
  .then(() => {
    apple.player.seekToTime(
      position
    )
  })
})

Bonus: Instagram and Facebook AR Filter

Built in Spark AR

Thinking back to my original childhood reaction to seeing the Monster cover for the first time, it’s only right that I would also propose creating an AR filter that would allow me (and fans) the ability to don the bear mask. This is actually quite easy to do in Spark AR using a Plane texture nestled within a FaceTracker. In addition, we used a NativeUI Picker to jump between the original (orange) version of the artwork and new remixed (blue and glitched) art. Thanks to the Spark AR community for providing some helpful information on handling glitching and to Luke Hurd for the hot tip of toggling Null Objects to create multiple filters in one. Head over to Instagram or Facebook to try the mask on today.

Thanks

Jem Cohen

Thanks to Kay Anderson and Dan Faughnder for bringing this project to me. If you can believe it, the last time Kay and I worked together is likely the last time I developed an embeddable widget! That was for the AlunaGeorge Body Music album premiere in 2013. Dan is always a pleasure to work with and I look forward to seeing what he will achieve at his new post at Light In The Attic. I must also commend Kay for navigating the Spark AR submission process perfectly and in turn helping submit my first artist filter!

Finally, what a dream come true to be able to channel some childhood inspiration and work for R.E.M. At one point in development, I received a text message full of photos of the band using the filter while on a press tour in Europe. You can imagine my delight to see photos of the artist using something I built but being unable to identity who was who because they were all wearing bear masks. Happy 25th Anniversary Monster.