HTML5-Audioplayer für 1LIVE

In einem anderen Artikel habe ich bereits darüber geschrieben, wie unnötig die großen deutschen Medienanstalten bis heute auf den Flash-Player als Abspielsoftware für Medieninhalte setzen.

Die Audio-Streams auf einslive.de habe ich mir mal etwas genauer angesehen.

Diese bietet Einslive als .m3u-Link zum Download an. M3U ist ein Dateiformat für Playlisten, das einigen vielleicht noch von Winamp bekannt ist. Eine m3u-Datei enthält mindestens die Pfade zu abzuspielenden Mediendateien, zusätzliche Informationen sind möglich (siehe M3U bei Wikipedia), werden aber von 1LIVE nicht genutzt.

Der 1LIVE-Stream für den Sender selbst ist also unter http://www.wdr.de/wdrlive/media/einslive.m3u zu finden. Wenn als Stream-Quelle eine m3u-Datei angegeben ist, dann muss darin also versteckt sein, welche Daten tatsächlich abgespielt werden, denn m3u ist ja zunächst lediglich eine Textdatei.

Ruft man diese Playlist mal mit einem HTTP-Request ab, so steckt darin lediglich eine einzige URL: http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live (hier bewusst nicht verlinkt). Dies ist der eigentliche Audio-Stream. Wird diese (oder auch direkt der m3u-Link) zum Beispiel im VLC-Player geöffnet, zeigt dieser in den Medieninformationen, dass es sich um einen Audio-Stream im Codec MPEG Audio layer 1/2 (mpga) mit 128kB/s Stereo handelt.

Damit ist dies ein praktisch idealer Kandidat, um auch mit Hilfe von HTML5 abgespielt zu werden, wie auch w3schools dokumentiert.

Um dies zu testen reicht eine minimale HTML-Datei aus.


<html>
  <head></head>  
  <body>
    <audio controls="controls">
      <source type="audio/mpeg" 
              src="http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live" />
    </audio>
  </body>
</html>

Ein schneller Test zeigt: Alle aktuellen Browser, Internet Explorer, Edge, Firefox und Chrome/Chromium können mit diesem Stream direkt etwas anfangen.

Ich könnte diese HTML-Datei auch online stellen, den Stream auf diese Weise sogar direkt hier einbinden, befürchte aber, mich hier auf oder sogar jenseits der Grenze zu bewegen, die für das Verbreiten von urheberrechtlich geschützten Inhalten legal möglich wäre. Um das ganze selbst auszuprobieren muss aber lediglich der oben angegebene Quelltext in eine Datei mit der Endung .htm gespeichert werden, die dann im eigenen Browser geöffnet werden kann.

Die Stream-URL verweist auf akamaistream.net. Akamai ist ein Content-Delivery-Network, eine sinnvolle Entscheidung, wenn es wie bei Einslive darum geht, alle Hörer flüssig mit Daten zu versorgen, ohne dass die Wiedergabe stockt oder die Server zusammenbrechen. Meine Vermutung war zunächst, dass diese URL wechselt, und deshal keine HTTP-Weiterleitung direkt genutzt wird. Seit zwei Tagen allerdings bekomme ich hier stabil dieselbe URL, so dass es vermutlich doch eine einfache Entscheidung ist, um im Redaktions- oder Technik-Team den Stream einfach umkonfigurieren zu können.

Lösungsansatz für dynamische Stream-URL hinter stabilem Einstiegs-Link

Falls die URL wider erwarten doch nicht stabil sein sollte, ließe sich das ebenfalls lösen. Allerdings lässt sich dies auch jenseits der Frage, ob die öffentliche Demo legal wäre, nicht mehr online demonstrieren.

Dabei habe ich lokal jQuery genutzt, um zunächst den Inhalt der m3u-Playlist abzufragen, und diesen dann dem audio-Tag als Quelle zu übergeben. Was im lokalen Test einwandfrei funktioniert, hat aber seine Tücken, sobald die Datei auf einem Server liegt.

Hier grätscht die Same-Origin-Policy dazwischen. Diese wird von Browsern umgesetzt und verhindert, dass eine Webseite fremde Inhalte einfach so einbindet. Dies ist ein Sicherheitsfeature, mit dem bereits 1996 im Netscape Navigator verhindert werden sollte, dass ein Webserver A Informationen über die Verbindung eines Browsers zu einem anderen Server B erhalten kann.

Die Same-Origin-Policy in dieser strengen Form ist jedoch im sogenannten Web 2.0 überholt. Das Teilen, Einbinden und Nutzen von Inhalten anderer Server ist gang und gäbe. Der Mechanismus des „Cross-Origin Resource Sharing“, kurz CORS, bietet deshalb eine Möglichkeit, dies zu umgehen. CORS setzt jedoch die Kooperation des Servers voraus, der die einzubindenden Fremddaten liefert. Im Falle des Einslive-Streams ist dies der WDR-Server, auf dem die m3u-Datei liegt, da deren Inhalt per Javascript verarbeitet wird. Hier wäre deshalb lediglich erforderlich, dass der Server von wdr.de den entsprechenden HTTP-Header Access-Control-Allow-Origin: http://einslive.de sendet.

Damit die Demo funktioniert, könnte alternativ mein eigener Server als Proxy fungieren, dann müsste dieser jedoch die Daten durchschleusen, was ich vermeiden wollte.

Für Interessierte gibt es hier den Quelltext, erneut gilt: Lokal als .htm-Datei speichern und im Browser öffnen, hier hat CORS nämlich keine Auswirkung:

<!DOCTYPE html><html>
  <head>
    <title>Demo Einslive in HTML5</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>
    <h1>Einslive ohne Flash</h1>
    <audio id="einsliveStream" controls></audio>
    <script type="text/javascript">
      $.ajax({
        url: "http://www.wdr.de/wdrlive/media/einslive.m3u",
        cache: false,
        success: function(streamUrl){
          $("#streamSource").attr("src", streamUrl).trigger("play");
        }
      });
    </script>
  </body>
</html>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.