Die Dokumentation zum iePlayer

iePlayer spielt Musikdateien und Filme. Gestartet werden die Mediendateien über Mausklicks in den HTML-Seiten oder über Playlists.

> Die Story
> Die Möglichkeiten
> Die Voraussetzungen
> Das Startprojekt
> Die Steuerung
> Der HTML-Generator
> Layouts für den HTML-Generator
> Technische Informationen
> Sonstiges

 

Screenshot vom iePlayer

Die Story 

iePlayer wurde programmiert, weil es mir zu öde war meine MP3s einfach 'nur so' abzuspielen. Die ganzen digitalisierten LPs lagen auf der Festplatte 'rum und setzten schon wieder Staub an. Ich wollte zumindest eine gefällige Darstellung der Interpretennamen und der Song-Titel und evtl. noch ein Bild dazu.

Nach anfänglichen Versuchen HTML-Dateien zu schreiben, die den Zugang zu den MP3s mit dem Internet Explorer gestatten, ist der iePlayer nun mit der MFC-Klasse CHtmlView realisiert.

Die Möglichkeiten 

Die Voraussetzungen 

Das Startprojekt 

Die Steuerung 

Die Schalterflächen in der ersten Zeile: Start-/Pause-/Weiter-Schalter, Skip-Schalter, Stopp-Schalter, Liedposition, Lieddauer-Anzeige und der Menüschalter.

Die Schalterflächen am linken Rand: Spielliste starten/stoppen, An die Spielliste anhängen, Aus der Spielliste löschen, Eintrag nach unten schieben und Eintrag nach oben schieben.

Das Listenfeld zeigt die evtl. geöffnete Spielliste an.

Der Menüschalter/Das Steuerung-Menü

Der Menüschalter öffnet ein Pop-Up-Menü. Die Menüeinträge: Spielliste öffnen..., Spielliste speichern..., Automatisch Spielliste erzeugen, Spielliste mischen, Drag 'n' Drop MP3s..., Einstellungen....

Eine Spielliste öffnen und starten

Eine Spielliste erzeugen I

Eine Spielliste erzeugen II

Eine Spielliste erzeugen III

Eine Spielliste erweitern

Eine Spielliste Speichern

Die Einstellungen

Stellen Sie hier ein, welche Dateiarten als Audio-/Videodatei wiedergegeben werden sollen. Die Dateiarten .mp3, .wav und einige andere, die ohne Zustun funktionieren sollten, sind voreingestellt.

Der HTML-Generator 

Hinweis: Der HTML-Generator kann ohne HTML-Kenntnisse bedient werden!

Da es einigermaßen mühsam ist all die HTML-Seiten für die ganzen MP3s zu schreiben, gibt es etwas Hilfestellung vom iePlayer.

Wie man ohne HTML-Kenntnisse (etwas Computer-Verständnis) seine MP3s verlinken kann, wird in den folgenden Abschnitten an dem kleinen Startprojekt gezeigt.

Das Startprojekt kann dann anschließend zur eigenen MP3-Player-Station ausgebaut werden.

Das Startprojekt vorbereiten

Schritt 1: Die HTML-Datei erzeugen

 

Damit die eben erzeugte Datei info.html korrekt angezeigt werden kann, muss die Verzeichnisliste noch aktualisiert werden. Wie das geht wird gleich erklärt. Keine Angst, das kann jeder, der schon mal das Gefühl hatte, der Computer tut was Vernünftiges, auch wenn man es ihm mit der Tastatur sagt ;-)

Schritt 2: Die Verzeichnisliste aktualisieren

Das Startprojekt ausbauen

Nun, nachdem klar, ist wie einfach man MP3s verlinken kann, steht dem Ausbau des Startprojekts nichts mehr im Wege. Das Vorgehen ist immer das gleiche:

  1. Ein neues Verzeichnis neben den anderen MP3-Verzeichnissen erstellen.
  2. Die MP3s und das Bild cover.jpg in das Verzeichnis legen.
  3. Im iePlayer die Datei info.html für die MP3s erzeugen und im gleichen Verzeichnis wie die MP3s speichern.
  4. Die Verzeichnisliste auf den neuen Stand bringen.
  5. Und die Anzeige aktualisieren.
  6. Man sollte dann gleich die neue Seite testen: funktionieren die Hyperlinks, sieht alles so aus wie erwartet...
 

Man kann die Sammlung auch auf CD oder DVD brennen. Der iePlayer ist direkt von CD/DVD startbar, wenn man die Dateien iePlayer.exe, index.html, das Verzeichnis .data und die MP3-Verzeichnisse auf auf die CD/DVD brennt.

Hinweis: Es ist entscheidend die richtige Verzeichnisstruktur einzuhalten. Wenn die Datei index.html im Verzeichnis c:/Musik liegt, sollten alle MP3- und HTML-Dateien eine Verzeichnisebene tiefer liegen, zum Beispiel in c:\Musik\XY-Gruppe, c:\Musik\ABC-Interpret usw. Nur dann werden die Stilvorlagen und Scripts gefunden und funktionieren richtig.

Wenn man tieferliegende Verzeichnisse benutzen will, muss man die relativen Pfadangaben auf die CSS- und die JavaScript(js)-Dateien anpassen.

Für die CSS-Datei wird
<link rel="STYLESHEET" type="text/css" href="../.data/styles.css">
erweitert zu z. B.
<link rel="STYLESHEET" type="text/css" href="../../.data/styles.css">

und für die JavaScript-Datei wird
<script src="../.data/Info.js" type="text/javascript">
erweitert zu z. B.
<script src="../../.data/Info.js" type="text/javascript">

und schon funktioniert wieder alles.

Layouts für den HTML-Generator 

Dieser Abschnitt erfordert HTML-Kenntnisse.

Der HTML-Generator benutzt auf Wunsch bei der HTML-Erstellung externe Layouts. Der Aufbau der Layout-Dateien kann gut verstanden werden, wenn man sich das folgende einfache Schema vorstellt:

  1. Man hat MP3-Dateien mit einem Dateinamen, der -- im Idealfall -- der Liedname plus der Dateierweiterung mp3 ist.
    Das wird vom Layout Song erledigt.
  2. Die Songs stammen von einer LP mit einem LP-Namen und man hat ein digitalisiertes Plattencover.
    Das wird vom Layout LP abgedeckt.
  3. Die LP (oder LPs) stammt von einem Interpreten oder einer Band.
    Dieser Teil wird vom Layout Body übernommen.
 

Es fehlen nur noch einige Marken, die dem Generator ermöglichen die einzelnen Vorlagenteile zu erkennen (im Beispiel unten in fetten Buchstaben).

Eine maximal einfache Vorlagendatei, die alle diese Features realisiert wäre:

<!-- Layout Body -->
<html>
<body>
<h1>%_HEAD_%</h1>
%_LPS_%
</body>
</html>

<!-- Layout LP -->
<h2>%_LP_%
<a name="%_LP_ANKER_%">&nbsp;</a></h2>
<img src="%_LP_PICTURE_%">
<ol>
%_SONGS_%
</ol><br clear=all>

<!-- Layout Song -->
<li><a href="%_SONG_%">
%_SONG_FRIENDLY_%</a>

Die Platzhaltermarken von unten nach oben:

 

Hinweis: Die Layout-Teile müssen in der Layout-Datei in der Reihenfolge <!-- Layout Body -->, <!-- Layout LP --> und <!-- Layout Song --> vorliegen.

Hinweis: Die einleitenden Layout-Teil-Kommentare müssen bis zu den Texten Body/LP/Song exakt richtig geschrieben sein. Die Body/LP/Song-Kommentare werden nicht in die HTML-Datei geschrieben.

Tipps: Je einfacher die HTML-Dateien aufgebaut sind desto einfacher findet man sich bei Wartungsarbeiten zurecht. Mit Stylesheets kann man sich viel Formatiertext sparen. Bevor man die Großproduktion anfängt, schadet es nichts, die erzeugten HTML-Dateien mal mit einem HTML-Validator zu prüfen (sollte ich auch mal machen). Im iePlayer-Archiv befindet sich die Datei Standard.layout die, zusammen mit Info.js, einiges von der Funktionalität vom iePlayer enthält.

Wenn ein Layout erfolgreich geladen wurde, bleibt es aktiv, bis ein neues Layout geladen wird. Wenn beim Öffnen eines Layouts ein Fehler auftritt, wird das interne Standard-Layout aktiviert und bleibt aktiv, bis ein fehlerfreies Layout geladen wird.

Beim Erzeugen neuer Info.html-Dateien wird geprüft, ob ein User-Layout in der Registrierdatenbank gespeichert ist. Wenn ja, wird dieses Layout verwendet. Wenn nicht , wird ein internes Layout genutzt.

Technische Informationen  

Dieser Abschnitt ist nur interessant, wenn man seine eigenen Vorstellungen der HTML-Seiten verwirklichen möchte und die Möglichkeiten des HTML-Generators nicht ausreichen.

Um diesen Abschnitt zu verstehen sind HTML-Kenntnisse erforderlich.

Das Frameset

Damit alles so funktioniert, wie es soll, ist ein Frameset notwendig. Das Frameset muss einen Frame mit Namen Info enthalten. Im Info-Frame werden die Links auf die Songs erwartet.

<frameset cols="20%, 80%">
<frame src="IrgendEin.htm" name="IrgendEinName">
<frame src="Info.htm" name="Info">
</frameset>

Der andere Frame kann zu was auch immer genutzt werden.

MP3s starten

Die MP3s sollten in einem a href-Tag verpackt sein, sonst werden Sie nicht gefunden. Man kann Sie dann vielleicht manuell in einem JavaScript starten, die automatische Weiterschaltung funktioniert aber ziemlich sicher nicht.

Eine MP3 mehrmals auf einer Seite referenzieren

Wenn eine MP3-Datei mehrmals auf einer Seite auftauchen soll (zum Beispiel weil der selbe Song auf mehereren LPs erschien), kann man die Referenz des ersten Dublikats mit ,1 erweitern, zum Beispiel End Of The Night.mp3,1. Die richtige Abspielreihenfolge ist dann gewährleistet. Der HTML-Generator nimmt diese Erweiterung automatisch vor.

Meta-Info-Links

Mit den speziellen Meta-Info-Links können die Meta-Informationen aus MP3-, WMA- und Ogg-Dateien ausgelesen werden. Die Links werden zu speziellen Links, weil sie mit der Zeichenfolge .metaSubst enden. An .metaSubst kann dann noch eine Zeichenfolge angehängt sein, die angibt, in welchem Frame die neue Seite geöffnet werden soll. In den Beispielen unten wird _blank angehängt, damit ein neues Fenster geöffnet wir. Man könnte die Links aber auch mit z. B. .metaSubstInfo enden lassen, dann würden die neuen Fenster im Frame Info geladen werden. 

Natürlich können die Links auch auf lokale Dateien verweisen. Es wäre z. B. möglich die Titel einer HTML-Datei zu übergeben, in der ein JavaScript-Programm die Infos dann wieder ausliest und die Inhalte der HTML-Dateien anpasst usw.

Die Meta-Informationen, die man ausgelesen haben will, werden in ein doppeltes Klammernpaar gesetzt. Im einfachsten Fall sieht das für einen Interpreten so aus: [[Interpret]]. Wenn man den Interpreten z. B. an Google übergeben will, ist es meist sinnvoll die Suchwörter für die Google-Engine mit Anführungszeichen zusammenzufassen, damit die Suchtreffer von Google auch wirklich treffen. Das würde, wenn man einen vollen Namen bei Google eingibt, etwa so aussehen: "The Black Keys". Weil Sonderzeichen in Internet-Adressen speziell kodiert werden müssen, würde der entsprechende Abschnitt im Meta-Info-Link so aussehen: [%22[Interpret]%22]. Die beiden %22 sind die Hexadezimalkodierung der ASCII-Werte der Anführungszeichen. Die ASCII-Werte können z. B. hier (mit dem ASCII-Button) aufgerufen werden.

Beispiel, neues Fenster mit der englischen Wikipedia und dem Interpreten des momentan gespielten Lieds öffnen:
<a href="http://en.wikipedia.org/wiki/[[Interpret]].metaSubst_blank">Wikipedia (Interpret)</a>

Beispiele, Google mit dem Interpreten und dem Titel (Pluszeichen im Title-Klammernpaar beachten) des momentan gespielten Lieds aufrufen:
<a href="http://www.google.de/search?q=[%22[Interpret]%22][+%22[Title]%22].metaSubst_blank">Google (Interpret Titel)</a>

Da die verschiedenen Dateiformate ihre Meta-Informationen mit verschiedenen Bezeichnungen speichern, sorgt der iePlayer dafür, dass bei der Frage nach [[Interpret]] bei MP3s der Eintrag für TPE1 und bei Ogg alternativ die Einträge für Artist oder Performer geliefert werden.

Folgende Übersetzungen existieren:
Interpret: Interpret, TPE1, Artist, Performer.
Title: Title, TIT2.
Album: Album, TALB.
Year:  Year, TYER, Date.
Comment: Comment, COMM, Comments.
Track:  Track, TRCK, Tracknumber.

Bei MP3 werden folgende Meta-Infos gespeichert:
COMM (Comments), MCDI (Music CD identifier), PCNT (Play counter), POPM (Popularimeter), RVAD (Relative volume), TALB (Album), TBPM (beats per minute), TCOM (Composer), TCOP (Copyright message), TDAT (Date), TEXT (Text writer), TIME (Time), TIT1 (Content group description), TIT2 (Title), TIT3 (Subtitle), TLAN (Language), TOAL (Original album), TOFN (Original filename), TOLY (Original text writer), TOPE (Original artist), TORY (Original release year), TPE1 (Lead performer), TPE2 (Band), TPE3 (Conductor), TPE4 (Interpreted, remixed, or otherwise modified by), TPUB (Publisher), TRCK (Track number), TRDA (Recording dates), TRSN (Internet radio station name), TRSO (Internet radio station owner), TSIZ (Size), TSRC (ISRC), TYER (Year), TXXX (User defined text information frame), USER (Terms of use), USLT (Unsychronized lyric), WCOP (Copyright), WOAF (Official audio file webpage), WOAR (Official artist/performer webpage), WOAS (Official audio source webpage), WPUB (Publishers official webpage), WXXX (User defined URL link frame).

Die MCDI-Info könnte also z. B. auf die folgende Art für die Datei showInfo.htm ausgelesen werden, die in den HTML-Frame Info2 geladen wird:
<a href="showInfo.htm?m=[[MCDI]].metaSubstInfo2">Zeige Music CD identifier</a>
Dieses Beispiel eignet sich z. B. auch für eine automatisierte Abfrage der Meta-Infos mittels JavaScript-Progarmm, das beispielsweise alle 3 Sekunden aufgerufen wird. Es entsteht im iePlayer dabei kaum Mehraufwand, weil die Meta-Infos nur neu eingelesen werden, wenn sich der Dateiname der angefragten Mediendatei geändert hat. Das JavaScript selbst braucht freilich seine Zeit.

Hinweis: Es werden bei Ogg- und MP3-(ID3v2-)Dateien nur die Meta-Infos ausgewertet, die innerhalb der ersten 32.000 Bytes liegen. Bei WMA-Dateien werden die erste 65.000 Bytes gescannt.

Command-Links

Mit Command-Links können die wichtigsten Player-Kommandos über HTML-Links aufgerufen werden. Command-Links enden mit der Zeichenfolge .command.

Einige selbsterklärende Beispiele:
<a href="play.command">Start</a>
<a href="pause.command">Pause</a>
<a href="next.command">Nächstes</a>
<a href="stop.command">Stopp</a>

Und noch einige experimentelle Kommandos, die eingebaut sind, aber sich in der Syntax eventuell noch ändern können:
reposition(50).command – die Abspielposition auf 50 Sekunden setzen.
reposition(50%).command – die Abspielposition auf 50 Prozent setzen.
playlist.command – die Playliste abspielen.
stoplist.command – die Playliste-Wiedergabe stoppen.
addtoplaylist.command – den aktuellen Track an die Playliste anhängen.
deletefromplaylist.command – den markierten Track aus der Playliste löschen.
playlistselect(1).command – den Track an der Playlistenposition 1 markieren (Basis 0).
playlistunselect.command – Playlistenmarkierung aufheben.
moveup.command – markierten Track in der Playliste um eins vorstellen.
movedown.command – markierten Track in der Playliste um eins nach unten schieben.
openplaylist('Silvester 2008.playlist').command – die genannte Playliste öffnen.</a>
saveplaylist('Silvester 2009.playlist').command – die Playliste speichern</a>
autoplaylist.command – schaltet den Menüpunkt Automatische Spielleiste erzeugen um.
mixplaylist.command – mischt die Spielliste.

Slideshows

Ich kann mir vorstellen, dass jemand eine Spielliste hat und dazu mehr Bilder zeigen will als MP3s vorhanden sind.

Dazu kann man zum Beispiel die JavaScript-Funktion hi () aus Info.js oder ein eigenes Script modifizieren, das nach einer vorgegebenen Zeit (z. B. 10 Sekunden) auf eine andere HTML-Seite umgeschaltet wird usw. Es gibt aber auch script-lose Lösungen dieses Problems (siehe SelfHTML).

Der iePlayer mischt sich erst wieder ins Geschehen, wenn die MP3-Datei fertig gespielt hat. Er spielt dann z. B. die nächste Datei der Playlist oder die MP3-Datei, die auf die gerade fertiggespielte in der HTML-Datei folgen würde, die zum Startzeitpunkt der gerade beendeten MP3-Datei folgen würde.

Die Standarddateien  

iePlayer.exe -- das Programm.

index.html -- die Haupt-HTML-Datei mit dem Frameset.
.data\index-List.html -- wird im Frameset in die linke Spalte geladen, enthält die Navigation.
.data\index-Info.html -- die Hauptanzeige mit den MP3-Hyperlinks.
.data\index-Head.html -- die Kopfzeile mit der Hauptüberschrift.
.data\styles.css -- Stylesheet-Datei für die HTML-Seiten.
.data\Info.js -- JavaScript-Datei für die info.html-Dateien.

.doku\Dokumentation.html -- die Dokumentation zum Programm.
.doku\styles-d.css -- Stylesheet-Datei für die Dokumentation.
.doku\*.gif -- Bilder für die Dokumentation.

Sonstiges 

Version 1.3 -> 1.4

  1. UTF-8-Unterstützung. Wenn HTML-Seiten in den Meta-Tags ein charset=utf-8 enthalten, funktioniert nun auch die automatische Trackweiterschaltung bei Dateinamen mit ASCII-Zeichen größer 127.
  2. Spezielle HTML-Links zur Player-Steuerung.

Version 1.2 -> 1.3

  1. Spezielle Links zum Auslesen von Meta-Informationen aus MP3- und Ogg-Dateien.

Version 1.1 -> 1.2

  1. Anpassungen für den Internet Explorer 7.
  2. Änderungen in der Info.js-Datei.
  3. Die MP3-Links zu geänderte HTML-Dateien werden jetzt schneller aktualisiert.
  4. Playlisten können sanft (ohne Liedabbruch) gestartet und gestoppt werden.
  5. Über das Menü Steuerung > Einstellungen ...InformationenPrüfe HTML-Media-Links kann man nun schnell die Media-Links der aktuelle Info.HTML-Seite prüfen.
  6. Wenn das Steuerungsfenster mit Esc geschlossen wurde, wird es jetzt durch Menü: Steuerung > Einstellungen ... wieder geöffnet.
  7. Die Titelleiste hat ein Icon bekommen.
  8. Einige Korrekturen für UNC-Pfade.

Version 1.0 -> 1.1

  1. Filme (avi, mpg ...) können im großen Programmfenster dargestellt werden.
  2. Einige Dateipfad-Auflösungen wurden robuster programmiert. Pfade können nun auch Rückwärtsreferenzen enthalten (z. B. ../Sampler/Toure.mp3).
  3. Ein Medienlink kann einen Startpunkt einen Endpunkt für die Wiedergabe enthalten: Der Link <a href="Woodstock.avi,Start=2:36:40:00"> spielt die Datei ab dem Offset 2 h 36 m 40 s 0 hs ab (Santana). Der Link <a href="Woodstock.avi,Start=38:37:0,Stop=46:07:0"> spielt die Datei ab dem Offset 38 m 37 s 0 hs ab und endet bei der Position 46 m 07 s 0 hs (Canned Heat).
  4. Die Spiellängenangabe für VBR-kodierte MP3s wird besser angezeigt. Es kann sein, dass der Slider, der die Spielposition anzeigt, gegen Ende des Lieds stehen bleibt.
  5. Die Style-Sheets wurden geändert, damit man die Schriftgrößen im Menü Ansicht | Schrift ändern kann.

Fehlermeldung beim Abspielen einer MP3-Datei.

  1. Entweder ist die Datei nicht vorhanden (-> die Datei besorgen) oder der Namen muss richtig geschreiben werden oder man entfernt den Link.
  2. Die MP3 kann nicht wiedergegeben werden (einen anderen MP3-Encoder versuchen (z. B. lame)).

Nach dem Klick auf einen Medienlink öffnet WMP (oder ein anderes Programm) die Datei.