In our house, new year is always a fun time, we get together, have some drinks and play a few games. This year, as we all like music and I love Spotify, I thought, I wonder what we can do with Spotify? Well, turns out quite a bit to be honest. After a little thought, there came the 7 Second Intro game. Check out this article to learn how it was “built”.

First of all, be under no illusion I have design documentation and user guides for this little project. Far from it, I thought of it one afternoon and two hours later it was done and ready to use.

For those that don’t know, the concept is pretty simple, you give your contestants 7 seconds to listen to a song introduction and give them points for correctly guessing the artist and song. Much harder than it sounds.

I learned that Spotify have a pretty good set of SDKs and APIs, one of them in particular the Web Playback SDK. The documentation is fairly good and has a built example, which I actually used as a base for this. The basic architecture is that it uses Spotify Connect to create a device, which when registered you will see in your Spotify player of choice, for me this is the iPhone app. Then you play a song on the app and select the output as the registered web browser and through Spotify Connect it plays in the browser, magic!

In order to only let Spotify play 7 seconds of the song, we can use the player_state_changed event within the SDK. When the song starts playing, this starts an internal JavaScript timer for seven seconds, after that timer elapses, you then get 30 seconds to mark your answers before the answer is revealed.

CODE

Accessing the data around the artist and song title is quite simple as well, the return object actually contains quite a bit of data, for this I only wanted two things, song data and the state (this is if the player is paused or not), however they reside within the object but I could still cut down what I was returning by changing the initial code:

player.addListener('player_state_changed', state =>

Instead of what is posted above, you can change this to the following:

player.addListener('player_state_changed', ({paused, track_window: {current_track}}) =>

Within the event we can add some more logic to check if the song is paused, which will trigger the title and artist to be displayed.

if (paused) {
// Playing the next song
document.getElementById("result").style.visibility = 'hidden';
} else {
// Pause after 7 seconds, we need to do it actually for 8 seconds though
var paused = setInterval(function () {
player.pause();
document.getElementById("artist").innerHTML = current_track.artists[0].name;
document.getElementById("title").innerHTML = current_track.name;
}, 8000);
}

Of course, the only place to host this is a free Azure App Service Plan for the night. Everyone loved it, so for me, I learned a load of useful things and everyone had fun. Ok, so it’s a bit silly and it’s a bit of fun, but the SDK is actually really powerful and got me thinking of other ways it could be used. If you’ve done something off the cuff with a set of APIs or an SDK, get in touch and let me know, I’d love to hear from you!