Building an Ear Training app using Spotify and React PART 2— Interactive Quiz UI
Have a look at the first part of this series: OAuth 2.0 & Spotify Login with React.
In this article, we will see how to build a quiz for music learners that would ask the user to guess the key/scale of the songs from the user’s Spotify playlist, searched Albums and Top Tracks of searched Artists using Spotify Web APIs.
The required output will be:
For the article, I am using React-Bootstrap for better UI, and this spotify-web-api library for ease in using the Spotify Web APIs.
Quiz: User Playlists
1. Getting User’s Playlists:
After the user logs in and goes for the PLAYLIST option from the home page, the list of his Spotify Playlists will be displayed to him.
For the same, the getUserPlaylists() function will provide us the list of user’s playlists. For further use, we will store the id and name of each playlist in an array and thereby presenting the array of playlists to the user.
When the user will click any of the playlists, he will be redirected to ‘/playlistTrack/${item.id}’. Here in the URL, we will send the playlist ID of the selected playlist.
2. Getting the list of songs from the selected playlist:
Now, the motive is to directly start the quiz of the playlist selected by the user. But before that, we need the songs residing in that specific playlist.
For that, the getPlaylistTracks(UserID, PlaylistID) function will get all the songs on the playlist and we will store the id and names of the songs in an array of state. USER ID will be gained from the getMe() function, and the PlaylistID can be gained from the URL using ‘this.props.match.params.id’.
Inside render(), we will return the ‘Quiz’ Component by passing the array of songs as the props.
3. The Quiz Component:
As the below-mentioned code may seem a bit longer, I have tried to represent the flow of the same diagrammatically as:
After setting the Access Token inside ComponentDidMount(), a function is called from there to initialize the process.
Initialization function(init()): Here an array of objects is generated from the props that we passed before and every object would contain a song id and a boolean value for checking if the user has attempted that song guess or not. Along with this, the viewport of the webpage is checked in order to know how to display (i.e mobile view/desktop view).
So the next step is to store the id of the first song in the list as the current song id in the state, in order to play the first song first. And the URL is set for Spotify Embed or Player that would play that same first song. Now the initial view is set for the user.
Now as per the user’s action, respective functions will play their role. When the user enters his response, it will be stored in the state.
If the user guessed a key for the song, getresult() function will be executed and its function is to use the Spotify API to get the correct values for the key and mode of that current song with the help of the library (getAudioFeaturesForTrack(current song ID) function). After setting the responses given by Spotify in the state, the function ‘generateResult()’ is called.
generateResult() function will simply check if the user’s responses match with Spotify’s. And according to the result, it will pass appropriate toast to the user. As the user gets only one chance to receive a (positive or negative) score for a song, a condition is kept in this function that says ‘if and only if it is the first attempt of the user for that song generate the result’ else the user will be allowed to keep guessing the key of the song unless it is true. The score will only be counted on the first attempt.
Now comes the role of ‘playNext()’ function. This function is executed either when the user answers correctly or he clicks the ‘SKIP’ button. This function will just increment the current index value traversing inside the array of objects. And further changing the id of the current playing song in the state and the respected player URL.
I have also imported a Piano that may help the user to guess the key of the song. For the same, refer to this.
And the final step is to generate the final Scorecard after the completion of the quiz. For that, a condition is applied under the ‘playNext()’ function that is the entire playlist is traversed, then generate the final Scorecard.
Quiz: Album Tracks
Search Albums:
First, the searched value is received from the user and the query is passed on to the function as an argument in order to display the search results to the user. The library provides a function ‘searchAlbums(query, response_limit )’ and we will store items like Album_ID, Album_Name, and Album_Image from the response and store it in an array of state and later by display the same to the user.
In order to start the Quiz, the user has to select any Album. In the link, the Album ID is passed on as props in order to fetch the songs of the same album from Spotify.
Fetching Tracks of the selected Album: Here the Album ID from the props is used to receive the tracks through the function getAlbumTracks(Album_ID). The response(i.e. song id)is stored in the form of an array of state and the Quiz component that we built before, is returned with the props(the array of album tracks id). And subsequently, the Quiz consisting of the selected Album Tracks will be commenced.
Quiz: Artist Top Tracks
This will be no different from the above one except the APIs will be of Artist Top Tracks instead of Album tracks.
The function ‘searchArtists(searched_artist_name, response_limit)’ is used to fetch the results from Spotify. And as the Quiz will be of selected Artist’s Top Tracks, the function ‘getArtistTopTracks(Artist ID, Country code)’ is used.
And the Quiz will get going for the selected Artist’s Top Tracks.
Hope you understood the article…
Here is the git repository of the same:
Check out my other Blog Series on ‘Road-To-Web-Development’ :
