Nachdem der Blog-Beitrag Internet-Radio mit dem ESP32 ein großes Echo hervorrief, stellen wir hier jetzt eine zweite Variante vor, die zahlreiche Verbesserungen und Erweiterungen erhielt. Wesentlichste Änderung ist die Verwendung des I2S Digital Verstärkers MAX98357A an Stelle des Analogverstärkers. Das Display wurde auf 4 Zeilen mit 20 Zeichen vergrößert. Neben dem gerade gespielten Sender werden Datum und Uhrzeit, sowie die aktuelle Lautstärke angezeigt. In den beiden unteren Zeilen werden Informationen zum laufenden Programm angezeigt, die mit dem Audiostream mitgeschickt werden. Die Lautstärkeregelung erfolgt ebenso, wie die Senderwahl über einen Rotary-Encoder. Die Konfiguration kann, wie bei der verbesserten Version von Herrn Schröder (siehe Update im alten Beitrag), über einen Browser erfolgen. Über diesen Weg kann auch die Senderliste verändert und erweitert werden. Da manche URLs nicht abspielbar sind, kann eine URL über die Browserkonfiguration jetzt getestet werden, ehe sie gespeichert wird. Die Versorgung über Akku wurde weggelassen, da der Stromverbrauch zu hoch war. Zusätzlich kann ein Firmwareupdate über WLAN (Over The Air = OTA) erfolgen.
Benötigte Hardware
| Anzahl | Bauteil | Anmerkung |
|---|---|---|
|
1 |
|
|
|
2 |
|
|
|
1 |
|
|
|
1 |
|
|
|
1 |
|
|
|
1 |
|
|
|
1 |
|
|
|
2 |
|
|
|
1 |
|
|
|
2 |
|
|
|
2 |
|
|
|
1 |
|
|
|
1 |
|
|
|
2 |
|
|
|
2 |
Drehknöpfe für 6mm Achse |
|
|
Mehrere |
|
|
|
1 |
|
|
|
1 |
|
Schaltung

Die folgende Tabelle zeigt die Verwendung der Pins des ESP32
|
Gerät |
Bezeichnung |
ESP32 |
| Verstärker links |
LRC |
25 |
|
BCLK |
26 |
|
|
DIN |
27 |
|
|
|
GAIN |
GND |
|
|
SD |
+5V |
|
|
GND |
GND |
|
VIN |
+5V |
|
| Verstärker rechts |
LRC |
25 |
|
BCLK |
26 |
|
|
|
DIN |
27 |
|
|
GAIN |
GND |
|
|
SD |
+5V über 470kΩ |
|
|
GND |
GND |
|
|
VIN |
+5V |
|
LCD-Display |
GND |
GND |
|
|
VCC |
+5V |
|
|
SDA |
21 |
|
|
SCL |
22 |
|
Encoder Lautstärke |
CLK |
14 |
|
|
DT |
13 |
|
|
SW |
|
|
|
+ |
+3.3V |
|
|
GND |
GND |
|
Encoder Senderwahl |
CLK |
33 |
|
|
DT |
32 |
|
|
SW |
35 3.3V über10kΩ |
|
|
+ |
+3.3V |
|
|
GND |
GND |
|
Versorgung |
+5V |
VIN |
|
|
GND |
GND |
Der ESP32 wird mit den Widerständen und Stiftleisten für die Peripherie auf einer 50x70 mm großen Lochrasterplatte aufgebaut. Für die beiden Verstärker-Module werden 7-polige Federleisten verwendet.

Die Abbildung zeigt die Bestückung und die Verdrahtung auf der Unterseite

Die Abbildung zeigt die Realisierung auf einer Lochrasterplatine 50 x 70 mm
Die Verdrahtung könnte auch über eine einseitig gedruckte Schaltung erfolgen. Lediglich die rot eingezeichnete Verbindung muss über eine freie Verbindung realisiert werden. Für den I2S Bus werden drei Drahtbrücken verwendet.
In die beiden 7-poligen Federleisten werden die zwei Verstärkermodule eingesteckt. Die beiden Rotary-Encoder und das Display werden mit Jumper Wire Kabel F2F mit den entsprechenden Stiftleisten auf der Lochrasterplatte verbunden. Die Lautsprecher werden an den Schraubklemmen der Verstärkermodule angeschlossen.

Software
Der Sketch wurde aus Gründen der Übersichtlichkeit in mehrere Teile zerlegt. Dazu wird eine Funktion genutzt, die die Arduino IDE zur Verfügung stellt. Gibt es neben dem Hauptsketch, der denselben Namen wie der Ordner hat, noch weitere „.ino“ oder „.h“ Dateien im selben Ordner, so werden diese vom Compiler in alphabetischer Reihenfolge an den Hauptsketch angehängt.
Da der gesamte Code sehr umfangreich geworden ist, gibt es diesen nur zum Herunterladen.
Sketch zum Herunterladen
Die ZIP-Datei enthält den Ordner mit allen zugehörigen Dateien. Sie muss in das Arbeitsverzeichnis der Arduino IDE (meist Dokumente\Arduino\) entpackt werden. Im Folgenden werden die einzelnen Teile kurz beschrieben. Eine detaillierte Beschreibung finden Sie als Kommentare im Code.
-
Webradio_MAX.ino: Das ist der Hauptsketch. Es werden globale Variablen und Datenstrukturen definiert.
- setup() nach dem Initialisieren der seriellen Schnittstelle werden die Konfigurationsdaten aus den Präferenzen gelesen. Dann werden die Setupfunktionen der einzelnen Programmteile, mit Ausnahme von Webservers und OTA aufgerufen. Es folgt der Verbindungsaufbau zum lokalen WLAN. War die Verbindung nicht erfolgreich, werden auf dem Display Informationen zur Konfiguration angezeigt. Bei erfolgreicher Verbindung wird die Echtzeituhr initialisiert und die Wiedergabe der zuletzt gehörten Station gestartet. Nun kann auch das Setup für Webserver und OTA aufgerufen werden.
- loop() prüft zuerst, ob OTA-Anfragen vorliegen und dann, ob es Anfragen für den Webserver gibt. Es wird überprüft, ob die Verbindung zum WLAN noch besteht. Wenn die Verbindung besteht, werden der Audiostream und die beiden Encoder auf Ereignisse geprüft. Einmal pro Minute wird die Anzeige der Uhrzeit aktualisiert. War die Verbindung mehr als 5 Minuten unterbrochen, wird der ESP32 neu gestartet.
-
audio.ino: In diesem Teil werden alle Funktionen im Zusammenhang mit den Audiostreams implementiert.
- setup_audio() bereitet das System vor. Buffer und Stream-Ausgang werden initialisiert.
- audio_loop() überprüft den Status des Audio-Streams.
-
MDCallback(void *cbData, const char *type, bool isUnicode, const char *string)
wird immer dann aufgerufen, wenn im empfangenen Stream neue Metadaten verfügbar sind. Metadaten vom Typ „Title“ werden auf dem Display angezeigt. - stopPlaying() beendet das Abspielen des Streams und gibt die zugehörigen Ressourcen frei.
- bool startUrl(String url) Startet das Abspielen eines Streams von einer gegebenen URL. Ist der Start nicht erfolgreich, wird false zurückgegeben.
- setGain() setzt die Lautstärke auf den Wert der globalen Variablen currentGain.
-
display.ino: Enthält Funktionen zum Ansteuern des Displays und die Definition von Sonderzeichen wie Lautsprecher und deutsche Umlaute.
- setup_display() initialisiert das Display und erzeugt die Sonderzeichen im Display-RAM.
- String extraChar(String text) ersetzt im übergebenen UTF8-Text die deutschen Umlaute durch den entsprechenden Sonderzeichen-Code.
- showStation() zeigt den Namen der aktuellen Radiostation in der zweiten Zeile des Displays an. Die Anzeige beginnt an der Position 2 und wird auf 18 Zeichen beschnitten. Ist die aktuelle Station auch die aktive Station so wird auf Position 0 das Lautsprechersymbol angezeigt.
- displayMessage2(uint8_t line, String msg) der übergebene String wird ab der angegebenen Zeile in zwei Zeilen angezeigt. Beide Zeilen werden vorher gelöscht. Hat der String mehr als 20 Zeichen, erfolgt ein Zeilenumbruch. Die zweite Zeile wird nach 20 Zeichen abgeschnitten.
- displayDateTime() In der ersten Zeile wird Datum und Uhrzeit angezeigt. In der äußerst rechten Position wird die aktuelle Lautstärke in Prozent angezeigt.
- displayMessage(uint8_t line, String msg) der übergebene String wird in der angegebenen Zeile angezeigt. Die Zeile wird vorher gelöscht. Der String wird auf maximal 20 Zeichen beschnitten.
- displayClear() löscht alle vier Zeilen.
- clearLine(uint8_t line) löscht die angegebene Zeile
-
gain.ino: Steuert die Lautstärkeregelung mit einem Rotary-Encoder
- gain_loop() prüft ob sich der Wert des Rotary-Encoders geändert hat. Ist das der Fall, wird der neue Lautstärkewert gespeichert und eingestellt.
- IRAM_ATTR readGainISR() Interrupt-Behandlung für den Encoder
- setup_gain() startet den Encoder, registriert die Interrupt-Routine, setzt die Grenzwerte und den aktuellen Wert als Voreinstellung.
-
index.h: Enthält die HTML-Seiten für den Webserver. Mit der Befehlsfolge
const char MAIN_page[] PROGMEM = R"=====(
beliebiger Text………
)=====";
kann ein beliebiger Text direkt als Konstante in den Programmspeicher eingebaut werden. Das ist für HTML-Seiten sehr praktisch, da diese dann außerhalb der IDE entworfen und getestet werden können. Die vorliegenden Seiten nutzen jQuery, Ajax und JavaScript. Der Vorteil von Ajax für interaktive Seiten liegt darin, dass bei Änderungen nur der veränderte Teil der Seite aktualisiert wird. Es werden drei HTML-Konstanten definiert.- OPTION_entry ein Template für Einträge in der Auswahlliste für die Radiostationen
- MAIN_page die Hauptseite mit Konfiguration und Wartung der Senderliste
- CONFIG_page Seite zur Eingabe der Zugangsdaten, wenn der ESP32 zur Erstkonfiguration im Accesspoint Modus ist.
-
ota.ino: Hier sind die Funktionen zum Update der Firmware über WLAN zu finden.
- setup_ota() es wird der Hostname und das Passwort festgelegt. Anschließend werden Callback-Funktionen registriert.
- ota_onStart() wird beim Start eines OTA-Uploads aufgerufen. Das Display wird gelöscht und in der ersten Zeile eine entsprechende Meldung angezeigt
- ota_onEnd() wird nach dem Beenden des Uploads aufgerufen. Eine entsprechende Meldung wird in der dritten Zeile angezeigt.
- ota_onProgress(unsigned int progress, unsigned int total) wird während des Uploads in regelmäßigen Abständen aufgerufen und liefert Informationen über den Fortgang. In der zweiten Zeile des Displays wird der Fortgang in Prozent angezeigt.
- ota_onError(ota_error_t error) wird aufgerufen wenn ein Fehler auftritt. Die Fehlermeldung wird dann in der vierten Zeile angezeigt.
-
rotary.ino steuert die Senderwahl mit einem Rotary-Encoder
- rotary_loop() prüft, ob sich der Wert des Rotary-Encoders geändert hat. Ist das der Fall, wird die nächste Station aus der Senderliste angezeigt. Wird innerhalb von 10 Sekunden der Knopf am Encoder gedrückt, so wird auf die neue Station umgeschaltet. Wird der Knopf nicht gedrückt, erfolgt kein Wechsel und die aktuelle Station wird wieder angezeigt.
- IRAM_ATTR readRotaryISR() Interrupt-Behandlung für den Encoder
- setup_rotary() startet den Encoder, registriert die Interrupt-Routine, setzt die Grenzwerte und den aktuellen Wert als Voreinstellung.
-
stations.ino: definiert eine Programmspeicherkonstante mit der Default-Senderliste.
- setup_senderliste() füllt die Senderliste im RAM mit der Senderliste aus den Preferences. Gibt es dort keine Senderliste, so wird die Default-Senderliste verwendet.
-
webserver.ino: Enthält das Setup und die Funktionen, um auf http-Anfragen zu reagieren.
- setup_webserver(): Es werden die einzelnen Funktionen zum Behandeln der http-Anfragen registriert und der Server auf Port 80 gestartet.
- webserver_loop() es wird geprüft, ob neue Anfragen vorliegen.
- handleRoot() bearbeitet eine Anfrage für die Hauptseite. Liegt eine Verbindung ins lokale WLAN vor, wird die Hauptseite an den Client gesendet. Ist der ESP32 für die Grundkonfiguration im Accesspoint Modus, wird die Konfigurationsseite übertragen. Zusätzlich müssen in diesem Fall noch eventuell vorhandene Parameter verarbeitet werden, um die Zugangsdaten zu speichern, oder einen Neustart auszulösen.
- sendStations() reagiert auf das Ajax-Kommando mit der URL /cmd/stations. Sendet die Liste der Stationen als HTML-Optionlist. Diese Liste wird dann über Javascript im Client in das Dropdownelement eingebaut.
- setAccessData() reagiert auf das Ajax-Kommando mit der URL /cmd/setaccess. Die Konfigurationsdaten SSID, PKEY und NTP-Server werden in den Präferenzen gespeichert.
- getAccessData() reagiert auf das Ajax-Kommando mit der URL /cmd/getaccess. Die Konfigurationsdaten SSID, PKEY und NTP-Server werden als Antwort gesendet. Als Trennzeichen wird das Zeilenende verwendet.
- getStationData() reagiert auf das Ajax-Kommando mit der URL /cmd/getstation. Die ID der gewünschten Station wird als Argument erwartet. Es wird der Name, die URL und das Enable-Flag der angegebenen Station als Antwort gesendet. Als Trennzeichen wird das Zeilenende verwendet.
- setStationData() reagiert auf das Ajax-Kommando mit der URL /cmd/setstation. Die ID der gewünschten Station wird als Argument erwartet. Ist die ID gültig, werden die als Argument übergebenen Daten für den Namen, die URL und das Enable-Flag in der Senderliste gespeichert.
- testStation() reagiert auf das Ajax-Kommando mit der URL /cmd/teststation. Die URL, die getestet werden soll, wird als Argument erwartet. Es wird versucht, die Wiedergabe der angegebenen URL zu starten. Ist der Versuch nicht erfolgreich, so wird wieder auf die aktuelle Station zurückgeschaltet und mit „ERROR“ geantwortet.
- endTest() reagiert auf das Ajax-Kommando mit der URL /cmd/endtest. Der Test wird beendet, indem die Wiedergabe der aktuellen Station gestartet wird.
- restart() reagiert auf das Ajax-Kommando mit der URL /cmd/restart. Der ESP32 wird neu gestartet.
-
wlan.ino: Enthält die Funktion zum Herstellen einer Verbindung mit dem lokalen WLAN oder zur Bereitstellung eines Accesspoints, wenn eine Verbindung nicht möglich ist.
- boolean initWiFi(String ssid, String pkey) versucht mit den angegebenen Zugangsdaten eine Verbindung zum lokalen WLAN herzustellen. Wenn keine SSID angegeben wurde, oder der Verbindungsversuch nicht gelingt, wird ein Accesspoint gestartet. Über diesen Accesspunkt kann dann von einem Browser unter der Adresse 192.168.4.1 die Konfigurationsseite aufgerufen werden.
Damit der Sketch kompiliert werden kann, muss die Arduino IDE entsprechend vorbereitet werden. Die Arduino IDE unterstützt standardmäßig eine große Anzahl von Boards mit unterschiedlichen Mikrocontrollern, nicht aber den ESP32. Damit man Programme für diese Controller erstellen und hochladen kann, muss daher ein Softwarepaket für die Unterstützung installiert werden.
Zuerst müssen Sie der Arduino IDE mitteilen, wo sie die zusätzlich benötigten Daten findet. Dazu öffnen Sie im Menü Datei den Punkt Voreinstellungen. Im Voreinstellungs-Fenster gibt es das Eingabefeld mit der Bezeichnung „Zusätzliche Boardverwalter URLs“. Wenn Sie auf das Icon rechts neben dem Eingabefeld klicken, öffnet sich ein Fenster, in dem Sie die URL https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json eingeben können.
Nun wählen Sie in der Arduino IDE unter Werkzeug → Board die Boardverwaltung.
Es öffnet sich ein Fenster, in dem alle zur Verfügung stehenden Pakete aufgelistet werden. Um die Liste einzugrenzen, gibt man im Suchfeld „esp32“ ein. Dann erhält man nur noch einen Eintrag in der Liste. Installieren Sie das Paket „esp32“. Falls das Paket schon installiert war, prüfen Sie bitte, ob Sie die neueste Version haben.


Eine weitere Bibliothek wird für den Rotary-Encoder benötigt. Ihr Name ist „AiEsp32RotaryEncoder“ von Igor Antolic in der Version 1.4.0.
Kernstück dieses Projekts ist aber die Bibliothek „ESP8266Audio“ von Earle F. Philhower in der Version 1.9.7.
Diese Bibliothek ermöglicht es, verschiedene digitale Audiostreams zu lesen, zu dekodieren und über verschiedene Ausgangskanäle wiederzugeben. Als Eingang, kann der Programmspeicher, der interne RAM´, ein Filesystem, eine SD-Karte, ein HTTP-Stream, oder ein ICY-Stream genutzt werden. Der ICY-Stream wird typisch von Internet-Radios genutzt.
Dekodiert werden können WAV, MOD, MIDI, FLAC, AAC und MP3 Dateien. Für das Webradio wird MP3 benötigt. Die Ausgabe kann schließlich in Speicher, Files oder I2S erfolgen.
Wenn alle Bibliotheken installiert sind, kann der Sketch kompiliert und auf die Hardware hochgeladen werden.
Achtung! Da sich der Sketch aus zahlreichen Teilen zusammensetzt, kann das Kompilieren, insbesondere beim ersten Mal, lange dauern. In den Voreinstellungen sollte „Compiler Warnungen“ auf „keine“ gestellt werden, da die LCD-Bibliothek fälschlicherweise eine Warnung ausgibt
Inbetriebnahme
Bei der ersten Inbetriebnahme sind noch keine Präferenzen vorhanden. Es kann daher keine Verbindung zum lokalen WLAN hergestellt werden. Ein Accesspunkt mit der SSID „webradioconf“ ohne Passwort wird gestartet. Mit z.B. einem Smartphone kann nun eine Verbindung zu diesem Accesspoint hergestellt werden. Danach kann in einem Browser über die Adresse 192.168.4.1 die Konfigurationsseite aufgerufen werden.

Nach dem Neustart sollte die Verbindung zum lokalen WLAN erfolgreich hergestellt werden können. Die Wiedergabe der Station 0 aus der Default Liste (NDR2) sollte mit einer Lautstärke von 50% starten. Mit dem Encoder für die Lautstärke kann die Verstärkung eingestellt werden. Änderungen werden in den Präferenzen gespeichert, sodass beim nächsten Einschalten dieselbe Lautstärke eingestellt wird. Mit dem anderen Encoder kann ein Sender aus der Liste gewählt werden. Beim Drehen des Encoders wird in der zweiten Zeile des Displays der Name der Station angezeigt. Durch Drücken des Kopfes am Encoder wird die gerade angezeigte Station zur aktuellen Station und die Wiedergabe wird gestartet. Auch dieser Wert wird in den Präferenzen gespeichert. Beim nächsten Start wird automatisch die zuletzt gewählte Station wiedergegeben. Wird der Knopf am Encoder innerhalb von 10 Sekunden nicht gedrückt, springt die Anzeige auf die aktuelle Station zurück.
Konfiguration und Bearbeitung der Senderliste

Über die URL http://webradio/ sollte die Konfigurationsseite abrufbar sein. Im oberen Teil können die Zugangsdaten und der NTP-Server geändert werden. Die Änderungen werden erst dann wirksam, wenn der Knopf „Speichern“ geklickt wurde.
Mit dem Knopf „Neustart“ kann ein Neustart ausgelöst werden.
Die Dropdown-Liste enthält alle Sender der Senderliste. Auswählbare Sender haben vor dem Namen einen schwarzen Punkt. Im Formular darunter werden die Daten zur ausgewählten Station angezeigt und können geändert werden. Ist das Häkchen bei „Verwenden“ nicht gesetzt, kann die Station im Gerät nicht ausgewählt werden. Da manche URLs nicht funktionieren, sollte eine neue URL mit dem Knopf „Testen“ getestet werden. Ein Klicken auf diesen Knopf startet die Wiedergabe der URL am Gerät. Sollte die Wiedergabe nicht funktionieren, wird sofort wieder auf den aktuellen Sender zurückgeschaltet und eine Meldung angezeigt. Ist die Wiedergabe möglich, wird eine Box mit einem Knopf angezeigt. Klicken auf diesen Knopf schließt die Box und beendet den Test. Es wird wieder die aktuelle Station wiedergegeben. Mit dem Knopf „Ändern“ können die Änderungen für die ausgewählte Station dauerhaft geändert werden.
Firmware Update über OTA
Um das Programm zu aktualisieren ist es nicht notwendig, das Gerät zu öffnen und eine USB-Verbindung herzustellen. In der Arduino IDE sollten Sie bei den Ports den folgenden Eintrag sehen.

Über diesen Port können Sie nun einen Sketch hochladen. Zum Schutz muss nach Aufforderung das Passwort „radioupdate“ eingegeben werden. Da die Serielle Schnittstelle nicht genutzt werden kann, werden Meldungen am Display angezeigt.
Hinweise
Der ESP32 hat eine CPU mit zwei Kernen. Beim Internet Radio muss der Web-Datenstrom vom Internet über das http-Protokoll gelesen werden. Das geschieht im System-Thread, der auf dem Kern 0 läuft. Die Anwendung muss den empfangenen Stream dekodieren und in den Buffer schreiben, aus dem dann die Daten über DMA ohne Zutun der CPU ausgegeben werden. Das Dekodieren erfolgt im Anwendungs-Thread, der auf Kern 1 läuft. Wenn nun zusätzlich CPU-Zeit für Display und Encoder verwendet werden, kommt es zu kurzen Unterbrechungen, die beim Drehen der Encoder akustisch zu hören sind.
Eine Stromversorgung über den USB-Bus des ESP32 Moduls ist möglich. Die Versorgung über den externen Eingang ist nur eine Empfehlung.
Das 3D-Objekt zum Pultgehäuse ist so angeordnet, dass ein 3D-Druck ohne Stützstrukturen möglich ist. Den Link zu den Druckdateien finden Sie in der Bauteileliste am Anfang des Beitrages.
Viel Spaß mit dem Radio!
UPDATE
Herr Andreas Kühn hat das vierzeilige Display durch ein farbiges TFT-Display ersetzt. Er hat uns dankenswerter Weise erlaubt, seine Version hier zu veröffentlichen.

Die Funktionen für das Display mussten natürlich ersetzt werden. Auch zwei zusätzliche Bibliotheken sind erforderlich.
"U8g2" von Oliver in der Version 2.27.6 und
"GFX Library for Arduino" von Moon On Our Nation in Version 1.3.1
Die folgende Tabelle zeigt die Verdrahtung zwischen dem Display und dem ESP32
| DISPLAY | ESP32 |
| VCC | +5V |
| GND | GND |
| CS | GPIO 05 |
| RESET | EN |
| A0 | GPIO 17 |
| SDA | GPIO 23 |
| SCK | GPIO 18 |
| LED | 3.3V |







152 Kommentare
Andreas Wolter
@Ines: Wenn man die ZIP-Datei entpackt und dann mit der Arduino IDE die Datei webradio_MAX.ino öffnet, sollten alle anderen Dateien auch geöffnet werden. Sie erscheinen im oberen Teil des Editors als Reiter, nicht als separate Fenster.
Ich habe das hier eben kurz getestet und es funktioniert auch.
Grüße,
Andreas Wolter
AZ-Delivery Blog
Ines
Hallo, habe die ZIP Datei geladen und in Sketchbook entpackt. So weit so gut. Wenn ich jetzt den Sketch lade, wird nur der webradio_MAX.ino geladen und sonst kein andere… Könnt mal bitte jemand genau schreiben was ich machen muss damit ich den Sketch komplett laden kann? Bitte, Bitte
MfG Ines