24. September 2007

Webradio / Internetradio Player mit Adobe Flash realisieren

Webradio / Internetradio mit Adobe Flash

Wie erstellt man einen Flash Webradio Player? In diesem Artikel wird beschrieben, wie man sein eigenes Webradio mit Adobe Flash in die eigene Webseite einbindet.

Derzeit macht Streaming im Internet die Runde. Neue Medienformate überziehen das Internet. Allen vorran Podcasts und Flash Videos. Doch schon seit langem gibt es eine Technik, die sich aufgrund der Infrastruktur im Internet nie richtig durchsetzen konnte.

Das Webradio bzw. Internetradio

Webradios gibt es schon seit mehr als 10 Jahren. Leider konnte sich diese Technik nie so richtig durchsetzen. Dies lag an der geringen Bandbreite der Modems und an der minutengenauen Abrechnung für die Verbindungszeit zum Internet. Diese Zeiten sind allerdings so gut wie vorbei. Mehr als 50% der Benutzer im Internet haben DSL, und damit eine Breitbandverbindung zum Web sowie eine DSL Flatrate. Viele Hardware-Hersteller haben bereits reagiert und die alten analogen Radios zu digitalen Webradio-Geräten umgebaut. Ein PC zum Abspielen von Webradios wird dort überhaupt nicht mehr gebraucht. Dennoch empfangen die meisten Webradio-Hörer Webradios über Ihren PC. Leider ist dies ein recht leidiges Thema. Die einen benutzen Winamp und es funktioniert auf anhieb, die anderen verzweifeln stundenlang an der Technik oder trauen sich gar nicht, ihre heimische Technik für den Gebrauch von Webradios zu konfigurieren. Grund dafür sind zum einem Firewalls, die alles blocken und zum anderem User, die sich mit Technik einfach nicht auskennen.

Wir gestalten, entwickeln und installieren Ihren Flash Webradio Player

Webradio in einem Flash Player abspielen

Adobe FlashUm dies zu umgehen, habe ich versucht den MP3 Stream eines Webradios in einem Flash Player wiederzugeben. Die Vorteile eines Flash Webradios liegen auf der Hand:

  • Eine Installation zusätzlicher Software ist nicht notwendig
  • Flash ist bei über 90% aller Webradio Hörer schon installiert
  • Es gibt keine Probleme mit der Firewall

Leider war dies nicht ohne weiteres möglich. Wo man auch sucht: Überall heist es, dass es mit dem Internet Explorer (IE) technisch nicht möglich wäre. Also habe ich versucht eine Lösung für dieses “unmögliche Problem” zu finden. Das Prinzip ist eigentlich recht einfach: Da Adobe Flash mittels Actionscript MP3 Streams öffnen kann, sollte es eigentlich kein Problem sein, einen Webradio Stream zu öffnen. In unserem Fall nutzen wir den am häufigsten verwendeten Webradio Server Shoutcast von Nullsoft. Zunächst sollte man feststellen, dass der Shoutcast Server soweit in Betrieb ist und das Streaming übe den Server funktioniert. Ist der Webradio Server eingerichtet, kann man in Flash folgendes Actionscript austesten:

mySound = new Sound(this);
mySound.loadSound("http://deinserver:port", true);
mySound.start();

Das sollte zunächst funktionieren. Der Browser Mozilla macht da keine Probleme. Anders sieht es da beim Internet Explorer aus. Der Internet Explorer schaltet auf stur und spielt den Webradio Stream einfach nicht ab. Hier passiert einfach nichts. Ein großes Problem für die Reichweite eines Flash Webradio-Players. Fast die Hälfte aller zusätzlich möglichen Zuhörer würden somit nichts von dem neuen Flash Webradio-Player haben. Also habe ich weitergeforscht.

Webradio Stream in Flash in allen Browsern!

Im Grunde genommen ist ein Webradio Stream nichts anderes als eine unendlich lange MP3 Datei. Es gibt kein Ende der MP3 Datei, da dauerhaft gestreamt wird. Ansonsten unterscheidet einen MP3 Webradio Stream nichts von dem Abspielen einer MP3 Datei. Es kann jeder MP3 Stream mit Standard-Codierung von Flash gestreamt werden. Ausnahmen bilden anders codierte MP3 Streams wie z.B. AAC+ codierte MP3 Streams. AAC+ codierte Streams laufen deßhalb nicht im Flash-Player, da Flash diesen Codec nicht kennt und deßhalb auch nicht wiedergeben kann. Der AAC+ Codec wird oft von Webradios genutzt, um die Datenrate gering zu halten. Sollte Adobe Flash sich irgendwann dazu entscheiden auch AAC+ Codecs in Flash zu integrieren, sollten auch diese Streams mit Flash wiedergegeben werden können. Noch schöner wäre es allerdings, wenn Adobe sich dem Thema Audiostreaming annehmen würde und dieses in Flash integriert.

Jetzt zum eigentlichen Problem, dem Abspielen im Internet Explorer

Um einen MP3 Webradio Stream auch im Internet Explorer zum Laufen zu bringen, muss man einen Umweg über ein zusätzliches Script gehen. Der Internet Explorer scheint es nicht zu mögen, wenn Flash eine unendlich lange MP3 annehmen will und unterbindet die Herstellung einer Verbindung zum MP3-Audio-Stream. Deßhalb startet der MP3-Stream erst gar nicht. Dies umgeht man, indem man ein PHP Script auf einem PHP-fähigem Webserver ablegt, welches den Internet Explorer ein wenig aufs Kreuz legt, indem einfach eine fiktive Länge des Streams in dem PHP Scripts angegeben wird.

Das PHP Skript was den Stream umschreibt

<?php

// Verbindungsdaten des Streams

$streamname = “deinserver.de”; // Server (Host)
$port = “8128″; // Port des Streams
$path = “/”; // Zusätzliche Pfadangaben zum Stream

$stream_quality=192; // Kbit/s
$buffer_time=15; // Die Anzahl der Minuten, die der Stream Puffern soll

$stream_quality_kbytes=$stream_quality/8;
$stream_quality_kbytes_per_minute=$stream_quality*60;

$content_length=$buffer_time*1024*$stream_quality_kbytes_per_minute;

$length_header=”Content-length: “.$content_length;

header(“Content-type: audio/mpeg”);
header($length_header);
$sock = fsockopen($streamname,$port);

fputs($sock, “GET $path HTTP/1.0\r\n”);
fputs($sock, “Host: $streamname\r\n”);
fputs($sock, “User-Agent: WinampMPEG/2.8\r\n”);
fputs($sock, “Accept: */*\r\n”);
fputs($sock, “Icy-MetaData:0\r\n”);
fputs($sock, “Connection: close\r\n\r\n”);

fpassthru($sock);
fclose($sock);

?>

Das Script muss lediglich am Anfang angepasst werden. Es müssen aber lediglich der Server und der Port angegeben werden. Außerdem muss festgelegt werden, wie lang der Stream laufen soll.

Wir gestalten, entwickeln und installieren Ihren Flash Webradio Player

Länge des Streams festlegen

// Länge des Streams festlegen
header(“Content-length: 1234567890″);

In diesem Bereich wird die Länge des Streams in Byte angegeben. Die Berechnung für Pufferung des Streams habe ich in dem Script allerdings schon übernommen, sodaß nur noch die Minutenanzahl angegeben werden muss. Das Webradio läuft genau so lange im Flash Skript, wie die Pufferung über das PHP Script läuft. Die Länge des Streams kann aber leicht errechnet werden. Man nehme an, ein Stream benötigt 182Kbit/s. Dann benötigt das Abspielen eines Streams in einer Sekunde genau 192 x 1024 Bit, da das K für Kilo (und damit für 1.000) steht, aber dies in der IT mit 1024 umgerechnet wird. Eine Sekunde dieses Streams belegt also 196.608 Bytes an Traffic. Wenn wir also annehmen, dass ein das ein Stream über einen Flash Player maximal 3 Stunden lang sein soll, rechnen wir nur noch die benötigten Sekunden mal 196.608 Bytes. Dann erhält man die Byte Zahl, die für einem 1 Sekunde langem Stream benötigt wird.

3 Stunden Streaming bei 182kbit/s

3Stunden x 60 Minuten x 60Sekunden = 10.800 Sekunden
10.800 Sekunden x 196.608 Bytes = 2.123.366.400

Es wird also die Byte-Zahl berechnen, die für einen dreistündigen Stream benötigt wird. Die Zahl 2.012.774.400 ist also das Ergbenis an Bytes, welches in dem PHP Skript als Länge (Content-length) angegeben werden muss, wenn der Stream maximal drei Stunden laufen soll. Das sind rund 1,98 GB an Daten (2.123.366.400 : 1024 : 1024 : 1024 um von Byte auf Kb auf MB auf GB zu kommen).

Internet Explorer ausgetrickst und Firewalls umgangen

Aufgrunddessen dass der Stream durch ein PHP Skript verarbeitet wird und das PHP Skript über Port 80 des Webservers aufgerufen werden kann hat man somit schon einmal einen eleganten Trick gemacht. Der Port 80 des Webservers ist der Standard-Port für das Abrufen von Webseiten-Inhalten. Jeder Browser sucht seine Inetrnetseiten über diesen Port. Aufgrunddessen umgeht man elegant die Sperrung von Ports über Firewalls und das Skipt ist sogut wie von überall abrufbar. Da das Flash Skript auf dem Client-Computer ausgeführt wird, werden mittels dieses Skripts zwei Fliegen mit einer Klappe geschlagten:

  1. Der Internet Explorer wird ausgetrickst
  2. Die Firewalls werden über Port 80 umgangen

Ein komplettes Beispiel

Nehmen wir an, das folgender Webradio Stream für den Flash Player umgeschrieben werden muss:

http://www.deinserver.de:8000

Dann müsste das PHP Skript zum Umschreiben des Webradio Streams wie folgt aussehen:

<?php

// Verbindungsdaten des Streams

$streamname = “deinserver.de“; // Server (Host)
$port = “8000“; // Port des Streams
$path = “/”; // Zusätzliche Pfadangaben zum Stream

$stream_quality=192; // Kbit/s
$buffer_time=15; // Die Anzahl der Minuten, die der Stream Puffern soll

$stream_quality_kbytes=$stream_quality/8;
$stream_quality_kbytes_per_minute=$stream_quality*60;

$content_length=$buffer_time*1024*$stream_quality_kbytes_per_minute;

$length_header=”Content-length: “.$content_length;

header(“Content-type: audio/mpeg”);
header($length_header);
$sock = fsockopen($streamname,$port);

fputs($sock, “GET $path HTTP/1.0\r\n”);
fputs($sock, “Host: $streamname\r\n”);
fputs($sock, “User-Agent: WinampMPEG/2.8\r\n”);
fputs($sock, “Accept: */*\r\n”);
fputs($sock, “Icy-MetaData:0\r\n”);
fputs($sock, “Connection: close\r\n\r\n”);

fpassthru($sock);
fclose($sock);

?>

Anschließend muss das Skript nur noch in Actionscript aufgerufen werden:

mySound = new Sound(this);
mySound.loadSound("dieUrlZuDeinemScript", true);
mySound.start();

dieUrlZuDeinemScript muss lediglich korrekt gegen die URL zu dem PHP Skript ausgetauscht werden. Will man weiteren Einfluss auf den Stream in Flash nehmen, so kann man dies mittels der Adobe Flash Sound-Funktionen machen. Damit kann man einen kompletten Webradio Player in Flash programmieren. Hier geht es zum ActionScript Dictionary – Sound Objekt.

Achtung der Arbeitsspeicher läuft voll

Es gilt aber unbedingt zu beachten, dass der komplette Stream, der in dem Flash Player ankommt auch im Arbeitsspeicher eines Rechners landet. Dementsprechend würde ich dem Stream nicht länger als eine Stunde Laufzeit geben. Das Entladen des Players kann man ggf. dann per Refresh der Seite des Flash Players auslösen (Beispielsweise per Meta Refresh oder Javascript Refresh).

Aufgepasst beim Traffic!

Man muss aber unbedingt darauf achten, dass das PHP Skript sowie der Webradio hjede Menge Traffic verursacht! Aus diesem Grund sollte der Traffic des Webspace/Webserver am besten nicht limitiert ist. Ansonsten gibt es später eine böse Überraschung, wenn die Rechnung des Webspace Providers ins Haus trudelt. In jedem Fall ist ein eigener Webserver mit unlimitiertem Traffic das beste, was man in diesem Fall nehmen kann. Die Geschwindigkeit eines Root Servers ist in den meisten Fällen wesentlich besser als die eines normalen Webspace Anbieters.

Das PHP Script sollte am bestem auf dem Server liegen, auf dem auch der Shoutcast Server läuft. Dadurch wird der Traffic gering gehalten und die Performance verbessert.
Webserver mit unlimitiertem Traffix finden sie unter anderem bei Strato.

Eine Demo eines Flash Webradio Players

Das PHP Skript a sowie das Flash Skript, welche ich in dieser Anleitung benutzt habe können Sie hier herunterladen:

flash-webradio-beispiele.zip (5,34kb / ZIP)

2 Kommentare

1. Sodah schrieb am 24. Dezember 2007 um 20:14

Hi,

interessant zu sehen, welche Möglichkeiten das Problem zu umgehen. Ich nutze eine reine Flashversion, ganz ohne ein PHP-Script welches den Trafic auf dem eigenen Server enorm erhöht. Lediglich brauche ich das PHP-Script, um die Songinfos auszulesen. Zur Zeit laufen alle Sender von shoutcast.com.
http://shoutcast.sodah.de/#/House/6668/

2. Websteam Player - PSD-Tutorials.de - Forum schrieb am 21. März 2008 um 12:46

[...] der suche nach einem Flashplayer der Webradiostreams abspielen kann, hab folgende Seite gefunden Webradio / Internetradio Player mit Adobe Flash realisieren » Webradio News Nur leider ist dort nur das ActionScript gegen und da noch nie was mit Flash gemacht habe oder so, [...]

Schreibe einen Kommentar

Folgende Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>