ESP32 Audio Project - Part III: Create Song List using IFTTT

Credits

The title image and some of the images in this project description contain screenshots taken from the following apps:

• IFTTT - automation & workflow (v4.36.1) by IFTTT Inc.
• Reminders by Apple Inc.

Overview

In this part of the ESP32 audio project, the internet radio from the previous parts (Part I, Part II) is enabled to add songs to a list of favourite songs on button press. To accomplish this, the M5StickC device sends the song information to the IFTTT (IFThis THEN That) Webhook Service by means of an HTTP request. The request triggers an action that adds the song, for example, to a list in the iOS Reminders app. Alternatively, you may set various other IFTTT actions such as adding the song to a Spotify playlist.

In addition to the hardware from the first part (an M5StickC plus with an I²S DAC) a button module is used that is connected to the M5StickC using a Grove cable.

The following two basic steps are accomplished in this project:

• Creation of an IFTTT workflow (free IFTTT account required)
• Sending the trigger event from the M5StickC to the IFTTT Webhook Service

For being able to add songs to an iOS Reminders list, the IFTTT - automation & workflow app needs to be installed on your iOS device.

Development Environment, Framework, and Libraries

I used Visual Studio Code with the PlatformIO IDE for this project. The internet radio application is based on the Arduino framework of the Espressif 32 platform. Furthermore, it uses the M5StickCPlus and the ESP32-audioI2S libraries. Moreover, in the previous part, the ESP32-A2DP library has been used for bluetooth audio.

The platformio.ini file for this part of the project is the same as for the previous part and is hence not repeated here.

Source Code

The commented source code is available in the GitHub repository of this project. Please note that a WifiCredentials.cpp file needs to be created in the src folder (see Part I of this project).

Additionally, in this part, the file IftttHook.cpp needs to be created with the following content:

#include "IftttHook.h"
const char *IftttHook::IFTTT_ADD_SONG = "http://maker.ifttt.com/trigger/<Your Event Name>/with/key/<Your Webhook Key>";

• <Your Event Name> : This is the name you assign in the trigger part of your IFTTT applet (see Section "IFTTT Workflow").
• <Your Webhook Key> : This is the key that is assigned to you by the IFTTT Webhook service (see below).

Setting up the IFTTT Workflow

The IFTTT platform allows you to define web-based automation workflows, so-called applets, using various services provided by the plattform. Each applet consists of a trigger part (If) and an action part (Then). My applet for this project consists of the following elements:

• If : The applet is triggered by the Webhook service, specifically by a Receive a web request trigger. Such a trigger needs an event name (I use the name add_song). This event name needs to be included in the URL of the HTTP request sent by the M5StickC. Along with the named event trigger some extra data can be passed on with the HTTP request. We send the song information using the value1 parameter in a JSON request body.
• Then : The applet uses the "Add reminder to list" action of the iOS reminders IFTTT service. The text that is shown as reminder in the Reminders app consists of the value1 parameter and the occuredAt parameter of the trigger event. The action defintion also comprises the name of the list to which the reminders are added.

Sending the IFTTT Trigger Event

After the IFTTT applet has been created, the webhook service can be triggered through HTTP requests.

The URL for such an HTTP request has the following format where <your event name> must be replaced by the event name assigned in the trigger part of the IFTTT applet ("add_song"):

http://maker.ifttt.com/trigger/<your event name>/with/key/<your webhook key>

In addition, each IFTTT user is assigned a webhook key that can be retrieved either from the IFTTT website as described in the Webhooks FAQ under "Where do I find my Webhooks key?" or from the Webhooks Settings page. You need to be logged in to retrieve the key. The <your webhook key> part of the webhook URL is replaced with that key.

The following code triggers the IFTTT applet and passes the song information by sending a JSON request body to the specified webhook URL:

HTTPClient http;
http.begin(IftttHook::IFTTT_ADD_SONG);
http.addHeader("Content-Type", "application/json");
String requestBody = "{ \"value1\" : \"" + infoIfttt + "\" }";
int httpResponseCode = http.POST(requestBody);

The JSON request body can be, for example, as follows:

{ "value1" : "Green Day - 21 Guns" }

If the request is successful, the host ifttt.maker.com sends a HTTP response code 200 ("OK") with the following response:

Congratulations! You've fired the add_song event

When the trigger event is fired, the iOS reminders IFTTT service and the IFTTT automation & workflow app take care of adding the song to the "Songs" list in the iOS Reminders app.

Summary of Realised Features

• ESP32-based device with integrated display and buttons: M5StickC plus
• Audio playback via I²S and an external digital-to-analog converter (DAC) board
• Device and network information shown on TFT display during startup
• Switch between bluetooth receiver mode and internet radio mode (button B)

Internet radio

• Listen to internet radio stations
• Pause (power switch) and resume (button A) playing
• Switch through radio stations (button A)
• Mute and soft unmute during station change
• Station and song information shown on TFT display
• Send song information to IFTTT webhook (external button)

Bluetooth receiver

• Bluteooth audio streaming e.g. from Android or iOS devices
• Artist and song title shown on display