# Web-Radio Anleitung

Diese Anleitung beschreibt den Aufbau eines WEB Radios. Über einen Drehgeber Encoder sind 20 Radiostationen wählbar. Die Lautstärke wird direkt über das Poti am Audio-Verstärker eingestellt. Das LCD-Display zeigt die gewählte Radio-Station an. Die Radio-Stationen sind über einen WEB-Server abruf- und veränderbar.

Nach dem Einschalten über den Volume-Regler/Schalter, sucht der Mikrocontroller nach einer gültigen WLAN-Verbindung und stellt die zuletzt gewählte Radio-Station ein. Liegt keine gültige WLAN-Verbindung vor, startet der WLAN-Manager. Über die Netzwerkeinstellung des Handys/Tablet kann nach der Auswahl „WEBRADIO“ der WLAN-Manager mit der IP-Adresse 192.168.4.1 aufgerufen werden. Über den WLAN-Manager sind die eigenen WLAN-Zugangsdaten speicherbar. Nach dem speichern der Zugangsdaten startet der Mikrocontroller neu und das LCD-Display zeigt die IP-Adresse des WEB-Servers und danach die gewählte Radio-Station an.

[![webradio.jpg](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/NSWUzR8LwkqUso8J-webradio.jpg)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/NSWUzR8LwkqUso8J-webradio.jpg)

Das WEB-Radio

## Hardware  


### Die Stückliste für das WEB-Radio

- 1 x ESP32 NodeMCU D1 R32
- 1 x ESP32 NodeMCU D1 R32 Shield
- 1 x ANGEEK Mini PAM8403 Stereo Verstärker 5V 3W+3W
- 1 x HD44780 16x2 LCD Modul Display mit I2C Schnittstelle 2x16 Zeichen
- 2 x Mini-Lautsprecher 3 Watt 8 Ohm
- 1 x KY-040 Drehwinkelgeber Drehgeber Rotary Encoder Modul
- 1 x Widerstand 10kΩ
- 1 x MT3608 DC-DC Modul (optional)
- 1 x Netzteil-Ladegerät, Universal 5V (8,4V)
- 1 x Litze 0,2mm2
- 1 x Sperrholzplatte 300x600
- 1 x Stift/Buchsenleiste
- Schaltdraht und Kleber

## Aufbau und Montage  


Der Aufbau und die Montage des WEB-Radios sind in mehrere Schritte unterteilt.

###   
Schritt 1: Verdrahtung und Lötarbeiten  


Stehen keine +5V als Versorgungsspannung zur Verfügung, kommt das MT3606-Modul zum Einsatz. Es wird mit 7-24Volt versorgt. Der +5V-Ausgang wird mit dem Audio-Verstärker verbunden. Der Audio-Verstärker besitzt einen Lautstärkeregler mit Schaltfunktion, diese nutzen wir zum Ein/Ausschalten des WEB-Radios. Die geschalteten +5V greifen wir auf der Unterseite des Audioverstärkers an dem Elko ab.

[![audioverstärker.jpg](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/qz3a21Lhpz1A7mNn-audioverstarker.jpg)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/qz3a21Lhpz1A7mNn-audioverstarker.jpg)

Löte die Stiftleisten in das ESP-Shield und verdrahte die Bauteile nach dem untenstehenden Bild mit Schaltlitze.

[![wr_schaltung.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/4FEj6L0RBvbR8ije-wr-schaltung.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/4FEj6L0RBvbR8ije-wr-schaltung.png)

### Schritt 2: 3D-Druck  


- Je 4 Platinen Füße für den ESP32 und das DC-DC-Modul D=5mm x 5mm
- 2 Abstandshalter für das LCD Display:
- 1x 4x4x60mm und 1x 4x4x20mm
- 2 x Drehknöpfe für den Volume-Regler und den Tuning Drehgeber. Der Achs-Durchmesser der Drehregler beträgt 6mm

[![3d-druck.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/ZjuibAnpTrrIFgAG-3d-druck.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/ZjuibAnpTrrIFgAG-3d-druck.png)

### Schritt 3: Das Gehäuse  


- Erstelle auf [Boxes.PY](https://www.festi.info/boxes.py/) eine "Basebox" mit den Abmessungen x=200, y=110 und h=130.
- Füge in die erstellte SVG-Grafik die Durchbrüche für das LCD-Display, die Lautsprecher und die beiden Löcher D=6mm für
- den Lautstärke-Regler und den Drehgeber ein
- Schneide das Gehäuse mit dem Lasercutter aus
- Klebe das LCD-Display mit den Abstandshaltern an die Gehäuseinnenwand
- Klebe den ESP32 mit dem Abstandshalter auf den Gehäuseboden
- Klebe den DC/DC-Wandler auf den Gehäuseboden
- Montiere den Audio-Verstärker und den Drehgeber an die Gehäuse-Front
- Führe das Netzteilkabel durch die Gehäuse-Rückwand und verlöte es mit den DC/DC-Modul
- Verklebe die Gehäuseteile. Die Rückwand wird nicht verklebt

[![webradio_gehäuse.jpg](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/0abVUdD8T2FFxem8-webradio-gehause.jpg)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/0abVUdD8T2FFxem8-webradio-gehause.jpg)

### Schritt 4: Inbetriebnahme  


- Kontrolliere alle Verbindungen
- Lade das WEB-Radio-Programm in den ESP32. Das Programm befindet sich auf deinen Laptop unter der Obercloud/WEB-Radio/
- Versorge das WEB-Radio mit Spannung und schalte über den Volume-Regler das WEB-Radio ein
- Wähle an deinem Handy/Tablet die Netzwerkverbindung "WEBRADIO"
- Gibt in deinem Browser auf der Kommandozeile die IP-Adresse 192.168.4.1 ein
- Gib deine WLAN-Zugangsdaten in den WLAN-Manager ein und speichere
- Nach dem Start des WEB-Radios siehst du im OLED-Display die IP-Adresse des WEB-Servers und die aktive Radio-Station
- Wähle mit den Drehgeber einige Radio-Stationen aus und teste sie
- Starte den WEB-Server und teste die Funktionen

[![webradio_ap1.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/ugiHjYaUDdwRFLwm-webradio-ap1.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/ugiHjYaUDdwRFLwm-webradio-ap1.png)

[![webradio_ap3.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/BcJNAF1aC48rSVUB-webradio-ap3.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/BcJNAF1aC48rSVUB-webradio-ap3.png)

[![webradio1.jpg](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/biKN5xSC3gnJidB2-webradio1.jpg)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/biKN5xSC3gnJidB2-webradio1.jpg)

[![webradio2.jpg](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/NQIRmhVJ88lDMr3k-webradio2.jpg)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/NQIRmhVJ88lDMr3k-webradio2.jpg)

[![webradio-sender.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/pMsjGOuVVXE5SPnB-webradio-sender.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/pMsjGOuVVXE5SPnB-webradio-sender.png)

**Fertig!**