Send Audio Alerts... Anywhere

I was watching videos on ESP32's I2S (the serial bus interface specially designed for communicating digital audio) and decided to make an internet voicemail machine.

1. Adafruit ESP32-S3 Reverse
2. Mini Speaker Arduino
3. 2 pin Tactile Push Button
4. MAX98357 Amplifier
5. LED
6. 2m Diameter Screws

I also used some dupont wires and soldering supplies.

Following the Arduino code below, the MAX98357 Amplifier connection(s):

1. DIN to ESP32 PIN 39
2. BCLK to ESP32 PIN 38
3. LRC to ESP32 PIN 37
4. Vin to ESP32 Vbus
5. Gnd to Gnd

The LED will connect to the ESP32 PIN 8 and GND. The Button will connect to the ESP32 PIN 14 and GND.

You may have noticed a grounding issue, or a lack thereof. This is how I turned 4 dupont wires into the three headed Frankenstein ground wires for my project.

I cut the wires, strip them down, twist the strands, and hold the solder underneath for at least 10 seconds. I want the twisted connection to be hot so the solder goes on easily. I push some solder into the wires and the solder tip. Then cover the soldered connection with electrical tape. Now I have a female to 4 female wire. See picture above.

I also extended the terminals on my push button. A personal tip: Soldering two wires together can be tricky, but I find that using clay really helps! See picture above.

This project will host two sites that create a audio message. One thru a computer mic or one that you can type the voicemail. I purposely made the code (HTML and JavaScript) fit on one page. This site could be hosted by the ESP32 and that's easily done when you have a single HTML page with no static imports. Even more, ESP32 site can be accessed anywhere in the world. Check out my https://www.instructables.com/Diet-Coke-Office-Button/ to get your ESP32 website accessed anywhere in the world.

However, I took the easy way out and ran a Flask site using python on a laptop. That means the Flask site talks to the chip via local Wi-Fi. You just need to be careful using the correct local IP addresses.

A Flask project needs to have a template folder. See the pictures above for the project folder set up. Note the txt files should not be there, please read below.

For some reason instructables has issues uploading HTML files. I turned the two provided HTML files into .txt files and removed the first few lines. I could then upload the code here. Turn the .txt files back to .html and add the lines below to the top of each file ¯\_(ツ)_/¯

IMHO, the most impressive aspect in this project is that there exists an out-of-the-box JavaScript API that converts your voice to text. What a world we live in. In just a few lines of JS, the code will access your computers microphone, sample your analog voice, convert it to digital, and the turn the digital voice into text!!! I only tested this on chrome with a laptop.

Run web.py and note the local host and port. Mine was 172.16.0.0:5000 but yours will most likely be different.

The code speaks for itself. This great ESP32 module comes with a TFT screen already baked in, just use Adafruit's libraries. As always, Adafruit has great docs for this chip and the amplifier. Make sure to change the hardcoded local IP address in the function apiPayLoad("http://172.16.0.0:5000/esp32Ping") to the IP address printed out when you ran Flask's web.py.

The bottom button or D2 will turn off the screen's backlight. D1 will ping the python backend.

There are many ways to slice this onion. I choose this architecture because it is what I'm use to. I'll explain the key points below.

python

When you run web.py it host its own site. The site(s) will take your data from the text of your keyboard or your actual voice! When ready, you click SEND. This will send data via an API to the site hosted by the ESP32. Look at the functions loadData(); in the html files. (These JS functions need the ESP32's correct local Wi-Fi hardcoded). The ESP32 is waiting to take the data and turn it into audio.

esp32

The ESP32 has an API url at WiFi.localIP()/action. Look at lines 145-160 in the Arduino code. This will take the data sent from Flask and play it thru the speaker. Pressing the middle button on the ESP32 screen will "ping" the python backend just to make sure the two are still talking. When the screen is first turned on, it will display the ESP32's local IP address.

together

Make sure the Flask HTML files have the right hardcoded ESP32 IP addresses. Make sure the ESP32 Arduino code has the right Flask IP address.

Here is a STL file I made to house the hardware. You can use the 2m diameter screws to screw the ESP32 screen to the lid. Dont screw it too tight because you could pinch or break the chip. There are holes for the LED and button.

The ESP32 makes using the internet and I2S protocol easy, so why not combine them. thanks!