Build a web app to play random songs on Spotify using HTML and JavaScript
Fatigued by recommendations, algorithms-fed discoveries and bubble effect, I embarked on a journey to build a simple (as in, down-to-one-button simple) app to give me a “random” song, out of the whole Spotify catalogue.
Random as in not based on genre, mood or anything really.
To keep development and deployment simple and fast I opted to build it via Glitch, and used this template to take care of all the annoying but necessary things (looking at you authentication, token handling, redirects…)
This is how the app looks like (you can find it here: https://spotify-random-song.glitch.me/):
Basically, it’s one button. When clicked it will pick a “random ”song from Spotify and automatically start the playback if you have Spotify Premium, otherwise provide a play button to start the song.
The nitty-gritty
Now that we’ve seen the glorious UI, let’s dive in the code to understand how it works. First, let’s take a look at the files included in the source code on Glitch:
As you can see, the structure is pretty bare-bone with one index.html file, which takes care of rendering the UI and widgets and script.js, which contains all the logic to authenticate the user, connect to the Spotify SDK and play and save songs.
User Authentication
The first step is to authenticate the Spotify user via Javascript. For this we use the code below, taken from here:
Basically, this code redirects a new user to the Spotify login page the first time it visits the app. Since the user will play songs and potentially save them to their own library, we need to request the “streaming”, “user-modify-playback-state” and “user-library-modify” scopes.
Note: this code requires the setup of a Spotify application to create your client ID and secret, and set the redirect URI. If you’re looking for info on how to do this, you can follow this guide.
Web Playback Setup
Once the user is logged in, we can setup the Web Playback SDK, to be able to control their Spotify player. To do so, we use the code below, again from here:
This code uses the token obtained during authentication to initialize a new Spotify.Player object, which will take care of playing or skipping tracks.
Now that we have a player ready, we can use the following code to play a specific song:
The play function above takes two inputs:
- device_id: the Spotify device where the track will be played; note that this is automatically initialized in the previous code block, and it is represented by the web browser itself;
- track: this is the Spotify URI of a track, for example: spotify:track:6OQTJ7llyUiejKFxR4MUuy
Custom code: pick a play random song
With everything set-up, we can now focus on writing custom code to carry out the features we want to include in the app, namely playing random songs at the click of a button.
First, we need a way to pick seemingly random songs. Off of this reddit thread, I opted to generate random strings of 2 letters to be used as query in a search, such as “be”, “ma”, “yt” etc. etc.
This function takes care of generating such queries:
The next step is to perform a HTTP GET call to the Search API endpoint with the generated query, retrieve a result in a random position and play it.
The getASong function above first executes an HTTP Ajax call to the Search API endpoint, using a random query generated by generateQuery above and a random offset as parameters. If this call is successful, it invokes the play function as seen above, to start the playback. Furthermore, it displays an embed widget to start/stop the playback manually, if desired.
The last touch: saving tracks to the user’s library
Since the whole point of this little tool is to find new music, we have to give the user the possibility of saving tracks, in case luck strikes and the random output becomes their new favorite songs.
To do this, we can write a function that performs a HTTP PUT call to the Tracks API, adding the song to the user’s library:
That’s it!
Want more? Find out how to create your own playlist generator in this post!
TL;DR
For those who scrolled all the way down, this post shows how to build a web app with JavaScript to: authenticate to Spotify and setup the Web Playback SDK to play random songs from Spotify; search and save songs to a user’s library via Spotify API.
Useful Links & Sources
Here you will be able to find the code running the app:
Source code: https://glitch.com/edit/#!/spotify-random-song
Live app: https://spotify-random-song.glitch.me/
Template for Auth & Web Playback setup: https://glitch.com/edit/#!/spotify-recommendations
