Ride Audio Add-on

Music on your handlebar unit, in two ways. The touchscreen can act as a remote for Spotify playing on your phone. Or the ESP32-S3 can play music itself through its own speaker: Spotify Connect, internet radio, and MP3 files from a microSD card.

Screen designs for a 320 × 240 touchscreen, with sample values and made-up track names.

01What's possible

02Option 1: touchscreen as a Spotify remote

1A · Bluetooth LE media remote (no internet)

Start from ESP-IDF's esp_hid_device example in BLE mode, which already includes a consumer-control report. This is the report and how to "press" a key:

Copy// HID report map: Consumer Control, one 16-bit usage, report ID 3
static const uint8_t media_report_map[] = {
    0x05, 0x0C,        // Usage Page (Consumer)
    0x09, 0x01,        // Usage (Consumer Control)
    0xA1, 0x01,        // Collection (Application)
    0x85, 0x03,        //   Report ID (3)
    0x15, 0x00,        //   Logical Minimum (0)
    0x26, 0xFF, 0x03,  //   Logical Maximum (1023)
    0x19, 0x00,        //   Usage Minimum (0)
    0x2A, 0xFF, 0x03,  //   Usage Maximum (1023)
    0x75, 0x10,        //   Report Size (16)
    0x95, 0x01,        //   Report Count (1)
    0x81, 0x00,        //   Input (Data, Array)
    0xC0               // End Collection
};

#define MEDIA_PLAY_PAUSE  0x00CD
#define MEDIA_NEXT        0x00B5
#define MEDIA_PREV        0x00B6
#define MEDIA_VOL_UP      0x00E9
#define MEDIA_VOL_DOWN    0x00EA

// Press and release one media key (hid_dev comes from esp_hidd_dev_init)
static void media_key(esp_hidd_dev_t *hid_dev, uint16_t usage)
{
    uint8_t down[2] = { usage & 0xFF, usage >> 8 };
    uint8_t up[2] = { 0, 0 };
    esp_hidd_dev_input_set(hid_dev, 0, 3, down, sizeof(down));
    vTaskDelay(pdMS_TO_TICKS(30));
    esp_hidd_dev_input_set(hid_dev, 0, 3, up, sizeof(up));
}

1B · Spotify Web API over Wi-Fi (any phone)

1. Create an app at developer.spotify.com (free) and note its client ID.
2. On your laptop, sign in once with the scopes user-read-playback-state, user-read-currently-playing and user-modify-playback-state to get a refresh token.
3. Store the refresh token in the S3's flash memory (NVS). The S3 swaps it for short-lived access tokens at https://accounts.spotify.com/api/token.
4. While the music screen is showing, poll what's playing every 3 seconds. Stop polling when the screen is off, to save data and battery.

Copy// Skip to the next track through the Spotify Web API (ESP-IDF)
#include "esp_http_client.h"
#include "esp_crt_bundle.h"

static esp_err_t spotify_next(const char *access_token)
{
    char auth[512];
    snprintf(auth, sizeof(auth), "Bearer %s", access_token);
    esp_http_client_config_t cfg = {
        .url = "https://api.spotify.com/v1/me/player/next",
        .method = HTTP_METHOD_POST,
        .crt_bundle_attach = esp_crt_bundle_attach,   // trusted root certificates
    };
    esp_http_client_handle_t c = esp_http_client_init(&cfg);
    esp_http_client_set_header(c, "Authorization", auth);
    esp_http_client_set_post_field(c, "", 0);         // empty body, Content-Length: 0
    esp_err_t err = esp_http_client_perform(c);
    int status = esp_http_client_get_status_code(c);  // 204 = done, 401 = refresh the token
    esp_http_client_cleanup(c);
    return (err == ESP_OK && status == 204) ? ESP_OK : ESP_FAIL;
}

03Option 2: the S3 plays music itself

Three sources, one pipeline

Internet radio and MP3

Copy// Internet radio: HTTP stream -> MP3 decoder -> I2S (ESP-ADF)
audio_pipeline_cfg_t pipe_cfg = DEFAULT_AUDIO_PIPELINE_CONFIG();
audio_pipeline_handle_t pipeline = audio_pipeline_init(&pipe_cfg);

http_stream_cfg_t http_cfg = HTTP_STREAM_CFG_DEFAULT();
audio_element_handle_t http_reader = http_stream_init(&http_cfg);

mp3_decoder_cfg_t mp3_cfg = DEFAULT_MP3_DECODER_CONFIG();
audio_element_handle_t mp3 = mp3_decoder_init(&mp3_cfg);

i2s_stream_cfg_t i2s_cfg = I2S_STREAM_CFG_DEFAULT();   // set BCLK=5, WS=6, DOUT=7 in your board config
i2s_cfg.type = AUDIO_STREAM_WRITER;
audio_element_handle_t i2s_writer = i2s_stream_init(&i2s_cfg);

audio_pipeline_register(pipeline, http_reader, "http");
audio_pipeline_register(pipeline, mp3, "mp3");
audio_pipeline_register(pipeline, i2s_writer, "i2s");
const char *order[] = { "http", "mp3", "i2s" };
audio_pipeline_link(pipeline, order, 3);

audio_element_set_uri(http_reader, station_url);   // from your saved station list
gpio_set_level(GPIO_NUM_15, 1);                    // amp on
audio_pipeline_run(pipeline);

// MP3 from microSD: register fatfs_stream (reader) instead of http_stream and set
// the URI to a file such as "/sdcard/music/track01.mp3".

Spotify on the S3 (cspot)

Power and the case

For the case, the head unit needs about 10 mm more depth, a 40 mm speaker opening with waterproof acoustic mesh, a microSD slot with a rubber cover, and room for the battery. These can become parameters in hardware/case/etube_case.scad.

04Parts (AUD)

Core Electronics, Jaycar and Altronics stock all of these. Spotify Premium is needed for 1B control and for cspot.

05Build order

1. Media keys first (1A). Flash the esp_hid_device example in BLE mode with the consumer report, pair your phone, and check that play/pause and skip control Spotify. No new hardware needed.
2. Now playing. iPhone: add the AMS client and show the title and artist. Any phone: set up the Spotify app and refresh token for 1B.
3. Screens. Build the four LVGL screens from the designs above. A swipe switches between Ride, Now playing, Radio and MP3, and the mini player stays on the Ride screen.
4. Audio hardware on the bench. Wire the MAX98357A and speaker to the DevKitC, powered from USB, and play a test tone over I2S.
5. MP3 from microSD. Add the card and play a file. This proves the decoder and amp with no network involved.
6. Internet radio. Join your phone hotspot, load stations.json, and play a stream. Watch the buffer bar on a weak signal.
7. Spotify Connect (optional). Add cspot and check that the unit shows up in Spotify's device list.
8. Battery and case. Move to the Li-ion pack, measure the real draw and battery life, then update the case for the speaker and battery.

06References

1. Apple Media Service (AMS) specification, Apple Developer documentation.
2. USB HID Usage Tables, Consumer page (0x0C): usages 0xCD, 0xB5, 0xB6, 0xE9, 0xEA.
3. Spotify Web API reference, Player endpoints: developer.spotify.com/documentation/web-api.
4. ESP-IDF esp_hid_device example (BLE HID device) and the esp_http_client documentation.
5. ESP-ADF pipeline_http_mp3 example: github.com/espressif/esp-adf.
6. cspot, Spotify Connect for ESP32: github.com/feelfreelinux/cspot.
7. radio-browser.info, a free community internet radio directory.