RadioduinoWRT – ein Webradio im Eigenbau

Heute möchte ich euch eines meiner größeren Bastelprojekte vorstellen. Diesmal geht es nicht ausschließlich um Software, sondern auch um die dazugehörige Hardware. Worum es geht? Um ein Webradio!

Ich höre gerne mal Internetradiosender, jedoch möchte ich hierfür längst nicht immer meinen PC laufen lassen. Mein Smartphone an meine Stereoanlage anzuschließen kam auch nicht in Frage, da ich dieses lieber bei mir trage, als für jede SMS/Whatsapp-Nachricht zur Musikanlage zu laufen. Und da ich eh gerne bastele, lag es nahe, einfach selber ein Webradio als eigenständiges Gerät zu bauen.

Da dieser Artikel etwas länger geworden ist, gibt es nachfolgend einen kleinen Überblick über die Sektionen des Artikels, sodass jeder schnell das finden kann, was er sucht.

1. Was ist das RadioduinoWRT?
2. Vorüberlegungen zum Aufbau
3. Was soll das Radio können?
4. Übersicht und Teileliste
5. Konfiguration des TL-WR703N
6. Der Part rund um den Arduino
7. Das Webinterface
8. Radioduino auf GitHub
9. Fotos vom Produkt
10. Fazit

1. Was ist das RadioduinoWRT?

Das RadioduinoWRT ist ein von mir selbst entworfenes und umgesetztes Webradio. Also ein Gerät, dass es ermöglicht Internetradiosender abzuspielen. Um einen kleinen Überblick zu geben, wie das fertige Produkt aussieht und funktioniert, habe ich nachfolgendes, kleines Video erstellt.

Wer mehr sehen will, findet am Ende des Artikels auch noch einige Fotos vom fertigen Radio.

2. Vorüberlegungen zum Aufbau

Nachdem die grundlegende Idee stand, ein Webradio selber zu bauen, habe ich mir Gedanken über die zu verbauenden Komponenten gemacht. So stand anfangs auch ein Raspberry Pi zu Diskussion. Schlussendlich habe ich mich aber für eine Kombination aus dem TP-Link WR703N Router, über den ich hier im Blog schon mehrmals berichtet habe, und einem Arduino Mega entschieden.

Diese Entscheidung hatte mehrere Gründe – zum einen hatte ich sowohl den Router als auch den Arduino noch in meiner Teilekiste liegen und zum anderen wollte ich das Projekt möglichst günstig und auf minimaler Hardware umsetzen. Sicher wäre eine Umsetzung mit einem Raspberry Pi auch möglich gewesen, jedoch ist dieser in der Anschaffung teurer als der TL-WR703N und der Arduino Mega zusammen. Hinzukommt, dass die Hardware der Raspberry für die Projektanforderungen schon fast etwas “oversized” ist.

3. Was soll das Radio können?

Ebenfalls am Anfang des Projekts habe ich eine Liste mit Funktionalitäten ausgearbeitet, die das fertige Radio unterstützen soll.

• Wiedergabe von Internetradio-Streams
• Lauffähig ohne PC / eigenständiges Gerät
• Internetverbindung per WLAN
• Chinch-Ausgang (für meinen Verstärker)
• 16×2 LCD zur Anzeige von Infos
• Menüführung
• Bedienung muss direkt am Gerät möglich sein
• Bedienung soll optional per IR-Fernbedienung möglich sein
• Weboberfläche zur Steuerung des Radio von einem PC oder Smartphone aus

Alle dieser Anforderungen konnten im Verlauf des Projekts umgesetzt werden. Weitere Features sind vorerst nicht angedacht. Solltet ihr, jedoch gute Vorschläge haben, so bin ich nicht abgeneigt, diese umzusetzen und den Artikel dann dementsprechend zu erweitern.

4. Übersicht und Teileliste

Nachdem die Anforderungen und grundlegende Gedanken über die Hardware gemacht waren, habe ich mir eine kleine Skizze erstellt, die grob vorgibt, wie der spätere Aufbau aussehen soll.

Die Teile, welche ich schlussendlich verbaut habe, möchte ich an dieser Stelle auch schon mal auflisten. Um euch die Suche zu erleichtern, habe ich jeweils einen Links zu den Shops gesetzt, wo ich die Teile gekauft habe. (Sollte im Laufe der Zeit einer der Links nicht mehr stimmen, schreibt mir bitte einen kurzen Kommentar unter den Artikel.)

• TL-WR703N mini router (~25€ @ ebay)
• USB-Hub (ab 3€ @ Amazon)
• Nano USB-Stick (4GB für ~4,50€ @ Amazon)
• USB-Soundkarte (~5€ @ Amazon)
• mind. 0,5m Klinke Verlängerung (~1,60€ @ eBay)
• Klinke auf Chinch Y-Stecker (2€ @ Amazon)

• Defektes (Yamaha-)Radio (wegen des Gehäuses) (~5-15€ @ eBay)

• Arduino Mega Rev. 3 (~13€ @ Amazon)
• enc28j60 Ethernet Modul (~3€ @ eBay)
• IR Receiver (~1,50€ @ eBay)
• Drehencoder (~3€ @ Amazon)
• 16×2 LCD (16 Spalten, 2 Zeilen) (~1,90€ @ eBay)
• Kabel/Draht (aus der Bastelkiste)
• Lochplatine (~1,20€ @ eBay)
• 0,5m LAN-Kabel (3€ @ Amazon)

Alles zusammen kommt man auf ca. 72€. Das klingt erstmal viel, jedoch werden die meisten wohl das ein oder andere Teil noch in der eigenen Werkstatt bzw. in der Bastelkiste rumfliegen haben, sodass sich die Kosten wieder relativieren. Zum Beispiel einen USB-Stick hat ja schließlich fast jeder noch irgendwo herumfliegen…

5. Konfiguration des TL-WR703N

Wenn alle Teile besorgt sind, kann es mit der Konfiguration des TL-WR703N losgehen. Auf diesem sollen MPD als Musikserver und ein Webserver laufen. Hierzu muss jedoch erst einmal die originale chinesische Firmware durch OpenWRT ersetzt werden. Danach muss der Speicher der Routers mittels eines USB-Sticks erweitert werden, sodass genug Speicherplatz für MPD, den Webserver und das Webinterface zur Verfügung steht.

Wie man den TL-WR703N mit OpenWRT flashed und den Speicher erweitert (Stichwort: ExtRoot) habe ich in folgenden beiden Artikeln bereits beschrieben:

• TL-WR703N mit OpenWRT flashen
• TL-WR703N Speichern mittels ExtRoot erweitern

Nachdem beide obigen Artikel abgearbeitet sind, kann es weitergehen mit der Einrichtung des Routers.

5.1 Einrichtung der Soundkarte

Schaltet den TL-WR703N aus, falls er eingeschaltet ist. Entfernt den USB-Stick, den ihr während des ExtRoot Tutorials eingesteckt habt. Steckt stattdessen den USB-Hub an den Router und in diesen wiederum den USB-Stick und die USB-Soundkarte.

Schaltet nun den TL-WR703N wieder an, loggt euch per SSH auf dem Router ein und gebt folgende Befehle ein (ein Befehl pro Zeile):

root@OpenWrt:~# opkg update
root@OpenWrt:~# opkg install usbutils
lsusb

Nach Eingabe des letzten Befehls (“lsusb”) sollten alle USB-Geräte gelistet werden. Hier sollte nun auch die USB-Soundkarte zu sehen sein. Gebt nun einen weiteren Befehl ein:

root@OpenWrt:~# cat /proc/asound/cards

Hier sollte nun die Soundkarte als solche gelistet und erkannt werden. Stattdessen wird die Karte jedoch nicht gefunden werden. Damit die Karte auch vom System korrekt als Soundkarte erkannt wird sind noch folgende Befehle nötig:

root@OpenWrt:~# opkg install kmod-usb-audio

Wenn wir nun noch mal den “cat /proc/asound…”-Befehl eingeben, sollte die Soundkarte korrekt angezeigt werden.

5.2 MPD und MPC installieren

Im nächsten Schritt installieren wir nun MPD und MPC. MPD steht für Music Player Daemon und ist eine Software die sowohl Musikdateien als auch Musikstreams abspielen kann. MPC ist eine konsolenbasierte Steuerungssoftware für MPD.

root@OpenWrt:~# opkg update
root@OpenWrt:~# opkg install mpd mpc

Damit alles läuft, müssen noch drei Verzeichnisse angelegt und ein paar kleine Änderungen an der Konfigurationsdatei des MPD vorgenommen werden.

root@OpenWrt:~# cd ~
root@OpenWrt:~# mkdir .mpd
root@OpenWrt:~# mkdir music
root@OpenWrt:~# mkdir .mpd/playlists
root@OpenWrt:~# vi /etc/mpd.conf

Mit dem letzten Befehl haben wir die Konfigurationsdatei geöffnet. Hier scrollen wir nun zu der Zeile “# An example of ALSA output:” und kommentieren den nachfolgenden “audio_output”-Block ein. Das ganze sollte wie folgt aussehen:

audio_output {
        type            "alsa"
        name            "My ALSA Device"
        device          "hw:0,0"        # optional
        format          "44100:16:2"    # optional
        mixer_type      "software"      # optional
        mixer_device    "default"       # optional
        mixer_control   "PCM"           # optional
        mixer_index     "0"             # optional
}

Alle anderen “audio_output”-Blöcke, auch den OSS-Block, müsst ihr auskommentieren, falls dies noch nicht geschehen ist. Hierzu schreibt ihr an den Anfang der jeweiligen Zeilen ein “#”.

Die Installation und Einrichtung von MPD/MPC sollte nun soweit abgeschlossen sein. Um zu überprüfen, ob alles geklappt hat, könnt ihr nun ein paar Kopfhörer in die USB-Soundkarte an eurem TP-Link Router einstecken. Nun könnt ihr zum Testen folgende Befehle in der Konsole eingeben.

root@OpenWrt:~# mpd
root@OpenWrt:~# mpc
volume:100%   repeat: off   random: off

Mit “mpd” startet ihr den Server und mit “mpc” den Client. Wenn ihr alles richtig gemacht habt, dann gibt der Client die obige Statuszeile (volume:100% …) aus.
Um nun zu überprüfen, ob auch ein Webradio wiedergegeben werden kann, müssen wir die Url eines Webradios angeben und den MPD auf Wiedergabe stellen.

root@OpenWrt:~# mpc add http://funkhaus-europa.akacast.akamaistream.net/7/264/119440/v1/gnl.akacast.akamaistream.net/funkhaus-europa
adding: http://funkhaus-europa.akacast.akamaistream.net/7/264/119440/v1/gnl.akacast.akamaistream.net/funkhaus-europa
root@OpenWrt:~# mpc play
http://funkhaus-europa.akacast.akamaistream.net/7/264/119440/v1/gnl.akacast.akamaistream.net/funkhaus-europa
[playing] #1/1   0:00/0:00 (100%)
volume:100%   repeat: off   random: off
root@OpenWrt:~#

Ihr solltet nun Funkhaus Europa auf euren Kopfhörer haben. Ansonsten scrollt noch mal ein wenig hoch und schaut, ob ihr in der Anleitung bisher vielleicht etwas übersehen habt.

Weitere Befehle für den MPC könnt ihr hier finden.

6. Der Part rund um den Arduino

Der Arduino bildet die Schnittstelle zwischen dem TP-Link-Router und dem Benutzer. Er verbindet sowohl den Drehschalter, das Display, die Infrarot-Schnittstelle als auch das Webinterface mit dem MPD/MPC auf dem TP-Link-Router.

Das schwierigste an der Umsetzung war es, mit dem begrenzten Speicher des Arduinos, sowohl längere und informative Texte auf dem Display auszugeben, als auch die komplette Ethernet Schnittstelle zu nutzen. Anfangs gab es immer wieder Speicherüberläufe. Letztendlich läuft aber alles rund.

Da der Quelltext für den Arduino doch etwas länger geworden ist, werde ich nicht jede einzelne Zeile erklären. Wer fragen hat, kann gerne einen Kommentar schreiben. Die Pin-Belegung der einzelnen Komponenten am Arduino geht aus dem Quelltext hervor. Auch hier gilt, wer Fragen hat, kann gerne einen Kommentar schreiben.

Quelltext für den Arduino

7. Das Webinterface

Damit der Arduino mit dem Wr703N kommunizieren kann, brauchen wir natürlich eine Schnittstelle. Hierzu benötigen wir einen Webserver auf dem Tp-Link Router. (Auch wenn ihr nicht das Webinterface für den Browser wollt – der Webserver muss sein! Sonst ist der Arduino nutzlos.)

Als Webserver habe ich mich für “Lighttpd” entschieden, da er sehr ressourcenschonend ist. Als nächstes folgt also die Installation von Lighttpd auf dem TP-Link. Hierzu müssen wir uns zuerst wieder per SSH auf dem TP-Link einloggen.

root@OpenWrt:~# opkg update
root@OpenWrt:~# opkg install lighttpd lighttpd-mod-cgi

Nach der Installation müssen wieder ein paar Einstellungen vorgenommen werden.

root@OpenWrt:~# vi /etc/lighttpd/lighttpd.conf

 

# mod_cgi Modul aktivieren
server.modules = {
   [..]
   "mod_cgi"
   [..]
}

# index.php als Index-Datei setzen
index-file.names = ("index.html","default.html","index.htm","default.htm","index.php")

# Webverzeichnis setzen
server.document-root = "/www_ext/"

# Server-Port festlegen
server.port = 8080

# CGI-Pfad angeben
cgi.assign = ( ".php" => "/usr/bin/php-cgi" )

Nun könnt ihr die lighttpd.conf-Datei speichern und wieder schließen. Im nächsten Schritt legen wir das Webverzeichnis an und starten Lighttpd.

root@OpenWrt:~# mkdir /www_ext
root@OpenWrt:~# /etc/init.d/lighttpd enable

Jetzt müssen wir dem soeben erstellten Webserver noch PHP beibringen.

root@OpenWrt:~# opkg install php5 php5-cgi

Nach der Installation müssen wir auch hier noch das Webverzeichnis angeben.

root@OpenWrt:~# vi /etc/php.ini

 

 doc_root = "/www_ext";
 

Nun sind wir fertig mit der Installation. Wir haben nun einen PHP-fähigen Webserver. Als Minimum benötigen wir nun noch die PHP-Schnittstelle zwischen Arduino und MPD/MPC. Legt hier zu im Verzeichnis “/www_ext” eine Datei namens “index.php” an.

root@OpenWrt:~# cd /www_ext
root@OpenWrt:~# vi index.php

In die Datei kopiert ihr folgenden PHP-Quellcode.
Quellcode für: index.php

Wenn ihr neben der Arduino Schnittstelle auch noch das Webinterface für den Webbrowser haben wollt, benötigt ihr noch die “index_web_api.php”-Datei und den Order “webradio” inklusive aller Dateien. Das Script sowie alle dazugehörigen Dateien findet ihr im RadioduinoWRT GitHub Repository. Mehr dazu im nächsten Absatz.

8. Radioduino auf GitHub

Sämtliche Quelltexte zu diesem Projekt könnt ihr auch in meinem GitHub-Account finden. Dort liegt ein Repository namens “RadioduinoWRT”, welches sowohl die Sourcen für den Arduino als auch für das (Web-)Interface enthält.

RadioduinoWRT @ GitHub

9. Fotos vom Produkt

Wie eingangs versprochen gibt es nun noch ein paar Bilder vom Radio. Solltet ihr noch mehr oder etwas spezielles sehen wollen, schreibt mir einen Kommentar und ich liefere das gewünschte Foto nach.

10. Fazit

Das Webradio war mein erstes wirkliches Projekt mit dem Arduino. Sicher, ich habe vorher schon mal einzelne kleine Schaltungen ausprobiert, aber ein richtiges Produkt ist nie dabei herausgekommen. Zwischendurch war ich schon kurz davor alles hinzuschmeißen und aufzugeben, weil mir vor allem der begrenzte Speicher des Arduinos und dessen eher schwache Debugging-Möglichkeiten wirklich Probleme bereitet haben. Letztendlich habe ich die Kiste aber zum Laufen bekommen und bin auch ein klitze kleines bisschen Stolz auf mich.

Sicherlich würde ein erfahrener Bastler/(Hardware-)Hacker das Ganze bestimmt sauberer hinbekommen, aber man darf auch nicht vergessen, dass dies mein erster Anlauf war.

Was ich auf jeden Fall mitnehme ist, dass man seine Hemmungen vor neuer Technik überwinden sollte und das mit genug Ausdauer und Ernergie auch solche Projekte machbar sind. Ich hoffe der Artikel hat euch gefallen und wenn ihr noch Fragen, Anregungen oder Tipps habt, würde ich mich über euer Feedback freuen!