Using 3rd party application programming interface (API) called Napster, this app will fetch top five artists and display them to users. The user can then select any one of the artist . Then the app will fetch top tracks for that artist and display it to user. The user can then select a track and play the preview of the song.
Napster is a different way to distribute MP3 files. Instead of storing the songs on a central computer, the songs live on users's machines. ... This means that anyone can download, for free, any song that someone has taken the time to encode in the MP3 format. It has given rise to online music streaming.
It provides various developing options for us to create our own music apps. It has been revolutionized for decades. With Napster API , we can see user’s playlist , favorites, top charts.
STEPS1. Create a account on Napster.
2. Make a new project. API key for that project will be generated automatically.
3. Start building a new project in Voiceflow.
3. From documentation section of Napster, copy the base URL. For endpoints, go to metadata section of API documentation. Select endpoints according to your requirements (here choosing top 5 artists) and paste it in parameters section of integration block of voiceflow music app.
4. Instead of adding API key to the URL , add it to the parameter section.
5. Also for short responses for a given API and endpoints, add limit parameter to integration block.
6. Create a variable for top 5 artists. And 5 more variables for their respective names.
7. Now it’s time to figure out the various tracks of artist ,that will be provided by the user through capture block of voiceflow.
8. Go to Napster documentation page to fetch the endpoint URL for -Top Tracks of Given Artist. Also copy the API key for this particular project from your Napster account
9. Fetching ID for artist uttered by user: Go to first integration block to check that if it has the field called artist id. How to fetch? Using code.
CODE SECTION:
var artist_id //new variable is created for storing artist id
//Converting string to all lowercase to avoid mismatch because of upper/lowercase
artist_name = artist_name.toLowerCase()
//looping through top 5 artist
for(var i=0; i<top_5_artists.length; i++) {
//check the artist name in the list with the name provided by the user
if(top_5_artists[i].name.toLowerCase() == artist_name) {
//if match is found , fetch the id from the list into variable artist_id
artist_id = top_5_artists[i].id
//once id is found, no need to loop through again
break
}
}
10. Enter the artist_id variable to the endpoint URL of second integration block. Now test any random artist id. Copy the path of tracks from test artist id and transform it into new variable called track.
11. Fetching the track name and preview URL: A lot of information is displayed for various tracks, but we need only name of the track and URL to fetch it.
CODE SECTION:
var tracks = []; //array to store names and preview URL
for(var i=0; i<track_list.length; i++) {
tracks[i] = {
//name and previewURL are two fields of tracks array
name: track_list[i].name,
previewURL: track_list[i].previewURL
}
}
var track_names = []; //to store name of each track
for(var i=0; i<tracks.length; i++) {
track_names.push(tracks[i].name)
}
12. Inside capture block , make a new variable to store the track name provided by the user
13. Add another code section to fetch preview of given track.
CODE SECTION:
var previewURL
track_name = track_name.toLowerCase()
for(i=0; i<tracks.length; i++) {
name = tracks[i].name.toLowerCase()
if(name == track_name) {
previewURL = tracks[i].previewURL
break
}
}
14. Now create a stream block to play the preview of the track the user has requested for.
Comments