This is a simple project that demonstrates how to use a webserver with the ESP8266 or ESP32.
May 2019 I wrote about a very cheap MP3 player which you could use stand-alone. I attached some buttons to the player to let it switch to the next song or the previous one. You can read that story here: https://lucstechblog.blogspot.com/2019/05/mp3-player-stand-alone.html
This can be usefull when you are walking or jogging outside and want a simple MP3 player. But when you want to attach the player to your home cinema system or just want to have it sitting around somewhere in your mancave it is not very efficient to have to stand up and walk to the player to choose the next song. So I decided to attach it to an ESP and control it through a webpage.
This is where the webpage tutorials come to practical use. You can re-read my ESP webpage tutorials here:
1 http://lucstechblog.blogspot.com/2019/07/esp-webserver-tutorial-part-1-textfields.html
2 http://lucstechblog.blogspot.com/2019/07/esp-webserver-tutorial-part-2-button.html
3 http://lucstechblog.blogspot.com/2019/08/esp-webserver-tutorial-part-3-button.html
4 http://lucstechblog.blogspot.com/2019/08/esp-webserver-tutorial-part-4-slider.html
Attaching the MP3 player to the ESP8266
I build the prototype on a breadboard and here is the layout.
The speakers have their own amplifier build in and therefore I gave them a seperate power supply. I am using a set that can be powered by an USB power supply. So I used an USB power supply with two outputs like I described in a previous weblog entry which you can re-read here :
https://lucstechblog.blogspot.com/2017/10/powering-your-project.html
I connected D5 and D6 from the ESP8266 to IO_1 and IO_2 of the MP3 player. And thats all.
Attaching the MP3 player to an ESP32
Basically there is no difference between the ESP32 and ESP8266 setup. The difference is that I attached pin 22 and 23 from the ESP32 to IO_1 and IO_2 from the MP3 player.
The ESP8266 software
Here is the complete program that builds the webserver on the ESP8266. Basically this is the same webserver program as described in my first webserver tutorial and which you can re-read here:
http://lucstechblog.blogspot.com/2019/07/esp-webserver-tutorial-part-1-textfields.html
Of Course you should edit it to your own liking.
// ======================================================
// Webserver program that sends button information
// to ESP8266 and has the MP3 player playing the
// next song or start all over
// ======================================================
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);
// Your routers credentials
const char* ssid = "XXXXXXXXXXXXXXXXX";
const char* password = "YYYYYYYYYYYYYYY";
// ==========================================
// initial variables
// ==========================================
String textosend_string;
String button1ON;
String button2ON;
// =========================================
// Here is the HTML page
// =========================================
String getPage()
{
String page = "<!DOCTYPE HTML>";
page += "<html>";
page += "<head>";
page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0 maximum-scale = 2.5, user-scalable=1\">";
page += "<title>Luc's button demo</title>";
page += "<body style='background-color:powderblue; onload='myFunction()'>";
page += "</head>";
page += "<body>";
page += "<style>";
page += ".buttonstyle";
page += "{";
page += "background-color: BurlyWood;";
page += "border-radius: 12px;";
page += "color: black;" ;
page += "font-size: 1.2em;";
page += "border: 2px solid; background-color: BurlyWood;";
page += "}";
page += "</style>";
page += "<h1 style='color:red'>Luc's MP3 Control</h1>";
page += "<br>";
page += "<FORM action=\"/\" method=\"post\">";
page += "<button type=\"submit\" name=\"button1on\" id=\"button1on\" value=\"but1ON\" class = \"buttonstyle\">Next</button>";
page += "</form>";
page += "<br>";
page += "<br>";
page += "<FORM action=\"/\" method=\"post\">";
page += "<button type=\"submit\" name=\"button2on\" id=\"button2on\" value=\"but2ON\" class = \"buttonstyle\">RESTART</button>";
page += "</form>";
page += "<br>";
page += "</body>";
page += "</html>";
return page;
}
// ==================================================
// Handle for page not found
// ==================================================
void handleNotFound()
{
server.send(200, "text/html", getPage());
}
// ==================================================
// Handle submit form
// ==================================================
void handleSubmit()
{
//Text to show
if (server.hasArg("button1on"))
{
button1ON = server.arg("button1on");
Serial.print("Thereceived button1 is: ");
Serial.println(button1ON);
//pinMode(D5, OUTPUT);
digitalWrite(D5, HIGH);
delay(10);
digitalWrite(D5, LOW);
delay(60);
digitalWrite(D5, HIGH);
delay(5);
}
if (server.hasArg("button2on"))
{
button2ON = server.arg("button2on");
Serial.print("Thereceived button2 is: ");
Serial.println(button2ON);
// pinMode(D6, OUTPUT);
digitalWrite(D6, HIGH);
delay(20);
digitalWrite(D6, LOW);
delay(60);
digitalWrite(D6, HIGH);
}
server.send(200, "text/html", getPage()); //Response to the HTTP request
}
// ===================================================
// Handle root
// ===================================================
void handleRoot()
{
if (server.args() )
{
handleSubmit();
}
else
{
server.send(200, "text/html", getPage());
}
}
// ===================================================
// Setup
// ===================================================
void setup()
{
delay(1000);
Serial.begin(115200);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid,password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
server.on("/", handleRoot);
server.onNotFound(handleNotFound);
server.begin();
delay(500);
pinMode(D5, OUTPUT);
pinMode(D6, OUTPUT);
}
// ===================================================
// Loop
// ===================================================
void loop()
{
server.handleClient();
delay(50);
}
The program starts with loading the webserver libraries. Next it defines the network credentials:
const char* ssid = "XXXXXXXXXXXXXXXXX";
const char* password = "YYYYYYYYYYYYYYY";
Don't forget to replace the XXXXXXXXXXXXXX and YYYYYYYYYY with your routers name and password.
In the getpage() routine you can find the HTML code which builds the webpage.
The page displays two buttons. One has the name Next and the other Restart.
The handlesubmit() routine checks which button is pressed and first sets the ESP's IO port D5 or D6 HIGH and then LOW. The LOW signal triggers the MP3 player.
The setup routine actually connects to the router and displays the ESP's IP number in the Serial Monitor.
The ESP32 software
There are just a few minor changes in the ESP32 program fromthe ESP8266 version.
// ====================================================== // Webserver program that sends button information // to ESP32 and has the MP3 player playing the // next song or start all over // ====================================================== #include <WiFi.h> #include <WebServer.h> WebServer server(80); // Your routers credentials const char* ssid = "XXXXXXXXXXXXXXX"; const char* password = "YYYYYYYYYYYY"; // ========================================== // initial variables // ========================================== String textosend_string; String button1ON; String button2ON; // ========================================= // Here is the HTML page // ========================================= String getPage() { String page = "<!DOCTYPE HTML>"; page += "<html>"; page += "<head>"; page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0 maximum-scale = 2.5, user-scalable=1\">"; page += "<title>Luc's button demo</title>"; page += "<body style='background-color:powderblue; onload='myFunction()'>"; page += "</head>"; page += "<body>"; page += "<style>"; page += ".buttonstyle"; page += "{"; page += "background-color: BurlyWood;"; page += "border-radius: 12px;"; page += "color: black;" ; page += "font-size: 1.2em;"; page += "border: 2px solid; background-color: BurlyWood;"; page += "}"; page += "</style>"; page += "<h1 style='color:red'>Luc's MP3 Control</h1>"; page += "<br>"; page += "<FORM action=\"/\" method=\"post\">"; page += "<button type=\"submit\" name=\"button1on\" id=\"button1on\" value=\"but1ON\" class = \"buttonstyle\">Next</button>"; page += "</form>"; page += "<br>"; page += "<br>"; page += "<FORM action=\"/\" method=\"post\">"; page += "<button type=\"submit\" name=\"button2on\" id=\"button2on\" value=\"but2ON\" class = \"buttonstyle\">RESTART</button>"; page += "</form>"; page += "<br>"; page += "</body>"; page += "</html>"; return page; } // ================================================== // Handle for page not found // ================================================== void handleNotFound() { server.send(200, "text/html", getPage()); } // ================================================== // Handle submit form // ================================================== void handleSubmit() { //Text to show if (server.hasArg("button1on")) { button1ON = server.arg("button1on"); Serial.print("Thereceived button1 is: "); Serial.println(button1ON); digitalWrite(22, LOW); delay(60); digitalWrite(22, HIGH); } if (server.hasArg("button2on")) { button2ON = server.arg("button2on"); Serial.print("Thereceived button2 is: "); Serial.println(button2ON); digitalWrite(23, LOW); delay(60); digitalWrite(23, HIGH); delay(60); digitalWrite(23, LOW); delay(60); digitalWrite(23, HIGH); } server.send(200, "text/html", getPage()); //Response to the HTTP request } // =================================================== // Handle root // =================================================== void handleRoot() { if (server.args() ) { handleSubmit(); } else { server.send(200, "text/html", getPage()); } } // =================================================== // Setup // =================================================== void setup() { delay(1000); Serial.begin(115200); // Connect to Wi-Fi network with SSID and password Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid,password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // Print local IP address and start web server Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); server.on("/", handleRoot); server.onNotFound(handleNotFound); server.begin(); delay(500); pinMode(22, OUTPUT); pinMode(23, OUTPUT); } // =================================================== // Loop // =================================================== void loop() { server.handleClient(); delay(50); }
Just like the ESP8266 version the program starts with loading the webserver libraries. Next it defines the network credentials:
const char* ssid = "XXXXXXXXXXXXXXXXX";
const char* password = "YYYYYYYYYYYYYYY";
Don't forget to replace the XXXXXXXXXXXXXX and YYYYYYYYYY with your routers name and password.
In the getpage() routine you can find the HTML code which builds the webpage.
The page displays two buttons. One has the name Next and the other Restart.
The handlesubmit() routine checks which button is pressed and first sets the ESP's IO port 22 or 23 LOW and then HIGH. The LOW signal triggers the MP3 player. This is a bit different from the ESP8266 version. And the restart function has to do the LOW to HIGH switch two times. So there is a slight difference in the way the ESP32 communicates with the MP3 player compared to the ESP8266 version.
The setup routine actually connects to the router and displays the ESP's IP number in the Serial Monitor.
How to use the program.
After starting the program, or powering up the ESP the IP-number will be displayed in the serial monitor of the Arduino IDE.
If the ESP is not attached to your computer you can look up the IP number in your router.
Depending on your router this has to be done only once. My ESP will always get the same IP number once it has been connected to the router.
Open a web-browser like Firefox or Chrome and point the browser to the IP number. In my case the ESP's IP number is 192.168.1.77 The webpage will appear.
The webpage will have two buttons. Pressing the NEXT button will have the MP3 player playing the next song. Pressing the Restart button will start playing songs from the beginning of the list.
This is just a simple demonstration about controlling your hardware by a webpage. I am sure you can come up with many more projects.
Till next time
have fun
Luc
