Project – Audio Player

We have learned a lot so far. We began the journey with the very basics of IoT development on the ESP32 platform, discussed how to connect an ESP32 to the external world by employing its peripherals, and then talked about some popular third-party IoT libraries to speed up software production. Let’s cement them by developing a fully-fledged project where we can practice our new skills.

In this chapter, we will design and develop an audio player with visual controls as we cover the following topics:

• The feature list of the audio player
• Solution architecture
• Developing the project
• Testing the project
• New features
• Troubleshooting

Technical requirements

We will use Visual Studio Code and the ESP-IDF command-line tools to create, develop, flash, and monitor the application in this chapter.

As hardware, only ESP32-S3-Box Lite will be employed.

You can find the project files here in the repository: https://github.com/PacktPublishing/Developing-IoT-Projects-with-ESP32-2nd-edition/tree/main/ch5/audio_player.

The feature list of the audio player

A basic audio player usually has a playlist control and a volume control. Users can switch between the different recordings and control the volume. Let’s itemize those features for our project:

• Play/pause a recording by pressing a button.
• Navigate to the next recording.
• Navigate to the previous recording.
• Each recording has an associated image. While the user navigates over the playlist, the image is updated on the screen automatically.
• Mute/unmute the volume.
• Increase/decrease the volume.
• All the functions have visual feedback on the LCD display.

The requirements are clear enough to begin with, but let’s look at the following simple UI design prepared by SquareLine Studio to get a better grasp of what we will do in this project:

Figure 5.1: GUI of the application

Since the devkit has no touchscreen, we will use the physical buttons on it to provide the required...

Solution architecture

For this list of features, we can have the following classes and relations between them to implement the requirements:

• AppAudio: Provides a simple interface for the audio functionality, consisting of the mute/unmute, Play/Pause, and volume up/down buttons. It initializes the audio sub-system and delivers audio events to its clients.
• AppButton: Handles user press events on the devkit buttons and notifies any client code via an event queue.
• AppNav: Keeps track of the animal list. It is the information source for the other components of the application, and it updates the current animal metadata when a user navigates by using the devkit buttons.
• AppUi: Encapsulates the generated UI files and manages the application flow for user interactions, by communicating with the other classes mentioned above.

The following class diagram roughly depicts how classes relate to each other:

Figure 5.4: Class diagram

The implementation...

Developing the project

There are two different aspects that we need to consider: the GUI design and application development. The application will have a Graphical User Interface (GUI) to engage users with visual indicators. We are going to use Light and Versatile Embedded Graphics Library (LVGL) for this purpose, as we already learned how to use it in the previous chapter. After having the GUI, we can integrate it into the application and move on from there, with the implementation of the actual application to react to user input.

Let’s start with the GUI design.

Designing the GUI

Although you can just copy the generated UI files from the project repository, you can also try to design the GUI yourself by using SquareLine Studio. It is impossible to describe every detail here; nonetheless, I will list the fundamental steps below:

1. Start SquareLine Studio, and create a new project for Espressif / ESP-BOX.

   

   Figure 5.5: Create a new SquareLine project...

Testing the Project

Let’s begin the fun part. We will flash the application, as follows:

$ idf.py erase-flash clean flash monitor
Executing action: erase-flash
Serial port /dev/ttyACM0
Connecting....
Detecting chip type... ESP32-S3
<more logs>
I (1026) lv_port: Try allocate two 320 * 20 display buffer, size:25600 Byte
I (1028) lv_port: Add KEYPAD input device to LVGL

After a successful flash, you should be able to see the GUI on the LCD display:

Figure 5.17: Application GUI

Here are some test cases:

• Press the middle button to play the dog sound. See it pause when you press it once more while it is playing.
• See the button name change to Play automatically when the audio finishes.
• Press the left and right buttons to navigate over the animal list. See the GUI update accordingly.
• Double-click on the middle button to change the focus to the volume control. See the color of the volume bar change to red.
• Increase and decrease...

New features

You make the project more interesting by adding the following features:

• The application employs SPIFFS as the filesystem. Replace it with LittleFS.
• The images load rather slowly with a visible effect on the GUI while rendering. One way to make it faster is to load all of the images to Pseudo-RAM (PSRAM) when the application starts. Instead of reading from the flash, you can make LVGL use them from the PSRAM.
• Create a new LVGL theme for a different level of ambient light. Use LDR to measure the light level, and change the theme automatically according to the light level (https://docs.lvgl.io/latest/en/html/overview/style.html#themes).
• Save/restore the latest status of the player on the nvs partition (the latest volume level and the index of the last played item).
• Add two touch sensors to navigate the playlist, with the same functionality as the left and right buttons when the playlist is active.
• Add a beep sound when a user changes...

Troubleshooting

The project has several distinct stages (GUI design, project configuration, and coding) with relatively long source code; thus, it is easy to make mistakes during development. The following list may help if you encounter issues while working on it:

• First of all, make sure the project compiles successfully on your development machine and runs on the devkit, as cloned from the book repository.
• If you choose to develop the project from the ground up yourself, follow the configuration steps exactly as given in the Creating the IDF project topic.
• The project uses some IDF components from the book repository; therefore, the root CMakeLists.txt file should set the directory that contains those components as EXTRA_COMPONENT_DIRS.
• The project has a custom partitions file, partitions.csv. Make sure it is included in the project.
• The sdkconfig file that comes with the project clone contains the right configuration for the project (flash size...

Summary

Learning is enhanced with practice on practice, and this project was a good opportunity for this. We developed a project from the ground up, starting from the feature list of the audio player, then discussing the solution architecture, and finally, development and testing. The development stage also has different internal stages. UI/UX design is an important step for a successful product. With a given list of features, a talented UI/UX designer can optimize a GUI and emphasize the unique selling points much better. As developers, we put our efforts into implementing solution architecture by applying our knowledge and skills. Each project moves us forward to become better developers.

This project marks the end of the first part of the book. In the upcoming chapters, we will learn how to develop connected ESP32 products on cloud systems.

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author...