Internet Radio Using an ESP32

22,311

222

39

About: I am Nick Koumaris from Sparta, Greece. I'm extremely passionate about electronics, making things and design. I love teaching what I know and sharing my experiences with you. I put out new YouTube videos eve...

Dear friends welcome to another Instructable! Today we are going to build an Internet Radio device with a big 3.5” display using an inexpensive ESP32 board. Believe it or not, we can now build an Internet Radio in less than 10 minutes and with less than 30$. There is a lot to cover so, let’s get started!

A few months ago, I completed an Arduino FM Radio project which works great and looks even better in my opinion. If you want to see how I built this project you can read the Instructable here. The problem is that, although this radio looks cool it is not practical because I live in a small town in southern Greece and the big Greek radio stations I prefer to listen to, do not have transmitters around here. So, I listen to my favorite radios online on my laptop or tablet pc which is also not so practical. So, today I am going to build an Internet radio device in order to be able to listen to my favorite radio stations from all over the world!

As you can see, a first version of the project is ready on a breadboard. Let’s power it up. As you can see the project connects to the Internet and then streams music from predefined Radio Stations.

I have tuned in to the Real FM radio station from Athens and by using these buttons we can change the Radio Station we are listening to. I have saved my favorite radio stations to the memory of the ESP32 so I can access them easily. With this potentiometer, I can change the volume of the speaker. I display the Name of the Radio Station we are listening to on a big 3.5” display with a retro User Interface. The project works fine and it is very easy to build.

You can build the same project in less than 10 minutes but you need to have some experience. If this is your first project, consider building a simpler one first, to gain some experience. Check my Instructables for simple project ideas and when you are more comfortable with the Arduino the electronics come back to build this cool project. Let’s now start building our own Internet Radio.

Step 1: Get All the Parts

We are going to need the following parts:

The total cost of the project is around 40$ but if you don’t use a display the cost of the project is around 20$. Amazing stuff. We can build our own Internet radio with just 20$!

Step 2: ESP32 Board

The heart of the project is, of course, the powerful ESP32 board. If you are not familiar with it, the ESP32 chip is the successor of the popular ESP8266 chip we have used many times in the past. The ESP32 is a beast! It offers two 32 bit processing cores which operate at 160MHz, a massive amount of memory, WiFi, Bluetooth and many other features with a cost of around 7$! Amazing stuff!

Please watch the detailed review I have prepared for this board. I have attached the video on this Instructable. It will help understand why this chip will change the way we make things forever! One of the most exciting things about the ESP32 is that even though it is so powerful, it offers a deep-sleep mode which requires only 10μΑs of current. This makes the ESP32 the ideal chip for low power applications.

In this project, the ESP32 board connects to the Internet and then it receives MP3 data from the radio station we are listening to, and it sends some commands to the display.

Step 3: MP3 Decoder

The MP3 data is then sent to the MP3 decoder module using the SPI interface. This module uses the VS1053 IC. This IC is a dedicated hardware MP3 decoder. It gets the MP3 data from the ESP32 and converts it really fast into an audio signal. The audio signal that it outputs at this audio jack is weak, so we need to amplify it. That’s why I am using a PAM8403 audio amplifier to amplify the audio signal and then send it to a speaker. I have also connected two buttons to the ESP32 just to change the MP3 Stream we are getting data from and a Nextion display to display the Radio station we are listening to.

Step 4: Nextion Display

I chose to use a Nextion display for this project since it is very easy to use. We only need to connect one wire to control it.

The Nextion displays are new kind of displays. They have their own ARM processor at the back which is responsible for driving the display and creating the graphical user interface. So, we can use them with any microcontroller and achieve spectacular results. I have prepared a detailed review of this Nextion display which explains in depth how they work, how to use them and their drawbacks. You can read it here , or watch the attached video.

Step 5: Connecting All the Parts

All we have to do now is to connect all the parts together according to this schematic diagram. You can find the schematic diagram attached here. The connection is straightforward.

There is one thing to note though. The MP3 decoder module outputs a Stereo Signal but I am using only one audio channel in this project. In order to get the audio signal, I connected an audio cable to the audio jack of the module, and cut it to reveal four wires inside. I connected two of the wires. One of them is the GND and the other one is the audio signal of one of the two audio channels. If you wish you can connect both channels to the amplifier module and drive two speakers.

To send data to the display, we only need to connect one wire to the TX0 pin of the ESP32. After connecting the parts, we have to load the code to the ESP32, and we have to load the GUI to the Nextion display.

To load the GUI to the Nextion display, copy the InternetRadio.tft file I am going to share with you to an empty SD card. Put the SD card into the SD card slot at the back of the display. Then power up the display, and the GUI will be loaded. Then remove the SD card and connect the power again.

After successfully loading the code, let’s power up the project. It displays the text “Connecting…” for a few seconds on the display. After connecting to the internet the project connects to a predefined radio station. The hardware is working as expected but now let’s see the software side of the project.

Step 6: The Code of the Project

First of all, let me show you something. The code of the project is less than 140 lines of code. Think about it, we can build an Internet Radio with a 3.5” Display with 140 lines of code, this is amazing. We can achieve all this using various libraries of course which contain thousands of lines of code. This is the power of Arduino and the Open source community. It makes things easy for makers.

In this project, I am using the VS1053 library for the ESP32 board.

At first, we have to define the SSID and the Password of the Wi-Fi network. Next, we have to save some Radio Stations here. We need the host URL, the path where the stream is located and the port we need to use. We save all this info into these variables.

char ssid[] = "yourSSID"; // your network SSID (name)
char pass[] = "yourWifiPassword"; // your network password

// Few Radio Stations char *host[4] = {"149.255.59.162","radiostreaming.ert.gr","realfm.live24.gr", "secure1.live24.gr"}; char *path[4] = {"/1","/ert-kosmos","/realfm","/skai1003"}; int port[4] = {8062,80,80,80};

I have included 4 radio stations in this example.

In the setup function we attach interrupts to the buttons, we initialize the MP3 decoder module and we connect to the Wi-Fi.

void setup () {

Serial.begin(9600); delay(500); SPI.begin();

pinMode(previousButton, INPUT_PULLUP); pinMode(nextButton, INPUT_PULLUP);

attachInterrupt(digitalPinToInterrupt(previousButton), previousButtonInterrupt, FALLING); attachInterrupt(digitalPinToInterrupt(nextButton), nextButtonInterrupt, FALLING);

initMP3Decoder();

connectToWIFI();

}

In the loop function, first of all, we check if the user has selected a different radio station than the one we are getting data from. If so, we connect to the new radio station else we get data from the stream and send them to the MP3 Decoder module.

void loop() {
if(radioStation!=previousRadioStation) { station_connect(radioStation); previousRadioStation = radioStation; } if (client.available() > 0) { uint8_t bytesread = client.read(mp3buff, 32); player.playChunk(mp3buff, bytesread); } }

That’s all! When the user presses a button, an interrupt happens, and changes the value of a variable which tells which stream to connect to.

void IRAM_ATTR previousButtonInterrupt() {

static unsigned long last_interrupt_time = 0; unsigned long interrupt_time = millis(); if (interrupt_time - last_interrupt_time > 200) { if(radioStation>0) radioStation--; else radioStation = 3; } last_interrupt_time = interrupt_time; }

To update the display, we simply send some commands to the serial port.

void drawRadioStationName(int id)
{ String command; switch (id) { case 0: command = "p1.pic=2"; Serial.print(command); endNextionCommand(); break; //1940 UK Radio case 1: command = "p1.pic=3"; Serial.print(command); endNextionCommand(); break; //KOSMOS GREEK case 2: command = "p1.pic=4"; Serial.print(command); endNextionCommand(); break; //REAL FM GREEK case 3: command = "p1.pic=5"; Serial.print(command); endNextionCommand(); break; //SKAI 100.3 GREEK } }

Now let’s take a look at the Nextion Display GUI. The Nextion GUI consists of a background picture and a picture which displays the name of the Radio Station. The ESP32 board send commands to change the name of the radio station from the embedded images. It is very easy. Please watch the Nextion display tutorial I have prepared some time ago for more information. You can quickly design your own GUI if you wish and display more things on it.

As always you can find the code of the project attached in this Instructable.

Step 7: Final Thoughts & Improvements

This project is very simple. I wanted a simple Internet Radio project skeleton to work with. Now that a first version of the project is ready we can add many features to it to improve it. First of all, I need to design an enclosure to house all the electronics.

In this book about the Most Beautiful Radios ever made there are very cool radios to choose from as an enclosure for this project. I think I am going to build an enclosure around this spectacular Art Deco radio. What do you think, do you like the looks of this radio or do you prefer something more modern? Do you have any other enclosure ideas? Also, do you like this Internet Radio project and what features do think we need to add to it to make it more useful? I would love to read your thoughts and Ideas so, please post them in the comments section below.

Share

Recommendations

  • Paper Contest

    Paper Contest
  • Warm and Fuzzy Contest

    Warm and Fuzzy Contest
  • Epilog X Contest

    Epilog X Contest

39 Discussions

0
None
CédricB25

27 days ago

Very nice project...I have assembled it and...all is working fine (I have changed the radio's channels, changed the Wifi connection to be on the Eudoram network). But there is a very annoying problem: after more or less one hour, the device bug and stop of working...have any idea about that (buffer...)? Thanks in advance
...I added a software watchdog and I tried an another ESP WROOM32 card...same problem, after 1 hour it stop to work!!!

2 replies
0
None
educ8sthierrym2

Reply 8 days ago

I have to check it out. Thanks for reporting! Cheers!

0
None
phil27

Question 23 days ago on Step 2

How
do I get the pinout for the MP3 decoder, VS1053. The pinout on the
board is on the underside, is it reversed when turned upside or not?





And
how do I get the PCB, thanks.

1 answer
0
None
educ8sphil27

Answer 8 days ago

The pinout is not reversed.

0
None
curiosity36

Question 14 days ago

I managed to get a simple one station ESP32/.VS1053. With the help of many knowledgeable contributors on Instructables. Should I be expecting stereo output from the VS1053? As it is, I am only hearing audo on athe Right channel although, it sounds good, as if all material is present.

1 answer
0
None
educ8scuriosity36

Answer 8 days ago

Yes, the module supports stereo. If the radio station stream also supports stereo you are good to go.

0
None
bujan

Question 18 days ago

Hi my Friend,
we already built the net radio but we have some problem:
- successfully connected to the wifi but your radio stations can hear only one second after push the change button and after silent
- I can't add other radio stations, because it not working.
(example: https://myonlineradio.hu/retro-radio)
I tried this:
char *host[] = {"myonlineradio.hu"};
char *path[] = {"/retro-radio"};
int port[] = {80};

Wait for your answer..
Thanks!

0
None
lebird

22 days ago

Great project and easy to build. Thanks a lot for sharing your work. The only thing I can't do is change the list of stations. I was able to change the one with the IP address but not much more. Not being the smartest cookie in the jar I tried to figure it out but me and ESP32 are new found friends and I am not quite sure of how it does things.:) . I have built one with a pi and it had a playlist you can edit. If I could know what the items in the list mean it would be a great help.
Again, Thanks and good luck. It will go into an old Grundig case.

0
None
programmingnoob

26 days ago

this is great project ... i just cant find esp_wifi.h and HTTPClient.h ... is it possible to post these libraries or give us download link, pls ... thanks

0
None
phil27

Question 4 weeks ago

Which is the 5v pin, please? I saw the pin-out underneath, but does that need to be reversed on the topside? Thanks.

0
None
rsmithton999

5 weeks ago

Where do I find the library: esp_wifi.h? I've been searching the internet, but can't seem to find anything.

0
None
phil27

Question 5 weeks ago on Step 2

the Internet Radio
this looks very interesting, I have bought all the parts, but where do I buy a PCB for this please?

0
None
curiosity36

5 weeks ago

It's alive! It's alive! Just in the infant stage but it does work --- somewhat. Only change to the code was entering my LAN info. Your music station is OK with me. I'll have to learn how to find and enter my personal preferences. Plenty of hints in the comments. I'm hoping to use a small OLED to just display the station call sign. Down side so far is the audio is broken up in spurts, for the loss of a better word. Like I said in my first comment. Thanks for an internet radio that I can actually build. The cabinet comes later.

Its alive.jpg
0
None
davetelling

Question 6 weeks ago

Where do you find the URL (host, path,port) information? I tried adding a couple of local internet stations, but was unable to find any combination that would stream the audio. Apparently the port information is critical, but I could find no port info when I was looking through the station information.
Ther onlt

1 answer
0
None
davetellingdavetelling

Answer 6 weeks ago

I'll answer my own question! I found that there are a number of methods for finding the URL info for online stations, and in this case google is your friend. I visited probably a dozen different websites (including YouTube videos) to find different ways of finding the URL's, as not all streams use the same formats. I finally was able to add the stations I wanted, and the second part was figuring out how to use the Nextion editor to change the station labels. It was a pain, and not very intuitive, but basically when you bring up the editor and load the .hmi file (internetradio.hmi) you have to replace the station ID graphics (seen in the lower left of the editing desktop) with your own, sized the same as the originals. You compile with the new graphics, then upload to SD card and then load into the display as mentioned above.

0
None
amecozzi

6 weeks ago

I constructed the ESP32 Web Radio, but the upload of the code gives this error code: esptool.py v2.3.1 connecting ………._________...………________...………_________ then the error occurs. A fatal error occurred: Failed to connect to ESP32. I don't know what is wrong and how to fix it. Al

1 reply
0
None
davetellingamecozzi

Reply 6 weeks ago

The ESP32 development module has a little switch next to the USB connector labeled "boot". When you see the Arduino system trying to up load, push that button until the PC shows the program loading. If that doesn't help, make sure that you are using the correct COM port from the tools menu. Using device manager, you should see something like, "Silicon Labs CP210x USB to UART Bridge", followed by a COM port number. Use that COM port to program your board. If THAT doesn't help, then I am not sure what the issue would be. Hope this helps!

0
None
deanhemm

6 weeks ago

Finally finished. Had more trouble with the case I built from scraps and a bit of burlap than I did with the electronics although there were some challenges there. I learned a lot about the ESP32 in the process. Struggled with finding the right libraries to use.

The amp worked fine for me. a bit of tick in the audio but not a worry as I wanted the old time look and sound anyway. I found I could listen to none of the stations you had as default as the stutter was too bad. I live in Australia and the ping to your stations listed was over 300 msec. When I found local stations it worked fine and I could even listen to overseas stations if the bit rate was no higher than 128 kbps.
I too had trouble finding station information with mp3 bit rate and port information until I stumbled upon fmstream.org. Great site!

Thanks again for a fun project and great intro to ESP32 for me.

internet radio.jpg
0
None
twiereng

6 weeks ago

Built this without the display. Pin 32 for the SPI CS did not work for me. When I switched it to 5, the default CS, it worked. The audio amplifier is a disaster. Mine did not come with the nut need to attach it to a panel, and the thread is a really odd size I could not find. It's no doubt metric in an odd pitch. Also the drive power to a small speaker is very poor. I'm looking for another audio amp for this project.