Music & Internet Radio Player On WaveShare ESP32-S3

When I got the WaveShare 1.85" LCD display with speaker box, the first idea that came to mind was an internet radio player with a nice UI. Then I added an MP3 player function to play.mp3 files stored on the SD card.

Step 1: Planning the UI/UX in Figma

I used Figma to plan and design the UI elements. I downloaded some icons from SVG Repo. Once everything looked good, I exported the needed elements in .png format.

Step 2: Designing the UI in SquareLine Studio

I created a new project in SquareLine Studio and imported the elements designed in Figma. A project can be created in two ways: either by selecting Arduino and starting a new project, or by downloading and installing the OBP I created for the specific board, which includes all the necessary libraries.

I used the Roller widget to list the MP3 files and styled the selected and main parts in the Style settings.

I placed the music control icons inside a panel and set the flex layout. I also adjusted the padding in the Style settings.

I used the Button widget for mode switching and set the flag to checkable. This allows the button to change modes and update its state when pressed. I did the same for the play/pause button. The next and previous buttons are simple buttons. Then I styled them using the UI elements created.

I used the Arc widget for brightness control and the Bar widget for music playback progress. There are many settings to fine-tune for a polished UI

Once everything looked good, Go to the Export menu and created a template project.

Step 3: Code Setup and Upload Using PlatformIO

After creating the template project, make a copy of the folder and rename it as shown below. Then open it in VS Code, PlatformIO will initialize automatically.

├── Template                              ├── Template
│   └── SLS-OBP-Your-Project              |   └── SLS-OBP-Your-Project
│       ├── libraries                 ➔  │       ├── lib
│       │   └──                           │       │   └──
│       ├── platformio.ini                │       ├── platformio.ini
│       └── ui                        ➔  │       └── src
│           └── ui.ino                ➔  │           └── main.cpp

PlatformIO makes things easy by handling libraries and board setup for you. Just check out this project. You can build flash it and get started without any hassle.

Step 4: Make It Work

To set up Wi-Fi credentials, go to WiFiManager.h and update:

#define WIFI_SSID "SSID"
#define WIFI_PASSWORD "PASSWORD"

For radio stations, update your preferred stations in RadioStations.h

{"Smooth Jazz", "http://ice1.somafm.com/smoothjazz-128-mp3"},