Integrate the Spotify API in JavaScript/

...

/

Artist's Information

Artist's Information

Search for information about an artist using the artist's Spotify ID.

We'll cover the following...

The Get Artist endpoint is used to get information about an artist using the artist’s Spotify ID. The base URL of this endpoint is https://api.spotify.com/v1/artists/{id}. The path parameter {id} is replaced with the artist’s ID whose information we want. Let’s assume that we want to get details of an artist with Spotify ID sample_id. Our URL in this case will be https://api.spotify.com/v1/artists/sample_id.

Request parameters

The Get Artist endpoint has no request parameters.

The code below shows how to use this endpoint to retrieve the details of an artist.

Press + to interact
const endpointUrl = new URL('https://api.spotify.com/v1/artists/0TnOYISbd1XYRBk9myaseg');
//0TnOYISbd1XYRBk9myaseg is the ID of Pitbull
headerParameters = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer {{CLIENT_CREDENTIALS_ACCESS_TOKEN}}'
}
const options = {
  method: 'GET',
  headers: headerParameters
};
async function fetchArtistInformation() {
  try {
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
fetchArtistInformation();

Let's look at a brief explanation of the code:

  • Line 1: We set the URL to https://api.spotify.com/v1/artists/0TnOYISbd1XYRBk9myaseg. We can change the Spotify ID of the artist in this line to get information about a different artist.

  • Line 14–23: We define a function, fetchArtistInformation(), that calls the defined endpoint and prints the response.

Try some of the suggested artist IDs from the table below.

Artist's Name

Spotify ID

Keith Haring

3HyxTmsgPkff0qbmLxiaJz

Eminem

7dGJo4pcD2V6oG8kP0tJRR

Beyonce

6vWDO969PvNqNYHIOW5v0m

Imagine Dragons

53XhwfbYqKCa1cC15pYq2q

Johnny Cash

6kACVPfCOnqzgfEF5ryl0x

Note: We can use the Search for Item endpoint to get the Spotify ID of an artist.

Response fields

The table below contains the important information we get from this endpoint.

Response field

Type

Description

spotify

String

This is the Spotify URL of the artist.

followers

Object

This object contains objects which provide information about the followers of the artist. It contains two elements: href which will always be NULL and total which shows the number of followers.

genres

String [Array]

This array contains the genres the artist has performed in.

href

String

This is a link to the endpoint which provides full details of the artist.

id

String

This is the Spotify ID of the artist.

images

Object [Array]

This contains the information for the artist's images. Each object in this array contains three elements which give us the URL, height, and width of the image respectively.

name

String

This is the name of the artist.

popularity

Integer

This is the artist's popularity rating based on the rating of the artist's tracks. This ranges between 0 and 100, with 100 being the most popular.

Multiple artists' details

Imagine running the above endpoint for each artist ID to get the details of multiple artists. It’s not very scalable. However, the Spotify API itself provides the solution. We can use the Get Several Artists endpoint that fetches details of multiple artists, using their Spotify IDs with only one API call. The base URI of this endpoint is https://api.spotify.com/v1/artists.

Request parameters

This endpoint requires only one query parameter, which is described in the table below:

Parameter

Category

Type

Description

ids

Required

String

These are comma-separated Spotify IDs of the artists we want to get details of.

The code below demonstrates how to use the Spotify IDs of multiple artists to get their information with only one API call. In the code below, we retrieve the details of three artists using their Spotify IDs.

Press + to interact
const endpointUrl = new URL('https://api.spotify.com/v1/artists');
const queryParameters = new URLSearchParams({
  ids:'2CIMQHirSU0MQqyYHq0eOx,57dN52uHvrHOxijzpIgu3E,1vCWHaC5f2uS3yhpwWbIA6'
});
//2CIMQHirSU0MQqyYHq0eOx is the ID of deadmau5
//57dN52uHvrHOxijzpIgu3E is the ID of Ratatat
//1vCWHaC5f2uS3yhpwWbIA6 is the ID of Avicii
headerParameters = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer {{CLIENT_CREDENTIALS_ACCESS_TOKEN}}'
}
const options = {
  method: 'GET',
  headers: headerParameters
};
async function fetchArtistsDetails() {
  try {
    endpointUrl.search = queryParameters;
    const response = await fetch(endpointUrl, options);
    printResponse(response);
  } 
  catch (error) {
    printError(error);
  }
}
fetchArtistsDetails();

Let's look at the changes we made in the code:

  • Line 1: We change the URL to https://api.spotify.com/v1/artists.

  • Lines 3–5: We add the query parameters.

  • Line 20: We change the function's name to fetchArtistsDetails().

Response fields

We get the same kind of information that we did with the previous endpoint, but for three artists.