Axels Webseite

AMC Player

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

Steckbrief :: AMC Player

Html5 Audioplayer zur Wiedergabe eines Songs in stereo und 5.1 surround

Typ:
Klasse
Download:
Sourceforge: Zip (75 kB)
Source:
Sourceforge
Github
Dokumentation:
Axels Docs (en)
Dies ist ein Audioplayer für den Einbau in die Webseite. Das besondere Merkmal dieses Player ist die Möglichkeit, zwischen stereo und surround Sourcen eines Songs umzuschalten.

Features:
  • Wiedergabe und Umschaltung zwischen stereo und 5.1 surround
  • keine Abhängigkeiten (z.B. jQuery o.ä.)
  • umfangreiche API zum Lesen aller Eigenschaften und Ansteuern von Player-Aktionen
  • Skins
  • Mehrsprachigkeit wird unterstützt
  • Playerfenster lässt sich mit Drag and Drop verschieben (Position wird im Localstorage gespeichert)
  • mehrere Beispiele sind im Download im examples-Verzeichnis enthalten

Lizenz:
  • GNU GPL v3 (Opensource)
Weitere Screenshots:

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
 

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>