name="description">


E-Toys

E-Mail an Thilo Brai

Zur Homepage

Der HTML5-Audio-Player

Download für Firefox, Chrome, Safari, Opera und IE9, circa 163 kB V 0.3 HTML5-Player.zip

Der HTML5-Audio-Player ist ein Musik-Player, der komplett in HTML läuft. Alles was man braucht, ist ein Browser, der das HTML5-Audio-Tag kennt (z. B. Firefox, Chrome, Safari, Opera oder IE9) und ein paar MP3- oder Ogg-Dateien (Wave für Opera). Hier ist noch ein anderer Audio-Player, der gleich online einiges demonstriert.

> Die Features
> Wie kriegt man den Player zum Laufen?
> Wie kann man eigene Audiodateien wiedergeben lassen?
> So funktioniert's
> So spielt's
> Was läuft während des Spielens?
> Gratis-Mp3s für das Player-Beispiel (für Chrome, Safari, IE9)
> Gratis-Oggs für das Player-Beispiel (für Firefox, Chrome)
> Das Extra-Feld in der Datenbank
> Albumdateinamen & Datenbank
> Anregungen

Bildschirmfoto vom HTML5-Audio-Player

Die Features

Der Player kennt alle Standardfunktionen eines Audio-Players (play, pause, rewind [<<], fast forward [>>]), die über das Audio-Tag im HTML-Quelltext programmiert werden. Zusätzlich kann per Mausklick an eine Position der Zeitleiste gesprungen werden, oder eine Liedposition mit dem Speicher-Button (mem) gemerkt und mit dem Repeat-Button (rpt) abgerufen werden.

Da die ganze Funktionalität und das Aussehen des Players über HTML gesteuert wird, können beliebig weitere Funktionen dazukommen oder bestehende abgeändert werden.

Wie kriegt man den Player zum Laufen?

Man braucht natürlich ein paar Sounddateien. Weiter unten sind ein paar Download-Links für Mp3- und Ogg-Dateien, die zu den bereits im HTML-Quellkode integrierten Audio-Datensätzen passen.

Die Dateien kopiert man in das Verzeichnis, in das man auch den HTML5-Player entzippt hat. Beim Entzippen sollte das Unterverzeichnis Covers erzeugt werden, in dem schon ein paar zu den Audio-Dateien passende Bilder enthalten sind.

Nachdem die Sounddateien im Verzeichnis sind, kann man den HTML-Player im Browser laden und die Wiedergabe z. B. mit einem Mausklick auf einen Link einer Sounddatei starten.

Wie kann man eigene Audiodateien wiedergeben lassen?

Leider ist es nicht möglich mit Javascript die Dateien eines Verzeichnisses einzulesen. Das heißt, man muss dem Player die Dateinamen zur Verfügung stellen. Beim HTML-Player ist das so gelöst, dass die Dateinamen in einem als verborgen formatierten HTML-Element aufgelistet sind.

Ganz am Ende der HTML-Datei stehen im Quellkode zuerst die Dateinnamen der MP3-Dateien und dann die Dateinname der Ogg-Dateien.

Damit auf der HTML-Seite etwas Passendes angezeigt wird , sind den Dateinamen noch ein paar Infos beigestellt (album, year, extra). Die Dateinnamen sind Pflicht, die anderen Felder sind Kür.

Die passenden Audio-Dateien gibt's zum kostenlosen Downloaden (Mp3-Dateien, Ogg-Dateien).

So funktioniert's

Beim Laden der HTML-Seite überprüft das Javascript in der cPlayer-Klasse in der Init ()-Funktion die Audio-Fähigkeiten des Browser. (Natürlich sollte man diese Funktion den eigenen Erfordernissen anpassen. Wer nur Mp3s spielen will, kann sich den Ogg-Teil schenken)

Je nachdem was die canPlayType ()-Funktion liefert, werden die Ogg- oder die Mp3-Dateinamen in die Mini-Datenbank-Klasse cMediaDB geladen. Mit den Daten wird der dynamische Teil der HTML-Seite in der Funktion createList () aufgebaut. In createList () wird für jeden Audio-Dateinamen (nach Möglichkeit) der Interpret und der Titel ermittelt und mit dem Dateinamen als HTML-Link kombiniert in eine wachsende Textvariable geschrieben. Nach jeweils zehn Einträgen wird eine Überschrift (H2) eingefügt, an der später beim Spielen die Albumbilder festgemacht werden.

Der fertige HTML-Text wird dem HTML-Div-Elemet id="List" zugewiesen und angezeigt.

So spielt's

Am Einfachsten spielt man eine Audiodatei, indem man den entsprechenden Link in der HTML-Seite mit der Maus anklickt. Man kann die Wiedergabe aber auch mit einem Mausklick auf den Play-Schalter im Kontrollfeld starten. Wer mag, kann den Player durch Anpassen der Onload-Funktion auch automatisch starten lassen.

Was läuft während des Spielens?

Während des Spielens wird fortlaufend die Spielposition des Audio-Elements abgefragt und im Kontrollfeld angezeigt. Mit einem Mausklick in der Zeitachse des Kontrollfelds, kann man an verschieden Positionen in der Audio-Datei springen.

Nachdem eine Audio-Datei abgespielt ist, wird das nächste Stück wiedergegeben. Das Albumbild des neuen Stücks wird angezeigt und eventuell vorhandene, zusätzliche Informationen werden auf der HTML-Seite aktualisiert.

Gratis-Mp3s für das Player-Beispiel (für Chrome, Safari, IE9)

Einfach die Dateien, wie sie von der Website kommen in den Ordner mit dem HTML5-Player legen. Die Dateinamen sollten passen.

(Bitte eine Nachricht, wenn man einzelne Lieder nicht mehr downloaden kann.)

Gratis-Oggs für das Player-Beispiel (für Firefox, Chrome)

Wer den Player mit dem Firefox ausprobieren möchte, kann sich die Oggs für das Beispiel bei der Seite des Open Music Contest (OMC 2005) vom AStA Marburg holen. (Vor dem Download darauf achten, dass die Oggs und nicht etwa die Flacs runter geladen werden!)

Einfach die Dateien, wie sie von der Website kommen in den Ordner mit dem HTML5-Player legen. Die Dateinamen sollten passen.

Das Extra-Feld in der Datenbank

Im Extra-Feld können all jene Informationen untergebracht werden, die nicht bei jeder Audio-Datei vorhanden sind, und für die man keine gesonderte Tabellenspalte einrichten möchte. Beim Mp3-Beispiel sind das die Genre-Bezeichnungen, beim Ogg-Beispiel wird die automatische Anzeige der Interpreten und Titel verbessert, weil die Dateinamen eine etwas eigenwillige Konvention haben.

Bevorzugte Konventionen in SplitFilename () sind z. B:
Der Interpret - Der Titel.mp3
Der Interpret - Das Album - Der Titel.mp3
Der Interpret - Das Album - Tracknummer - Der Titel.mp3
[VA] Der Sampler - Der Titel.mp3
[OST] Der Soundtrack - Der Interpret - Der Titel.mp3
[VA] Der Sampler - Der Interpret - Track - Der Titel.mp3

Am besten ist, man passt SplitFilename () den Namenskonventionen der eigenen MP3-Sammlung an, dann werden die Namen für die dynamische HTML-Liste automatisch richtig erzeugt.

Albumdateinamen & Datenbank

Normalerweise bildet sich der Albumname aus Interpret - Titel.jpg. Für Sampler oder Soundtracks kann man [VA] oder [OST] voranstellen, der Interpret  wird dann nicht davorgestellt z. B. [VA] Woodstock.jpg. Wer nur ein Bild zum Lied zeigen will, der kann dem Bildnamen in der Datenbank einen Punkt voranstellen, dann wird der Datenbankeintrag (ohne Punkt) als Bildnamen genommen. Wenn nur ein Punkt in der Spalte Album steht, wird der Interpret alleine genommen z. B. Johnny Cash.jpg.

Sonstiges & Anregungen

Wenn kein Laut ertönt: • Erscheint am unteren Ende der HTML-Seite eine Fehlermeldung? • Stimmen die Dateinamen exakt überein? • Befindet sich die MP3-Datei am richtigen Platz? • Kann der Browser die Datei wiedergeben, wenn man sie direkt in sein Fenster zieht?

Wenn kein Albumbild erscheint: • Befindet sich das Bild im richtigen Verzeichnis? • Stimmen die Dateinamen exakt überein? • Hat das Bild die richtige Dateiendung (jpg)? • Kann der Browser das Bild anzeigen, wenn man es dierkt in sein Fenster zieht?

ToDo-List:

Eine Loop- und Zufallsfunktion sollte auch noch eingebaut werden.

Es wäre sicherlich interessant, den Player als Online-Player in einem kleinen Netzwerk zu verwenden, und ihn die Audio-Dateien über Http-Links laden zu lassen.

Schön wäre, wenn man Textgrößen und Bildschirmaufteilungen während des Spielens ändern könnte.

Für größere Playlists könnte man noch verschiedene Sortierfunktionen (Alphabet, Album, Jahr usw.) einbauen.

Jede Menge Möglichkeiten. Viel Spaß bei eigenen Entwürfen und Experimenten mit dem HTML5-Audio-Player.

Zum Seitenanfang

Zur Homepage