Internet Radio Using an ESP32

143,185

396

112

Introduction: Internet Radio Using an ESP32

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 every…

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.

UPDATE 6/6/2019

The noise issue has been solved by adding an isolator transformer. Check out the updated shematic diagram. Thanks!

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 and noisy, so we need to clear it from the noise and amplify it. (If you are using headphones, the signal does not need to be cleared from noise or amplified.) That’s why I am using an Isolation transformer to clear the audio from the noise and 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 are two things 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.

Each audio channel must go through the isolation transformer to clear any noise present before connecting to the amplifier.

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) <br>char pass[] = "yourWifiPassword";   // your network password</p><p>// 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();</p><p>   pinMode(previousButton, INPUT_PULLUP);
   pinMode(nextButton, INPUT_PULLUP);</p><p>   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.

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

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.

<p>void IRAM_ATTR previousButtonInterrupt() {</p><p>  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;
}</p>

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

<p>void drawRadioStationName(int id)<br>{
  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
  }
}</p>

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 sends 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.

8 People Made This Project!

Recommendations

  • Plywood Contest

    Plywood Contest
  • Back to School: Student Design Challenge

    Back to School: Student Design Challenge
  • Fandom Contest

    Fandom Contest

112 Comments

0
remim
remim

Question 1 year ago

Hello i'm french and i would liké tonbuild this internet radio but i don't know what to write in char host and char path? For exemple i have this address for a streaming radio http://icecast.funradio.fr/fun-1-44-128. what i have to write in code? Ans in France there seems to be no http port for Internet radio. Do i have to put 80 for each Station. Thanks a lot.

0
naja49
naja49

Answer 11 months ago

char *host [n] = {"streamer-03.rtl.fr ",
char *path [n] = {"/fun-1-44-128",
int port [n] = {80,
this is works

0
ma35tr07
ma35tr07

5 months ago on Step 7

Hi,
Thank you for a detailed explanation on the esp side, but I didn't see any explanation about the .hmi file ;(

Short brief and sorry for offtop
I build my internet radio on esp8266 and it works perfectly :)
Later I decided to mount the Nextion display.
I google for the source code of the .hmi file on controlling the wifi radio over Nextion but was unsuccessful.
After that, I myself began to write code and I managed to control the radio through the Nextion screen. And now, I can choose any station and send other commands (described in the 'interface.txt' file) to my esp radio via RxTx pins by simple touching.

But now I ran into another issue - this is main reason I trying to resove about 2 weeks
- I need to process incoming messages from esp radio to Nextion and do info parsing such as wifi status, current channel #, Station name, Song Title and etc.

Example:
I initialize script time to update info every 1 sec.
So, every 1-sec Nextion sends the 'cli.info' command to the esp radio and gets actual info in this format by one message:

##CLI.NAMESET#: 92 ALBUMROCK.MIAMI
##CLI.ICY0#: ALBUMROCK.MIAMI
##CLI.ICY1#: <BR>This stream requires <a href="http://www.winamp.com/">Winamp</a><BR>;
##CLI.ICY2#: SHOUTcast Distributed Network Audio Server/Linux v1.9.8<BR>
##CLI.ICY3#: www.AlbumRock.Miami
##CLI.ICY4#: Classic Rock 60s 70s 80s Miaimi Florida Album Rock
##CLI.ICY5#: 128
##CLI.ICY6#:
##CLI.ICY7#:
##CLI.META#: The Who - Eminence Front
##CLI.VOL#: 108
##CLI.PLAYING#
##CLI.META#: The Beatles - Mother Nature's Son
##SYS.TZO#: 1
##SYS.DATE#: 2017-04-13T22:47:44+01:00

Now I would like to parse a few lines in .hmi to see actual info about the Station, Now Playing, time-date and etc.

I downloaded the attached .zip file but didn't understand and didn't see a code to process data from esp to Nextion. No codes were found in the .hmi project file.
I'm using Nextion Editor v 0.53.

Can you help me?
I will be happy if anybody can explain and show me how data parsing is work.

Greetings

0
fofodrilo
fofodrilo

Question 6 months ago

Hi! It works nicely, Thanks for the tutorial ... :) . I have a question about some modification of the project. Maybe someone can help me. How can I play a single Mp3 file (like mySong.mp3) hosted on a webpage. I make an http request and access the file, but some how it doesn´t work. Playing Radio-Stream works like charm, but what about single mp3. It would be nice to have personal playlist or just audio messages for friends. Any Thoughts?

0
JCQ81
JCQ81

Answer 6 months ago

Here is the current version: https://github.com/JCQ81/docker-icecast-mp3
It is unfinished, but main functionality is working. It may take a while before I will be able to finish it due to "priorities on other projects".

0
JCQ81
JCQ81

Answer 6 months ago

You can stream from an icecast server, and stream an .mp3 file to icecast using the old version of ices. I'm building a docker container with a simple web interface for it, but it's not yet finished (i'm not a programmer, so takes quite some time)

0
jumpjack2
jumpjack2

3 years ago

Can this sketch download and play MP3 files from any server or just from "official" web radios?
I mean, can I connect it to my own server? Or to an MP3 on dropbox, onedrive, whatelse...?

0
fofodrilo
fofodrilo

Reply 6 months ago

I was trying to do the same, but I could not until now. Did you manage to stream an mp3 file from a webpage? Regards!

0
MangaladasanP
MangaladasanP

Question 7 months ago on Step 7

Hello,
I am basically a DIY attitude person.Nowadays, I am spending time with Raspberry Pi variant Ordroid SBC boards and DIY projects.
I am new to Arduino world. I was happen to see your site and it is very interesting. I would like to do such projects.
Recently I have bought a Odroid - Stereo Boom Bonnet Board I2S based board which is very much goes with their SBC Board Odroid-XU4(https://www.hardkernel.com/shop/i2s-2watt-stereo-boom-bonnet-kit/). Since it is supports the I2S interface, also has amplifier circuit, just a thought of using this kit and make Internet Radio.
I2S 2Watt Stereo Boom Bonnet Kit – ODROID
*Currency : USD. Please check the specification of the product that you want to purchase. ODROID products are development platform. Our price does not include taxes, tariffs, brokerage fee and any related charges.
www.hardkernel.comI have bought this board because they have reduced the price from 13.5 $ to 6.5$
Suddenly thought of using ESP-32 Controller and make my own Internet Radio using this Stereo Boom Bonnet Kit.
Is it possible to use this kit with ESP-32? Can you please help me and teach me how to make this work?
Yours Sincerely,
MANGALADASAN PANDIAN,
KUWAIT.
1
ChrisBeeRmd
ChrisBeeRmd

Tip 7 months ago on Introduction

Hello, I have a remark concerning the 'noise issue' of the VS1053.
The problem is that the all the 3 pins ( left, right and gbuf of the jackplug output are on a DC level of 1.25V.
If you connect a headphone there is no problem. But if you connect an external amplifier and connect the common pin (GBUF) of the connector to the ground pin of the amplifier then you short the DC level of the VS1053 which is 'out of spec'. (noisy weak signal)
A solution is using isolation transformers as you did, but they are big and expensive.
The cheaper solution is given by VLSI in the application note: "VS10XX AppNote: Connecting analog outputs". I used the included circuit.
Regards ChrisBeeRmd

VS1053 interface.jpg
0
richb77
richb77

8 months ago on Step 7

Is it possible to get this to work with a GSM board and mobile data sim? I want an internet radio in my car and data only sims are not expensive where i live (well not too expensive)

0
Paysan9136
Paysan9136

Question 9 months ago on Introduction

Hello, I build this radio but there is a problem when I start it.
It gives a registerdump on this line:

if (client.connect(host[station_no],port[station_no]))

I checked the value of station_no and it is 1073479679
This was read from the EEprom.

maybe this number has never been initialized.
what can I do to run this for the first time?

0
y2kats65
y2kats65

11 months ago

Thanks for sharing the project. I am getting these errors when I tried to compile the source:
Line: Nextion myNextion(nextion, 9600);
Error: 'Nextion' does not name a type
Any help? Thanks

0
jean jacquesc2
jean jacquesc2

Question 1 year ago on Step 7

Bonjour ,hormis les 3 broches renseignés dans le programme arduino , comment vous definissez les GPIO pour les autres broches , dans quel fichier ? dans quelle library ?merci d avance Jean.

0
Klaus-JürgenE
Klaus-JürgenE

3 years ago on Step 7

Great project! It made so much fun. ...and worked. Made some modifications:
- used a cheap OLED I2C Display
- changed to stereo
Please find attached some pictures of my 3D printed enclosure.

IMG_4125.jpegIMG_4124.jpegGeh&auml;use_WebRadioBottom.jpgGeh&auml;use_WebRadioTop.jpgWebRadioSch_modified.jpg
0
steeverioux49
steeverioux49

Reply 1 year ago

Hi :) do you have the stl files for the radio project?

1
Klaus-JürgenE
Klaus-JürgenE

Reply 3 years ago

IMG_4128.jpegIMG_4124.jpeg
0
4711engel1
4711engel1

Reply 2 years ago

Hallo, deine Version finde ich sehr interessant und etwas günstiger im Preis. Da ich noch Anfänger bin würde ich mich freuen, wenn Du mir Dein wiring und deinen sketch mailen könntest. Ich würde es dann so gerne nachbauen.
Vielen Dank