Spotify Display: Reading data via ESP 32 - Part 1

Music accompanies us through our everyday lives and the ability to read out current playback information such as title, artist and album directly opens up possibilities for displaying this data on a display and thus creating a creative decoration for the desk. With an ESP32 and the Spotify API, this data can be easily retrieved and used in a variety of ways.In this blog post, you will learn the basics of API requests to the Get Current Playing Track API Endpoint from Spotify.

Hardware:

Board with ESP32 chip; For example: Dev Kit C V2 or Dev Kit C V4 USB-C

Software:

If you are programming an ESP32 in the Arduino IDE for the first time, copy the following link in the Arduino IDE under: File->Preferences->Additional boards manager URLs : https://dl.espressif.com/dl/package_esp32_index.jsonand install the ESP32 package in the board manager.

The driver (CP2102) for this board is already installed By the operating system.

The Spotify API offers a variety of API endpoints to retrieve information or implement user interactions. To retrieve data such as title, artist, album and progress, the Get Current Playing Track API is suitable.

1 Create a Spotify app

To be able to use the Spotify API, you must log in with your Spotify account on the Spotify developer pageand open the dashboard (click on Account in the top right-hand corner). In the dashboard, click on the button Create App button and then enter a name and description of your choice. Use the following address for the redirect host: http://localhost/callback , this address is required for authentication. For the API type, select Web API.After successfully configuring the Spotify app, you can view a client ID under the app settings and the API key By clicking on "View client Secret".

Save these two pieces of information.

2 Authorization

Now open the following link in your browser using the ID from the previous step:

https://accounts.spotify.com/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=user-read-currently-playing%20user-read-playback-state&redirect_uri=http://localhost/callback

After a short time, a window opens asking for consent. After agreeing, the browser now provides a response that should look like this:

Save the code here (in the search bar for code=). This code is an authorization token.Now that you have received the authorization code, it must be "exchanged" for a request token via the API. You can find general information on this in the documentation.

The HTTPclient library contained in the ESP32 package is suitable for communicating with the API via an Arduino. As the response of the server in the json format, the decoding into plain text requires the ArduinoJson library is required for decoding in plain text.

The library can be downloaded as a.zip file via the link and added in the Arduino IDE under Sketch>Include Library>Add.ZIP Library....If you are using PlatformIO, copy the following into the lib_deps in the platformio.ini file:

bblanchon/ArduinoJson@^7.2.1

3 Requesting the refresh & access token

With the following program code, the authorization token is queried By the API in the final program during initial commissioning:

HTTPClient http;
http.begin(tokenEndpoint);

  // Set headers
  http.addHeader("Content-Type", "application/x-www-form-urlencoded");
  http.addHeader("Authorization", "Basic " + base64Encode(String(clientID) + ":" + String(clientSecret)));

  // Prepare the POST body
  String body = "grant_type=authorization_code";
  body += "&code=" + authorizationCode;
  body += "&redirect_uri=http://localhost/callback";

  int httpResponseCode = http.POST(body);

  // Check the response
  if (httpResponseCode == 200) {
    String payload = http.getString();
    //Serial.println("Response: " + payload);

    // Parse the JSON response
    DynamicJsonDocument doc(2048);
    DeserializationError error = deserializeJson(doc, payload);

    if (error) {
      Serial.println("JSON Parsing Error");
      http.end();
      return false;
    }

    // Extract tokens
    accessToken = doc["access_token"].as<String>();
    refreshToken = doc["refresh_token"].as<String>();

    Serial.println("Access Token: " + accessToken);
    Serial.println("Refresh Token: " + refreshToken);
    StoreString(refreshToken);

    http.end();
    return true;
  } else {
    Serial.println("HTTP POST failed with code: " + String(httpResponseCode));
    http.end();
    return false;
  }

The authorization token received in the first step is transferred to the board in the final program via the serial monitor.First, an HTTP header and a body with the information are created according to the specifications in the documentation. These are then transmitted to the Spotify server with POST; if the response code 200 is received, the request was successful, the transmitted data can be temporarily stored and the required information can be extracted.Information about the process can be found on the following documentation page: Codeflow.

4 Updating the access token

As the access token is only valid for a limited period of one hour, it must be updated again once it has expired. The basic program remains unchanged, as with the first request for the request token, only now the request token from the first step is used instead of the authorization code.

5 Requesting the data

Now that it has been ensured that a current access token is always available, you can switch to querying the relevant information. On the documentation page on the right-hand side is the response from the server with the current data for your account. This data can be retrieved from the ESP32 using the following program:

HTTPClient http;
  
  // Configure HTTP GET request
  http.begin(endpoint);
  http.addHeader("Authorization", "Bearer " + accessToken);

  int httpResponseCode = http.GET();
  if (httpResponseCode == 200) {
    String payload = http.getString();
    //Serial.println("Response: " + payload);

    // Parse JSON response
    DynamicJsonDocument doc(4096);
    DeserializationError error = deserializeJson(doc, payload);
    if (error) {
      Serial.println("Failed to parse JSON");
      return;
    }

    // Extract track data
    const char* trackName = doc["item"]["name"];
    const char* artistName = doc["item"]["artists"][0]["name"];
    const char* albumName = doc["item"]["album"]["name"];
    int durationS = doc["item"]["duration_ms"];
    int progressS = doc["progress_ms"];
    durationS = durationS / 1000;
    progressS = progressS / 1000;

    // Display the data
    Serial.println("Now Playing:");
    Serial.println("Track: " + String(trackName));
    Serial.println("Artist: " + String(artistName));
    Serial.println("Album: " + String(albumName));
    //Serial.println("Album Image URL: " + String(albumImage));
    Serial.println("Duration (s): " + String(durationS));
    Serial.println("Progress (s): " + String(progressS));
    float perc = ((float)progressS/(float)durationS) * 100;
    Serial.printf("Progress     : %.2f \n", perc);

  } else if (httpResponseCode == 204) {
    Serial.println("No track is currently playing");
  } else if (httpResponseCode == 401) {
    Serial.println("expired Token");
    refreshAccessToken();
  }
  
  else {
    Serial.println("HTTP GET failed with code: " + String(httpResponseCode));
  }

  http.end();

First, the HTTP header is generated and then sent to the server with the POST command. The response code 401 means that the access token is no longer valid and must be renewed. With code 200, the received data is extracted from the JSON format and temporarily stored in the corresponding variables. For better readability, the times are converted into seconds and then all information (title, artist, album, duration, elapsed time and progress) is displayed on the serial monitor.

6 Final program

Load the final program onto the board and enter the authorization token via the monitor. The serial monitor should display the data of the song currently being played.

If there are any problems, compare the HTTP response code with the various codes from the documentation.

You can download the complete program here as a file.

Explanation of the program:The saved token is retrieved in setup(). If no token is available, it must be entered in the serial monitor. The program therefore waits until an entry has been made and this code is then saved in the SPIFFS. If a request token already exists, this is used to request an access token. The information is retrieved in the loop() using the access token generated above. The data received is then output in the serial monitor.If the HTTP request returns the code 401, this means that the access token has expired and must be renewed; this is done automatically.

The program also contains three auxiliary methods.The method base64Encode() method changes the access data to the base64 format required By the API interface.The last two functions are store and read tokens which are used to store the refresh token in the flash. The stored token is retained even after a new flashing of the program, so authorization only needs to be carried out the first time the program is started.

After this part has covered the basic communication with the API interface, you will learn about other useful functions of the Spotify API endpoints in the next part. Furthermore, the information that has now been determined will be used to present it on a user-friendly display.

Have fun rebuilding :)

Spotify and Spotify Premium are registered trademarks of Spotify AB. This blog is not affiliated with Spotify AB and is neither sponsored nor endorsed By Spotify AB. All brand names, logos and trademarks used in this post belong to their respective owners and are used for descriptive or identification purposes only.