Datei:
Position:
SubstCount:
Einige Mobile-Browser warten am Anfang auf einen Touch auf den Play-Button.

Der Mini-Html5-Audio-Player

Der Player ist sehr minimalistisch. In lockeren 200 Zeilen JavaScript wird ein Html5-Audio-Element mit den Daten einer kleinen Playliste versorgt. Das Audio-Element kann über normale Html-Formular-Button gesteuert werden. Eine Zeitschleife informiert über die aktuelle Spielposition und sonstige Ereignise.

Der Player erhält die Mp3-Dateien aus einem JavaScript-Array. Im Beispiel werden Dateien von Archive.org verwendet. Die Dateinamen können Http-Adressen sein (http://dir/Band - Titel.mp3) oder, wenn die Dateien im gleichen Verzeichnis wie die Html-Datei liegen, nur die Dateinamen (Band - Titel.mp3). Siehe Html-Quelltext.

Mobile-Browser erwarten meist, dass eine echte Benutzer-Aktion (Touch auf Play) stattfindet, bevor das Audio-Element tatsächlich die erst Mp3 abspielt.

Der Player läuft auch mit Chrome für Android (Stand Aug. 2013). Leider öffnet Chrome die Html-Datei nicht von einem lokalen Speicher (SD/USB). Man muss also z. B. den Http-Server des Routers anwerfen oder einen Mini-Http-Server wie den WebZwerg starten.

Der Android-Browser öffnet zwar die Html-Datei auch von lokalen Speichern, und spielt die Mp3s, wenn sie auf einem Web-Server liegen, er verhaspelt sich aber leider bei lokalen Mp3-Dateien oder teils auch, wenn die Dateien von einem anderen Server kommen wie die Html-Datei.

Ingesamt reagiert Chrome für Android etwas berechenbarer als der Android-Browser, der teils einfach keine Datei mehr nachläd und die aktuelle Länge mit einer Sekunde anzeigt.

Damit die Playlist bei Mobile-Browsern nicht nach jedem Lied neu gestartet werden muss, ist der OnEnded-SubstCounter enthalten. Der fängt immer dann zu zählen an, wenn der Browser vergessen hat die Ereignis-Funktion OnEnded () aufzurufen. Wenn der Zähler über 10 hinaus zählt, wird mit PlayNext () zur nächsten Mp3-Datei geschaltet.

Mit den Buttons Play/Pause wird die MP3-Wiedergabe getriggert. Die Buttons 0...1 setzten die Spielposition.

Wer die Reports nicht sehen will, kann das Div-Element im Html-Quelltext mit "display: none;" ausschalten. Gleiches gilt für den Erklärtext.

Viel Spaß.