Der Audio Player V. 1.6
Der Audio Player nutzt die Fähigkeiten von HTML5-Browsern um Audio-Dateien zu spielen und lässt sogar den IE 8 aussehen, als könnzte er HTML5. Ganz ohne Flash.
Damit der Smart-TV und andere Browser auf lokal eingerichtete HTML-Musikseiten zugreifen können, gibt es den minimalistischen WebZwerg. Der HTTP-Server, der mit einem Doppelklick konfiguriert wird.
Die Beispiel-Tracks stammen aus der Musikabteilung von Archive.org.
Die Infoseiten, die passend zur Musikdatei eingeblendet werden, sind überwiegend Seiten, die die Interpreten selbst ins Netz gestellt haben. Meist ist es eine Jamendo-, MySpace- oder Label-Seite, teils auch die Homepage, eine Wikipedia-Seite oder eine Blog-Seite mit der Künstler-/ Platten-Besprechung. Für bekannte Interpreten empfiehlt sich natürlich die Wikipedia-Seite. Wäre schön, wenn die Indiepedia mal für Ähnliches zu verwenden wäre, bis dahin muss last.fm herhalten.
Bedienung
Im Player-Fenster links unten sind die üblichen Bedienelemente, die man von Jukeboxen kennt (Play/Pause, Voriger, Nächster, Positionsbalken). Die Lieder in der Playlist können auch direkt durch Angeklickt gestartet werden.
Im Player-Menü kann
mit der Option 'Schleife' die Wiedergabe der aktuellen Playlist auf
endlos geschaltet werden,
mit der Option 'Zufall' die Zufallswiedergabe ein-/ausgeschaltet
werden,
per Textfeld 'Stücke' die Anzahl der Lieder pro Playlist eingestellt
werden,
mit der Option 'Band-Info' die Anzeige der Bandseiten ein-/ausgeschaltet
werden.
Bei Wikipedia-Seiten mit IE oder Safari:
Textfeld 'Scrollgeschw.' justiert die Scrollgeschwindigkeit (Pixel/Sekunde),
Optionsfeld WP-Bilder schaltet Bilder ein/aus,
Optionsfeld WP-Cache schaltet den Speicher für Wikipedia-Seiten ein/aus
(RAM-Bedarf: wenn eine Seite etwa 50 kb hat, benötigen 50 Seiten etwa
2,5 MB). Nach 50 verschiedenen Seiten fliegen die Seiten raus, die am
längsten nicht mehr angefordert wurde.
In der HTML-Seite sind etwas mehr als 200 Links zu Tracks bei Archive.org enthalten. Wer die Songs alle hintereinander hören möchte, kann die Option 'Zufall' und 'Schleife' im Player-Menü abwählen, die HTML-Seite reloaden (Taste F5) und dann per Play-Taste im Player die Wiedergabe starten.
Die Lieder sind entsprechend den Free Music Charts von 2007 – 2010 sortiert.
Zoom: Der Fensterinhalt kann mit den Tastenkombinationen Strg + und Strg – vergrößert und verkleinert werden. Strg 0 stellt die Normalgröße wieder her.
Vollbildmodus: Mit der Taste F11 schalten die meisten Browser in den Vollbildmodus und zurück.
Der Audio Player ist mit Firefox, IE8, Chrome und Safari getestet. Infos zum Verhalten (oder Fehlverhalten) mit Nennung des Browsers bitte per Mail an mich.
Rechtliches
Die Lieder sind – so wird das auf Archive.org kommuniziert – alle mindestens CC-by-nc-sa, dürfen also weitergegeben werden, aber nicht kommerziell genutzt werden.Für Rechtehalter: Falls jemand was dagegen hat, dass sein Lied oder seine Internet-Seite im Beispiel verwendet wird oder etwas falsch geschrieben ist oder besser eine andere Datei verlinkt sein sollte usw., bitte einfach eine entsprechende Nachricht per Mail, dann werden die Daten schnellstmöglich geändert.
Sonstiges
Wer gucken will, wie's funktioniert oder ein bisschen modden möchte, muss nur die HTML-Datei lokal speichern (Datei | Speicher unter...) und kann dann mit einem Texteditor im Quelltext stöbern.
Die Daten für die Playlist sind ganz am Anfang der HTML-Datei in einem pre-Tag deponiert. Die Felder (file, artist, title, info) sind durch Tabulatoren getrennt. Die Infos zu einem Lied stehen jeweils in einer Zeile. Alles, was durch weitere Tabulatoren abgetrennt ist, gilt als Kommentar und wird nicht beachtet. Außer den Tabulatoren und Neue-Zeile-Zeichen gibt's nicht viel zu beachten. Natürlich sollten die Lieder auch wirklich vorhanden sein.
Beim Aufruf der Seite wird aus dem Lied-Pool eine Playlist mit
10 Lieder zusammengestellt.
Code: thePlaylist.Take ("filelist");
Anmerkung: Meldungen über tote Links in der Liste, bitte per Mail an mich.
Die Beispiel-Lieder stammen alle von Archive.org. Archive.org empfiehlt sich, weil dort viele Songs als MP3 und als Ogg vorrätig sind. So kriegt auch Firefox was zu spielen. Der Player schaut, was der Browser kann, und modifiziert den Dateinamen entsprechend. Wenn nicht der HTML5-Player sondern der ObjectPlayer benutzt wird (IE 8), wird angenommen, dass kein Ogg-Plugin vorrätig ist und es wird die MP3-Datei gespielt. Wer das anders haben möchte, kann das natürlich ändern.
Falls eine Info-Seite aus dem Rahmen (HTML-Frame) raushüpft, ist das Internet-Pech. Es bleibt nur, eine andere Seite für den Interpreten zu finden und einzutragen oder die Zeile zu löschen.
Erweiterungen/Anpassungen
Menü-Anpassungen
Als einfache Anpassung können z. B. die Voreinstellungen des Player-Menüs angepasst werden. Dazu müssen nur im HTML-Quelltext des Formulars die entsprechenden Änderungen vorgenommen werden.
Eigene Audiodateien
Wer die HTML-Datei mit Links zu eigenen Audio-Dateien bestücken will,
muss vermutlich ein paar kleine Anpassungen für die Dateiart im
JavaScript-Teil vornehmen.
Zurzeit erwartet der JavaScript-Teil, dass die Dateien als MP3 und als Ogg
vorliegen. Das kann aber leicht angepasst werden,
Dafür stehen im <script>-Initialisierungsteil die drei Zeilen
var allowMp3 = true;
var allowOgg = true;
var allowMp3ToOgg = true;
- Nur Mp3-Dateien vorhanden (
Firefox).
var allowMp3 = true;
var allowOgg = false;
var allowMp3ToOgg = false;
- Nur Ogg-Dateien vorhanden (
IEje nach Plugin).
var allowMp3 = false;
var allowOgg = true;
var allowMp3ToOgg = false;
- MP3- und Ogg-Dateien vorhanden aber nicht wahlweise (
Firefox IEje nach Plugin).
var allowMp3 = true;
var allowOgg = true;
var allowMp3ToOgg = false;
Tipp: Die Daten zu den Audiodateien lassen sich am besten bearbeiten, wenn man sie per Zwischenablage in eine Textverarbeitung kopiert, in eine Tabelle umwandelt, nach den Änderungen die Tabellenzellen in Tabulatoren umwandeln lässt, und den Text wieder in die HTML-Datei einsetzt.
Der Audio Player kann mit Online-Songs (MP3-/Ogg-Dateien) und lokalen Medien gefüttert werden (im Gegensatz zum HTML5-Audio-Player, der nur lokal spielt).
Ein paar Datenbank-Erleichterungen
Da sich die Metadaten (Interpret, Titel, Homepage...) der Audiodateien nicht per HTML5 auslesen lassen, müssen die Infos in die Datenbank. Das ist lästig, deswegen gibt es ein paar Erleichterungen.
- Wenn kein 'artist' angegeben ist, versucht die Funktion den Namen
aus dem Dateinamen zu ermitteln. Zuerst wir der Dateiname an den
Zeichenkombination ' - ' getrennt. Außer wenn der Dateiname mit '[VA]'
oder '[OST]' beginnt, wird angenommen, dass der erste Teil der 'artist'
ist. Siehe Funktion GetArtist () in Klasse cPlaylist.
- Wenn kein 'title' angegeben ist, versucht die Funktion den Namen
aus dem Dateinamen zu ermitteln. Zuerst wir der Dateiname an den
Zeichenkombination ' - ' getrennt. Dann wird der letzte Teil genommen
und die Dateiendung entfernt.
- Wenn keine info-Quelle angegeben ist wird '|de|' eingesetzt.
- Wenn in der 'info'-Spalte '|de|' oder '|en|' o. Ä. angegeben ist, wird die
entsprechende Sprachversion der Wikipedia eingesetzt.
- Wenn hinter '|de|' noch weitere Zeichen stehen, wird die
Wikipedia-Adresse damit erweitert, ansonsten wird mit den Zeichen
erweitert, die per Funktion GetArtist () geliefert werden.
- Wenn in der info-Spalte '|lfm|' angegben ist, wird auf die von
GetArtist () passende Last.fm-Seite erweitert.
- Wenn hinter '|lfm|' noch weitere Zeichen stehen, wird die
last.fm-Adresse damit erweitert, ansonsten wird mit den Zeichen
erweitert, die per Funktion GetArtist () geliefert werden.
- Wenn der info-Eintrag mit 'jpg', 'png' oder 'gif' endet, wird der Eintrag als Grafik-Dateinname interpretiert und in einem HTML-img-Tag eingesetzt.
Wer ein gut programmierbares Benennungsschema für seine MP3s hat,
muss also nur noch die Pfade zu den Dateien eintragen. Wenn die Bands
bekannt sind, sollte die deutsche Wikipedia immer eine passende Seite
liefern können. Bleibt nur noch zu erwähnne, dass die Wikipedia manchmal
etwas etepete mit den Adressangaben ist z. B. der Kleingroßschreibung.
Wenn eine Seite nicht geliefert wird, erschein rechts unten auf der
Seite die Fehlermeldung
Grafik statt HTML-Seite als Info
Statt einer HTML-Seite kann in der info-Spalte auch nur eine Grafik angegeben werden. Aber Vorsicht, dass der Grafik-Eigentümer nichts gegen Deep-Links hat!
Verschiedene Playlists in einer HTML-Datei
Mit z. B. den Code-Zeilen...
...kann leicht auf verschiedene Playlist umgeschaltet werden. Die
pre-Tags mit Id "album1" – "album4" müssen dann natürlich mit den Daten
zu wenigstens der Audiodatei gefüllt werden.
function switchPlaylist (playlistNummer) {
switch (playlistNummer) {
case 1: thePlaylist.Take ("album1"); break;
case 2: thePlaylist.Take ("album2"); break;
case 3: thePlaylist.Take ("album3"); break;
case 4: thePlaylist.Take ("album4"); break;
}
theUI.createHtmlList ();
}
<a href="javascript:switchPlaylist(1)">1</a>)
Grüße
Nun also viel Spaß, der Audio Player ist CC-by-sa die meisten Lieder sind CC-by-nc-sa.
PS: Einge Funktionen sind nicht wirklich im Detail getestet. Falls sich Fehler zeigen, bitte eine entsrechende Nachricht mit Hinweis auf den Fehler per Mail an mich.
Änderungen
V. 1.1 Erste Veröffentlichung (10. Sept. 2011).
V. 1.2 Positionanzeige und -veränderung per Balken.
V. 1.3 Wikipedia-Links scollen, wenn der Browser die Seite per Http-Request lesen kann.
V. 1.4 Datenbank-Erleichterungen für die Datenpflege.
V. 1.5 Datenbankeinträge optimiert und ein paar Kleinigkeiten bereinigt.
V. 1.6 Neue Klasse cPicInfo für Bilder als Info. Speicherklasse für Wikipedia-Seiten. Kleine Änderung in der WP-Replace-Funktion.