“HiFi” Online Radio: Internet Streaming With ESP32 and VS1053

Here I’ll explain some parts of the code that were my special requirements. I won’t get into details of everything (since most of it is basic coding or is commented in the file), but I’ll focus on the things that I wanted to add and didn’t found in other projects of this type (or at least not in the way I wanted).

SETUP:

In the setup(), this code besides the usual initialization of pins and utilities:

– Enables the “ON” button, which in reality is using a button as a ‘Wake Up’ caller from the deep sleep mode (in this case, pin 26, my ‘forward’ button). You can set anything you want here. I first tried to use a remote control (using the pin for the IR receptor), but the problem was that this streamer waked up with ANY IR input, even from remote controls that weren’t used in this. So if I changed the channel of my TV, the streamer turned on. I had to compromise and let a “manual” button to turn this on.

Also, I prevent a black screen when coming back from deep sleep, maintaining the previous state of the LED backlight (pin 17). Without this, even setting the pin to HIGH, the screen stayed OFF everytime I woke up the streamer.

esp_sleep_enable_ext0_wakeup(GPIO_NUM_26,0);
gpio_hold_dis(GPIO_NUM_17);

– Uses the Preferences library and start the “storage space” for saving data to the EEPROM. The “false” argument serves to indicate that we will use this for read and write.

preferences.begin("Save/Load", false);

– Calls the function setScreen() which “draws” everything that will be fixed all the time to the screen. If you check the code, you’ll see that it sets the orientation of the screen, fills the background color, sets some texts, etc.

Also, I wanted to use a “sober” font since this streamer would be used around my HiFi system. The TFT library allows the use of custom fonts, so I included mine but you certainly can change it to the one you want. Doing so, you’ll have to change some parameters here in the code (such as heights, positions, etc. for the texts) and in the library (point to the created font).

Finally, in this function I initialize the two sprites used for the scrolling texts. Here’s an example for the text that will show the tuned station:

    scrolltxt_station.setFreeFont(OWNFONT1);
    scrolltxt_station.setColorDepth(8);
    scrolltxt_station.createSprite(750, 11);
    scrolltxt_station.fillSprite(TFT_BLACK);
    scrolltxt_station.setTextColor(tft.color565(0,255,0),TFT_BLACK);

– Calls the function connectToWiFinStreamer() which first connects to a WiFi. Here I added some extra functions to the standard initialization of WiFi which are very useful when needed.

The first one allows to connect to different WiFi networks already preset in an array at the beginning of the code. So, if the streamer cannot connect to one, it will try with the next one.

while (WiFi.status() != WL_CONNECTED)
    {
        Serial.print(".");
        delay(500);
        currentMillisWiFi2 = millis();
        if (currentMillisWiFi2 - previousMillisWiFi2 >= 5000)  // If 5 secconds pass, connect to next network
        {
            previousMillisWiFi2 = currentMillisWiFi2;
            wifi_index += 1;
            if (wifi_index >= key_qty)
            {
                wifi_index = 0;
                break;
            }
            WiFi.begin(ssid[wifi_index], password[wifi_index]);
            Serial.println();
            Serial.print("Connecting to new network: ");
            Serial.println(ssid[wifi_index]);
        }
    }

If it can’t connect to ANY of the preset SSIDs, it’ll show a little icon made by me on screen and will stay as “Not connected”, then the loop() will take charge (details on this later).

If it can’t connect after 4 attempts, the Streamer will shut down.

If it can connect, it draws another icon on screen to show the connected status, and starts the Radio. Also, it sets the wifi_index to the previous position. This will be useful if internet goes down and it tries to reconnect. This way, it’ll connect to the same working SSID.

But, why I don’t leave the same index? For some reason I still don’t know, whenever I connect to a SSID from the array, the first one is discarded, always. That’s why I leave the first SSID and Password empty on the arrays.

The Radio starts by calling another function: connectiontoRadio() which contains the standard calling from the Radio library.

With all these explained, let’s move to the next part of the code:

LOOP

– The first thing the loop does is play constantly through the Radio player.

player.loop();

– Although they are outside of the loop per se, I use the functions of the MP3 decoder library I wanted for my streamer (it has more than this) which names are very self explainatory: SHOWSTATION, SHOWSTREAMTITLE and BITRATE. They are constantly updating their status as soon as they change.

Here is where I wasted a lot of time: the worst case scenario were long strings of texts, where I had many troubles that have been worked around: text scrolling on top of the older text making everything unreadable, text that didn’t reset when the string changed, etc. So I had to put some code inside the functions of the Radio library, and others inside the loop. The final result is a clean scrolling, that changes when it has to change and stay fixed when it has to.

So, inside the functions from the Radio library, I added some code to:

• Get the size of the info to show
• Prepare the “Scrolling spaces” with the required info
• If no data from the stream, show a message and don’t scroll
• If data is short (considering the size of the screen and the size of the font) show the text and don’t scroll

Here’s an example inside the Radio functions for the text that shows the songs playing on the station:

stream_text = String(info);
    length_stream = stream_text.length();
    scrolltxt_stream.fillSprite(TFT_BLACK);
    tft.fillRect(0,100,160,11, TFT_BLACK);
    tft.setCursor(10,108);
    tcount2=0;
    if        (length_stream < 2)                            {tft.print("No data");}    // If no text, show "No data"
    else if    (length_stream >=2 && length_stream <= 23)    {tft.print(stream_text);}    // If there's text and is short, don't scroll

In the loop is where the scrolling happens if data from the stream is longer than a preset length. Here, to avoid differences in speed (since the loop “speed” is not always constant), I set the scrolling time to 30ms. Then, it puts the text in the “Sprite space” and each time a 30ms passes, it changes the position of the characters. Here’s an example for the same text but now inside the loop:

if(length_stream > 23)
   {
      currentMillis2 = millis();
      if (currentMillis2 - previousMillis2 >= 30)
      {
         previousMillis2 = currentMillis2;
         scrolltxt_stream.pushSprite(10,100); // Sets Sprite on screen (x,y)
         scrolltxt_stream.scroll(-1); // Scroll direction
         tcount2--;
         if (tcount2 <= 0)
         {
            tcount2 = length_stream*7.5; // 7.5 factor was the best for this size of screen in terms of spacing between sprites
            scrolltxt_stream.drawString(stream_text, 160, 0); // Draws word in position (x,y)
         }
      }
   }

Regarding the 7.5 factor, this is the number that allows spacing between the end of the stream text and the start of the same (or a new) text again. I tried with short texts and very very long text and for this screen and font, is was the sweet spot to not overlap texts, or have too much spacing between them. If you have problems of this sort, change this number.

– Then, the loop manages the buttons (for my project I used 6 in total: 1 as “backward”, 1 as “forward”, and 4 for radio presets).

The first thing that the loop does on each iteration is read the current status of a button, then calls a function that checks “what to do” with that status:

checkXXButton(current status, previous status)

comparing the status of the current loop vs the previous loop. After that saves the current status of that button as the last status for the next iteration of the loop.

For this project I’m using 3 types of buttons:

Backward

• Short press (less than 0.5s): Goes back 1 radio station
• Semilong press (between 0.5s and 2s): Goes back 5 radio stations
• Long press (more than 2s): Calls Off Routine to turn off the Streamer

Forward

• Short press (less than 0.5s): Goes forward 1 radio station
• Long press (more than 0.5s): Goes forward 5 radio stations
• If the streamer is turned off, one short press of this button turns it on

Preset n° X

• Short press (less than 0.5s): Goes to saved radio on preset X
• Long press (more than 0.5s): Saves current radio to preset X

– Then the loop checks for IR inputs. This is pretty straightforward. Using the IR example library, I was able to check the HEX codes of each one of my remote control buttons (I wanted to use the remote control from my amplifier). With that data, I use my remote to “push” the buttons ‘backward’, ‘forward’; and if I change the “source” on it, to turn off the Streamer. Any other button that I press and didn’t include it here, does nothing.

– After the IR, the loop checks for Serial inputs. Besides using the Serial Monitor for debugging, I added some extra options:

• I can put a direct link of a radio and will play it
• I can put a radio number and it will go right to it

– Finally, the loop checks for the status of WiFi every 1 minute. Here calls a function checkWiFi() that in case WiFi is disconnected, calls again the function that connects to WiFi (the same used in setup).