cbPlayer im audio Modus

Übersicht

In den letzten Tagen habe ich es endlich wahr gemacht - ich habe einen HTML5 basierten Medienspieler gebastelt. Grund: Nicht etwa, weil es noch nicht genug davon gibt, sondern weil ich wissen wollte, ob ich das hinkriege. Außerdem war es mir wichtig meine Seite frei von youtube und soundcloud tracking cookies bzw auch flash & Consorten zu halten. Also Neugier und Datenschutz.

Technisches

Es wird php benutzt, um ein Verzeichnis nach Mediendateien zu scannen und anschließend daraus eine Playlist zu generieren. Dabei kommt auch die freie Routine getID3() zum Einsatz. Danach wird per JavaScript der Player generiert, die Metadaten geladen und schlußendlich die Mediendaten. Audio und Video läßt sich abspielen.

Mit Hilfe von getID3() lassen sich jede Menge Daten aus Mediendateien auslesen. Was mal vor einiger Zeit dazu da war ein paar Tags aus mp3s auszulesen, hat sich zu einem handfesten Programm entwickelt, was jede Menge Formate versteht. GetID3() ist in php geschrieben und eignet sich somit hervorragend für meine Zwecke.

Damit kann ich schonmal jede Menge Info's in die audio bzw video-Tags hineinbringen, die sich dann später prima mit JavaScript wieder auslesen lassen.

In der Praxis sieht das dann in etwa so aus:

<<?php echo $mediatag; ?> class="cbPlayer_mediacontent" id="cbPlayer_<?php echo $files[$key]["id"]; ?>"
        mediagroup="cbplayer"
        preload="metadata"
        onended="currentMediaId++; playMedia(currentMediaId);"
        onprogress="showMedia(<?php echo $files[$key]["id"]; ?>);"
        oncanplay="activateMedia(<?php echo $files[$key]["id"]; ?>);"
        oncanplaythrough="finishMedia(<?php echo $files[$key]["id"]; ?>);"
        data-artist="<?php echo $files[$key]["artist"]; ?>"
        data-title="<?php echo $files[$key]["title"]; ?>"
        data-album="<?php echo $files[$key]["album"]; ?>"
        data-year="<?php echo $files[$key]["year"]; ?>"
        data-filename="<?php echo rawurlencode($files[$key]["filename"]); ?>"
        data-mediatype="<?php echo $files[$key]["mediatype"]; ?>"
<?php foreach ($files[$key]["type"] as $extkey => $ext) { ?>
        data-filesize-<?php echo $files[$key]["type"][$extkey]["ext"]; ?>="<?php echo $files[$key]["type"][$extkey]["filesize"]; ?>"<?php } ?>>
<?php
   foreach ($files[$key]["type"] as $extkey => $ext)
     { ?>
       <source src="<?php echo "$cbPlayer_dirname/" . rawurlencode($files[$key]["filename"]) . ".{$files[$key]["type"][$extkey]["ext"]}"; ?>" type="<?php echo $files[$key]["type"][$extkey]["mime"]; ?>">
<?php
     } ?>
     </<?php echo $files[$key]["mediatype"]; ?>>

Raus kommt dann im HTML sowas hier, z.Bsp.:

<audio class="cbPlayer_mediacontent" id="cbPlayer_14"
        mediagroup="cbplayer"
        preload="metadata"
        onended="currentMediaId++; playMedia(currentMediaId);"
        onprogress="showMedia(14);"
        oncanplay="activateMedia(14);"
        oncanplaythrough="finishMedia(14);"
        data-artist="Hübi, Ralfi & Chris"
        data-title="The thrill is gone"
        data-album="Summertime Sessions"
        data-year="2005"
        data-filename="15_-_Huebi_Ralfi_Chris_-_The_thrill_is_gone"
        data-mediatype="audio"
        data-filesize-mp3="9330688"        data-filesize-ogg="11673719">
       <source src="content/media/15_-_Huebi_Ralfi_Chris_-_The_thrill_is_gone.mp3" type="audio/mpeg">
       <source src="content/media/15_-_Huebi_Ralfi_Chris_-_The_thrill_is_gone.ogg" type="audio/ogg">
     </audio>

Man beachte hierbei, daß ich da schon alle für mich interessanten Daten aus dem vom getID3 erzeugten Array in ein eigenes übertragen habe, die Variablen heißen bei getID3 ein wenig anders. Da gibts auch ein paar kleine Tücken, Z.Bsp. heißt bei einem mp3-file der "Artist"-Tag. $ThisFileInfo["tags"]["id3v1"]["artist"][0], während derselbe Inhalt für ein ogg so hier aussieht: $ThisFileInfo["tags"]["vorbiscomment"]["artist"][0]. Das ist etwas verwirrend und auch umständlich, da man ja besonders bei Web-Anwendungen immer mp3 und ogg bereitstellen sollte. Ganz ähnlich ist das bei Videos.

cbPlayer im video Modus

JavaScript

Ich hab schon immer gewußt, warum ich mich vor JavaScript gedrückt hab - es ist einfach nur anstrengend (IMHO). Sowas redundantes hab ich noch nicht erlebt. Egal, es ist ja allerhand zustande gekommen. :o)

Z.Bsp. hab ich mich am meisten damit rumgeärgert, daß JS ein ziemlich fragiles Tierchen ist. Im Firefox bleibt sofort alles stehen, wenn man mal irgendwo ein "undefined" nicht sauber abfängt. Chromium war da etwas robuster.

Ich wunder mich auch ein bißchen wofür man für ein bißchen mp3 Abspielen überhaupt solch eine Sprache braucht. Ok, man könnte JS weglassen, dann hat man aber für jedes Medien-Element eine eigene Bedienung, was nicht nur der allgemeinen Übersicht schadet. Also: JS muß her!

Buffering

Das schwerwiegendste Problem ist das Buffern der Metadaten. Ohne diese sind schlichtweg keine JS-Objekte vorhanden und alles bleibt stehen (Object is undefined). Man muß also den preload mindestens auf "metadata" stellen, sonst läuft jeder Versuch die Datei abzuspielen ins Nirvana. Bei preload="auto" stellt sich das Problem bei mehreren Dateien, daß es einfach ewig dauert bis alles runtergeladen wurde. Somit ist preload="metadata" der bessere Kompromiß, mit dem man dann in unerheblich kürzerer Zeit wenigstens schonmal was da hat, was man auch starten kann. Bislang hab ich noch keine Möglichkeit gefunden, das Verhalten des Browsers zu beeinflussen, was wann runtergeladen wird. Firefox stellt sich da ziemlich dämlich an, wenn ich das mal so sagen darf. Da wird alles in einer wirren Reihenfolge geladen, was scheinbar möglichst lange dauert, damit der Nutzer möglichst lange wartet. Chromium war da wesentlich schneller. Der kann allerdings auch die mp3s lesen, im Gegensatz zu Firefox. Das scheint generell schneller zu gehen. Dafür stimmen oft die Metadaten nicht so genau. Da wird z.Bsp. eine Spiellänge von 3:19 angegeben, und die mp3 läuft dann bis 4:25. Ziemlich nervig. Das liegt wohl am VBR, hab ich irgendwo gelesen.

Weitere Eckdaten:

Ich veröffentliche das Ganze unter der GNU GPL v3, so wie auch getID3() unter der GPL3 steht.

Download Quellen: https://github.com/chris-blues/cbPlayer

In freier Wildbahn: https://musicchris.de/index.php?page=media

Update 2015-10-19

Inzwischen liegt Version v0.03 zum Download bereit.

Changelog:

Über Anregungen, Ideen und Verbesserungsvorschläge würde ich mich sehr freuen. Benutzt gerne die Kommentarfunktion hier unten dafür. :o)

Die Entwicklung ist noch nicht vorbei, es ist nur ein erster brauchbarer Zustand. Insofern wird es immer wieder mal Updates geben.

Außerdem würde ich mich sehr über Kommentare freuen, bezüglich der Kompatibilität mit den verschiedenen Browsern. Firefox verschluckt sich manchmal an den vielen Daten, die bei meiner Installation vorhanden sind. Außerdem erwische ich Firefox immer wieder, wie er versucht alle Daten auf einmal herunterzuladen! Chromium und Opera verhalten sich vorbildlich und laden auch nur benötigte Daten herunter. IE und Safari kann ich mangels OS nicht testen... (Gibts Konqueror eigentlich überhaupt noch?)