AMC Player

Javascript - AMC Player (HTML5 Player) für die Wiedergabe meiner Songs in stereo und 5.1 surround

Einleitung

For information in English see the Docs.

Ich suchte nach einem gescheiten Weg, meine Songs, die in stereo als auch 5.1 surround vorliegen, auf der Webseite abspielbar zu machen. Es gibt zahlreiche HTML5- oder Flashplayer, die die Wiedergabe in stereo beherrschen. Aber scheinbar nichts, wo ich zwischen stereo und surround wechseln kann. Also begann ich, einen eigenen Player zu schreiben.

So entsteht derzeit ein Player, der alle AUDIO-Tags eines HTML-Dokuments durchparst und zu einer Playlist zusammenfasst. Die eigentlichen Audio-Tags werden versteckt und duch "Play-Buttons" ersetzt.
Das AMC steht für Axels Multi Channel Player.
Der AMC Player ist frei von irgendwelchen Frameworks (wie jQuery); Animationen basieren auf Javascript und CSS3.

 

Lizenz:
GNU GPL v 3.0

Status:
Das Javaskript ist im Beta-Stadium. Ich habe noch ein paar Ideen, die ich zur ersten Version umzusetzen gedenke. Derzeit werden Skins, Mehrsprachigkeit und API-Aufrufe unterstützt. Im Download ist eine Dokumentation mit mehreren interaktiven Beispielen enthalten.


amcplayer-v020-player-default.jpg

amcplayer-v020-player-lightgreen.jpg

amcplayer-v020-player-dark-gray.jpg
 

Live sieht man den AMC Player auf der Seite meiner Songs: Axels Songs

Installation

Download

Holen der Dateien:(siehe Links in der rechten Spalte)

  • Lade die Zip-Datei von Sourceforge herunter.
  • Dekomprimiere die Dateien unterhalb eines Webroots. Die Dateien können in einem beliebigen Unterverzeichnis abgelegt werden.

ODER
Mit einem Svn-Client das Repository auschecken. Diese Variante macht es einfacher, die Dateien stets aktuell zu halten.

  • Gehe ins Webroot
    cd [Webroot-Verzeichnis]
  • Checkout des trunks
    Dieses Kommando legt das Unterverzeichnis "amcplayer" an und holt die aktuelle Version:
    svn checkout http://svn.code.sf.net/p/amcplayer/code/trunk amcplayer

Einbindung in die Webseite

Hinweis
Diese Beschreibung zeigt, wie man die Beta-Version zum Laufen bringt. Bis zur finalen Version kann sich dies noch ändern.

Auf dem Webserver sind vom Player minimal abzulegen:

  • eine CSS-Datei
  • eine Font-Datei
  • eine Javascript-Datei

Zur Einbindung in die braucht es

  • eine CSS-Datei
  • eine Javascript-Datei
  • Audio-Tags mit den Medien

Beispiel:

  <!doctype html>
  <html>
  <head>

    (...)
    <link rel="stylesheet" type="text/css" href="/javascript/mcplayer/mcplayer.min.css" media="screen" />
    (...)

  </head>
  <body>

    (...)
    (die Audio-Tags stehen im BODY-Bereich ... siehe unten)
    (...)

    <script type="text/javascript" src="/javascript/mcplayer/mcplayer.min.js"></script>
    <script>
        var oMcPlayer=new mcPlayer();
        oMcPlayer.init();
    </script>

  </body>
  </html>
  


Nun zu den Audio-Tags...

Wie schon erwähnt, erkennt das Player-Skript die Audio-Tags im HTML-Dokument.
Das HTML5-Audio-Tag und eine Standardisierung ist schön, aber was man aber wissen muss, ist, dass die verschiedenen etablierten Webbrowser jeweils unterschiedliche Formate handhaben können.

Aktuelle Webbrowser spielen stereo-Audios in MP3 oder aber OGG ab.

Die Wiedergabe von surround-Mediafiles ist in Firefox und Opera nicht möglich - wohlaber unter MS Internet Explorer oder Chrome. Die Surround-Audio-Dateien sind als Mpeg4 (aac) und OGG anzubieten.

Audio-Tag
Die Attribute loop und controls kann man frei definieren. Sie sind für die Anzeige relevant, wenn kein Javascript aktiv ist.
Im Audio-Tag ist das Attribut preload="none" anzugeben. Ansonsten kann es bei vielen Songs im Dokument sein, dass der Webbrowser zig Megabyte beim Aufruf einer Seite versucht im Voraus zu laden.
Der Titel eines Songs ist im Title-Attribut des Audio-Tags mitzugeben.

Sourcen
In jedem Audio-Tag sind alle Medien im Source-Tag für stereo und danach die für surround anzugeben. Damit der AMC Player weiss, welche Quelle in welchem Format vorliegt, braucht es eine zusätzliche Angabe. Ursprünglich wollte ich die html5-konform ein data-Attribut verwenden. Nur leider versteht dies der IE 9 nicht.
Kurzum: ich werte derzeit das Title-Attribut im Source-Tag aus.

So sieht die Definition eines einzelnen Songs in stereo und 5.1 aus:

  <audio loop="loop"
    controls="controls"
    preload="none"
    title="Mein Song"
    >
    <source src="/download/song_2.0_.ogg" type="audio/ogg" data-ch="2.0" title="2.0" />
    <source src="/download/song_2.0_.mp3" type="audio/mp3" data-ch="2.0" title="2.0" />
    <source src="/download/song_5.1_.m4a" type="audio/mp4" data-ch="5.1" title="5.1" />
    <source src="/download/song_5.1_.ogg" type="audio/ogg" data-ch="5.1" title="5.1" />

    <!-- als Fallback hier einen Flashplayer einbinden -->

  </audio>